页面重构与特效
整体感知
浏览器呈现页面
浏览器（客户端）
HTTP协议
IP
域名
服务器
就是一台电脑
数据库
网页
资源文件
程序
阿里云
1.准备域名（备案）
解析
把IP地址解析到域名上面
2.上传代码到服务器
HTML与SEO
SEO（搜索引擎优化）
搜索引擎优化
网站的目的是为了宣传 被人找到
怎么让浏览器更好的搜索到咱们
HTML
官方文档
火狐开发者
https://developer.mozilla.org/zh-CN/
（砖瓦）->标签
表面上看
完全闭合标签
<ya></ya>
半闭合标签
<you/>
本质
块级标签（容器标签）
特点
独占一行
可以设置宽高
作用
用于盛放其他标签
布局
标签
div
h 标题标签
非常重要
SEO
h1
一般情况 只有一个H1标签
浏览器在搜索 页面内容的时候 优先搜索h1标签
h2-h5
不要在意 h系列标签带来的样式效果，主要是SEO时候的权重
样式由CSS来设置
W3C的语法规范
HTML负责结构
CSS就是负责样式
p 段落标签
里面一般盛放 文字 图片 音视频等
内联标签
内联块级标签
页面结构
<!DOCTYPE html>
声明文档的格式
HTML5
html
head
meta 元标签
<meta charset="utf-8">
页面的编码集
utf-8基本涵盖了全世界所有主流语言的编码
就不会出现不能识别的语言 乱码的情况
<meta content="微软Bing搜索是国际领先的搜索引擎，为中国用户提供网页、图片、视频、学术、词典、翻译、地图等全球信息搜索服务。" name="description">
name 指定功能
description 描述
功能
1.展示在浏览器列表上的介绍
2.有利于SEO
内容设置
SEO的权限 比title低 但是相对于其他标签 也是非常高的
提取页面中 关键的词汇 组成一句话
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
keyword 关键词
搜索时候 输入的词汇
功能
1.优先被搜索到
2.做SEM 购买的关键词 必须在这个里面
内容的要求（严格）
由很多单词组成
由英文的逗号分隔开
title 标题标签
<title>微软 Bing 搜索 - 国内版</title>
作用
1. 浏览器上面显示的标题
2. 做SEO的时候 权限是最高的（比如 百度搜 250公司 的时候，如果标题是 250公司 会被优先搜索到）
钱
百度竞价
文字要求
页面功能的标题 - 站点的名字
body
div 容器标签
div+css
h 标题标签
非常重要
SEO
h1
一般情况 只有一个H1标签
浏览器在搜索 页面内容的时候 优先搜索h1标签
h2-h5
不要在意 h系列标签带来的样式效果，主要是SEO时候的权重
样式由CSS来设置
W3C的语法规范
HTML负责结构
CSS就是负责样式
p 段落标签
里面一般盛放 文字 图片 音视频等
span
span标签无语义，可以让咱们单独控制某些文本的样式或交互，他是一个内联标签（不能直接设置宽高，并且与文本或其他内联标签共享一行）
列表
分类
无序列表
ul
li
如
<ul>
<li></li>
</ul>
常用于 内容无序 且结构一致 的内容
有序列表
ol
li
常用于 有顺序 且结构一致的内容
如
<ol>
<li>沿着条路走到头</li>
<li>右转</li>
<li>直行穿过第一个十字路口</li>
<li>在第三个十字路口处左转</li>
<li>继续走 300 米，学校就在你的右手边</li>
</ol>
自定义列表（描述列表）
dl
最外层的部分
dt
标题
描述术语
dd
描述的内容
描述部分
如
<dl>
<!-- dt dd 为一组 但不是必须全写-->
<dt>标题</dt>
<dd>内容描述</dd>
<dt>XX电视剧</dt>
<dd>狗血剧情，呀呀呀呀呀呀呀呀呀呀呀呀呀呀呀</dd>
</dl>
意义与结构
意义
表示这一部分是一个整体
方便统一设置 这部分的结构和样式，特别是学了DOM之后
结构
无序列表
有序列表
自定义列表
自己定义
两层
外衣list
内容item
超链接 a
是一个内联标签（不能直接设置宽高，与其他内联标签共占一行）
可以链接到其他站点或者文件
特别重要的属性href
作用
1.可以链接到其他站点
可以做友链 提高网站的排名
注意 必须互链（互相链接）才可以提高排名
2.可以链接到其他文件||其他位置
其他位置
id 选择器
# 链接到当前页（id选择器的符号）
步骤：
1. 给要跳转到的位置 添加id选择器
<span id="safe">安全稳定</span>
2.给a标签 添加要跳转的位置 href="#xxx"
<a href="#safe">safe</a>
跳转到其他文件
写文件位置
3.可以下载文件
img
半闭合标签
<img src="" alt="">
src
资源文件的路径
alt
1. 当图片路径出错的时候，会显示alt属性的文字
2.图片作为内容 浏览器不知道图片是什么
如果添加了alt的属性，浏览器会爬取到 alt属性的文字，有利于SEO
width
宽度
height
高度
单位
默认是px
只写数字 就会认为是像素单位
如果 希望图片 等比缩放
等宽缩放
只设置 宽度
等高缩放
只设置 高度
路径
相对路径
html相对于 资源文件的路径
从内往外找
跳转上一级目录的工具
../
绝对路径
完整的路径
d:/work/img/1.jpg
描述的是一台电脑中 资源文件的具体位置
（换一台电脑 位置就很可能不一样）
导致资源文件找不到
表单
具备 与服务器通讯的功能
form
用于包裹其他的表单 输入标签的
具备 与服务器通讯的功能
通过属性
属性
action
提交数据 到服务端的位置
method
HTTP的方法
get
post
input
type
button
checkbox
多选
color
date
datetime
datetime-local
file
hidden
image
month
number
password
radio
单选
range
reset
search
submit
tel
text
time
url
week
placehoder
value
值
指定input 的默认值
可以通过js获得input 的值
怎么实现单选
1.需要使用radio类型
2.使用name给同功能的分组
缺少这一步 不可实现单选
单选或者多选 怎么点击文字进行选择
label 与 input配合使用 可以实现该功能
使用
label的for 与input 的id 进行关联
如
<form action="">
<label for="boy">男</label>
<input id="boy" type="radio" value="1" name="sex">
<label for="girl">女</label>
<input id="girl" type="radio" value="2" name="sex">
</form>
按钮
button
多行文本输入
textarea
<!--设置宽高 rows(行)行数多就高 cols(列)-->
<textarea placeholder="请输入心情" value="" rows="100" cols="30"></textarea>
下拉列表
<!--下拉列表-->
<!--选择里面套选项-->
<!--可通过 selected 实现默认选项-->
<select name="" id="">
<option value="0">解剖</option>
<option value="1" selected>web</option>
<option value="2">舞蹈</option>
</select>
表格
组成
table表
tr表格的行（table row）
td 表格数据（table data）列
td 表格数据（table data）列
td 表格数据（table data）列
td 表格数据（table data）列
tr表格的行（table row）
td 表格数据（table data）列
td 表格数据（table data）列
tr表格的行（table row）
td 表格数据（table data）列
td 表格数据（table data）列
元素
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
干什么？
1.展示表格数据
2.用于页面的布局
案例
CSS
层叠样式表
贴纸游戏
类似 女生化妆
前后关系
CSS的三大书写方式
1.属性 内联样式
style属性设置
2.嵌入样式脚本style
在html中 添加style标签
在标签中添加样式
3.通过单独CSS文件的方式
1.创建css文件
2.引入css文件
怎么与html文件关联
通过link标签关联
两大必掌握技能
选择器
工作职责
抓到 要设置样式的标签
三大常用选择器
元素选择器
标签名{}
类选择器
在html中指定 类选择器的名字
<input class="类选择器的名字">
.类选择器的名字{}
id选择器
<input id="xx">
#xxx{}
不同组合 可形成无数种选择器
属性
background
用于设置背景
color
设置文字颜色
with
宽度
height
高度
类选择器
写法
在起始标签的里面 添加class属性
在css文件中 使用.类选择器的名字
多类名
案例
伪类选择器
hour
转场（过渡）动画
transition:属性 动画时长 动画执行的函数 延迟执行;
盒模型
内容
内边距
使用padding设置
设置的顺序是
上右下左
padding设置
padding:10px;
上右下左都是10
padding:10px 20px;
上10 右20 下10 左20
padding:10px 20px 30px;
上10 右20 下30 左20
padding:10px 20px 30px 40px;
上10 右20 下30 左40
单独设置某一个方向的内边距
padding-left 左侧内边距
padding-right 右侧内边距
padding-top 顶部内边距
padding-bottom 底部内边距
效果：会让 内容距离边框 有一定的间距
！！！产生后遗症
影响盒子原本的宽高
真实宽度：宽+内边距+边框
边框
通过border设置（复合属性）
效果？
添加一个边框
！！！产生后遗症
影响盒子原本的宽高
真实宽度：宽+内边距+边框
破除影响的魔咒
把盒子设置成怪异盒模型
box-sizing:borderbox;
不再让 内边距和边框 影响 盒子的宽高
border:边框的宽度 边框的样式 边框的颜色;
边框的样式
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
单独一个方向的边框
border-bottom
底部
border-top
顶部
border-left
左侧
border-right
右侧
外边距
设置 自己与父元素或者 相邻元素的间距
margin
上右下左
单独一个方向的外边距
margin-bottom
底部
margin-top
顶部
margin-left
左侧
margin-right
右侧
特点
1.相邻元素的外边距重合现象
2.可以让元素 水平方向居中
margin:0 auto;
元素的显示模式
案例
导航条
页面布局
dispay
转块级元素
block
转内联级元素
inline
转内联块级元素
inline-block
选择器的权重
选择器
三大常用选择器
元素选择器
标签名{}
类选择器
在html中指定 类选择器的名字
<input class="类选择器的名字">
.类选择器的名字{}
id选择器
<input id="xx">
#xxx{}
不同组合 可形成无数种选择器
后代选择器
选择器 （空格）选择器
可以选择父元素里面所有符合的标签（子子孙孙）
相同权重的选择器
先写的 会被 后写的覆盖掉（只有相同属性 才会被覆盖，不同属性会叠加）
权重
对比选择器的 权力大小
权重规则（计算方式）
id选择器（权重 至高无上）
类选择器（权重 差一丢丢）
元素选择器（权重 低到地底）
1.先去对比 id选择器的数量（数量多的 权重高）
2.对比类选择器的数量（如果有id选择器，id选择器数量相同；类 数量多的 权重高）
3.对比元素选择器的数量
#xx .qq .qq (想都不想 有皇帝 肯定最高)
.ee .eq .rr .tt p a
p
.vv
页面布局
技术
浮动（float）
特点
在同一行 飘着
如果给元素 设置浮动
父元素不再拥有这个元素的高度
高度塌陷
如果宽度不够
左浮动 往左面掉
右浮动 往右面掉
用法
给需要设置 水平排列的元素 添加浮动
float:left|right;
左浮动
1 2 3
右浮动
3 2 1
解决高度塌陷问题
1.设置父元素的高度（不建议使用)
2.在最后一个设置浮动标签的后面 添加一个空标签 ，
设置为clear:left|right|both;（不建议使用)
3.通过伪元素的方式
父元素:after{
content:"";
display:block;
zoom:1;
clear:both;
}
作业
背景
background
是一个复合属性
background-color
background-image
background-repeat
repeat-x
repeat-y
repeat
background-position
px
%
left top center bottom
background-attachment
重点
1.设置固定的背景图
2.sprite 精灵图 雪碧图
background-position
background-size
cover
等比放大 宽不够 按宽放大； 高不够 按高度整体放大
contain
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
px
%
文字相关
字体
font-family
自定义字体
1.自定义字体
@font-face
font-family
随意起名字
src
字体的路径
2.使用字体
在使用的位置 使用font-family设置
如：
@font-face {
/*设置字体位置*/
src: url("字魂79号-萌趣奶油体.ttf");
font-family: halibote;
}
p{
/*font-family: "Adobe 楷体 Std R";*/
font-family: halibote;
}
文字阴影
text-shadow
x轴阴影的偏移量 y轴阴影的偏移量 羽化程度 颜色
文字颜色
color
文字字号
font-size
文本对齐的方式text-align
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
text-decoration 给文本添加 上下中划线
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
text-indent 可以让首行文本缩进
white-space 处理文本间空格的样式 控制是否换行
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
word-spacing:设置单词间的间距
line-height
设置文字垂直方向居中
把line-height与高度设置为相同的
定位
相对定位
相对于 自己原来的位置挪动
还会占据原来的位置 不会影响到其他元素的布局
绝对定位
绝对定位 一般与相对定位 混合着去使用
如果没有设置 父元素的相对定位，就会参考body的位置定位
失去自己的默认宽度
固定定位
固定在某一个位置
失去自己的默认宽度
顶部或底部的导航条
弹出的广告
某个位置的图标（联系客服、工具按钮）
粘性定位
粘帖在某一个位置
会占据一定空间
定位后可以使用的属性
left
right
top
buttom
通常会有 页面层级关系的现象（被覆盖）
可以通过z-index设置层级 默认值1 负值往下 正值向上
只要发现事件不触发 就需要检查是不是页面层级的问题
隐藏元素的方式
opacity: 0; 不透明度设置为零 虽然隐藏 但是 依然存在 并且可以接收事件
visibility: hidden; 隐藏元素不显示 但是位置依然在 不可接收事件
display: none; 影藏元素 不再占位
overflow
超出部分处理方式
hidden
超出部分隐藏
也是清除浮动的方法之一 在父元素添加
scroll
超出部分滚动显示
一定要添加上宽度或高度
插件
使用第三方插件注意事项
1.引入CSS样式
2.引入js
3.一定要严格按照示例的HTML结构去写
swiper
1.引入CSS样式
<link rel="stylesheet" href="css/swiper.css">
2.引入js
通常在body结束标签的上面引入
引入的标签 script
<script src="js/swiper.min.js"></script>
3.一定要严格按照示例的HTML结构去写
字体图标
fontawesome
https://fontawesome.dashgame.com/
回顾
HTML
用于布局的标签
肯定是块级元素
特征
1.肯定是一个完全闭合标签
2.肯定可以设置宽高 独占一行
3.不是通过display转换的元素
有哪一些
div
<div></div>
p
<p></p>
h1-5
<h1-5></h1-5>
<h1></h1>
<h2></h2>
ul与li
<ul>
<li></li>
</ul>
用于布局元素的本质
当做容器 去盛放其他元素
内容的标签
通常是内联元素
会表示某一些内容
如
img 表示图片
<img src="">
src是图片的路径
a 超链接
可以点击链接到其他位置的文本
也可以在它里面放图片 或者 其他内联标签
不可以放块级元素
<a href=""></a>
href是要链接的位置
input 表单标签 单行文本输入
可以演化出来很多标签
通过type值变化
text
单行文本输入
number
数字输入
radiu
单选
range
滑杆
...
span
文本
一般让某些文字 有特殊效果 会用span包裹
代码规范
脚本加载
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- body goes here -->
<script src="main.js" async></script>
</body>
</html>
命名
W3C规范
W3C CSS2.1的 4.1.3 节中提到：
标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；
它们不能以数字，或一个连字号后跟数字为开头。
它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。
选择器命名规则
2.1 字符采用
实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文。
2.2 慎用数字
以字母开头，避免纯数字，避免数字开头，以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别，而其它浏览器下则不识别（忽略该规则）。
2.3 区分ID和class
一个ID名在文档中只使用一次，class类名可在文档中多次使用。
2.4 语义化标签
语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另外一个好处是提高网页对一些特殊浏览设备的友好性。
语义化标签的一个误区是按CSS样式表现的结果命名。
如，某区域字体大小为14px,则该区域的样式名定义为font14px,css样式为.font14px{ font-size:14px;}。如，某区域字体颜色为红色，则样式定义为red,css样式为.red { color: red; }。
这样的好处是实现某种程度的“所见即所得”，即只需要看该结构的样式名，即可知道该样式控制（实现）着怎样的效果。但其弊端同样明显。
可以想象，假设是产品boss突然要将某区域的字体颜色从red改为blue,那你是只更改.red { color: red; }将其改为.red { color: blue; }?还是“勤快”的将html页面所有的red类名更改替换为blue,再添加一个新样式.blue { color: blue; }?
前者意味着“所见非所得”，当看到一个命名为red的样式却表现为blue时，你是否觉得很诡异！？
后者意味着无止境的替换或修改，若是文件较少，还可以接受。但若是有成百上千个页面，你需要将成百上千的文件替换样式名称后再上传，崩溃了，有木有？
所以严重建议不按CSS样式表现的结果命名。
从深层层次分析，CSS的出现是让HTML只专注于结构，实现网页结构和样式的分离，这也是CSS能够代替表格布局而风靡的重要原因。按CSS样式表现结果命名，实际上是让HTML结构和CSS产生强耦合，是违背结构和样式分离的。
2.5 区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
CSS命名规则常用单词
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
页面主体：main
登录条：loginbar
标志：logo
广告：banner
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
