一阶段笔记
HTML概念
1.HTML(Hyper Text Markup Language)称为超文本标记语言
由一套标签组成的语言称为标记语言
XHTML 可扩展超文本标记语言
\
2.W3C万维网联盟 制定了结构html和表现css的标准
WHATWG 网页超文本应用技术工作小组，推动H5标准为目的的组织
ECMA 制定行为的标准
Web标准 结构（html，xhtml），表现(css)，行为(DOM，JS)
3.首页必须命名为index.html，其他页面先在html文件夹里。
\
HTML基本语法
1.常规标记/标签 <div></div>
空标记<标记/><br/>
说明：a.在<>中的第一个单词叫做标记，标签，元素。
b.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。
c.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
d.空标记没有结束标签，用"/"代替。
2.注释:
html注释<!--注释内容 -->
css注释 /*注释内容*/
js注释 /*多行*/ //单行
3.在head部分放置表现(css).
4.在body部分放置结构（网页内容）。
\```
HTML标签
`\
1.表格中数字自动填充增加{$} 如：table>tr*5>td{$}*5 加Table为表格样式
2.段落文本内容 <p></p>.
3.空格
4.加粗 <b></b>或者<strong></strong>
5.倾斜<em></em>或者<i></i>
6.强制换行 <br/>
7.水平线<hr/> 下划线<u></u> 删除线<s></s>
8.HTML中有三种列表，分别是无序列表，有序列表，自定义列表。
说明：
无序列表
<ul>
<li></li>
<li></li>
....
</ul>
有序列表
<ol>
<li></li>
<li></li>
...
</ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>解释</dd>
<dd>解释</dd>
...
</dl>
9.图片相对路径 插入图片img
title="鼠标滑过显示文字" alt="图片加载失败显示文字" src="图片存储路径"
a.位置在上一层，返回用.. 点击用/ 上一层文件夹图片用"../文件夹名/图片名字"
10.超链接 <a href="链接地址">点击文本</a>
页面打开方式<target>
本页面打开_self 另开一页_blank
alt="加载失败显示文字"
\
11.div的用法 (可大可小)
<div></div> 文档区域，文档布局对象
12. span的用法
<span></span> 文本结点（某一小段文本，或是某一个字）
`
\
***
\
HTML表格制作
1.数据表格的作用及组成
作用：显示数据
组成：
<table>
<tr>行
<td>内容</td>单元格
<td>内容</td>单元格
....
</tr>
</table>
2.表格的相关属性
width="宽" height="高"
border=“表格边框大小”
cellspacing="单元格间距离"
bgcolor="表格背景色“
align="表格对齐方式"（left/center/right）
合并单元格属性：
colspan="所要合并单元格列数”合并列，左右合并
rowspan="所要合并单元格行数”合并行，上下合并
\
***
表单
1.表单的作用：用来收集用户信息。
2.表单框：method提交方法 提交方式（post,get)
<form name=“表单名称” method="post" action="#">
</form>
*get和post的区别:
# 1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；
Post的所有操作对用户来说都是不可见的。 2. Get传送的数据量较小，
这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
4. Get执行效率却比Post方法好。Get是form提交的默认方法。
3.文本框
<input type ="text" value="默认值“ placeholder="输入框内容/>
4.密码框
<input type="password"/>
5.提交按钮
<input type="submit" value="按钮内容"/>
6.重置按钮
<input type="reset" value="按钮内容"/>
7.禁用按钮 disable="disabled"(简写disabled)
8.默认选项 checked="checked"(简写checked)
9.下拉菜单
<select>
<option>菜单内容</option>
<option selected(默认选中)>菜单内容</option>
</select>
10.多行文本框
<textarea></textarea>
11.占位 placeholder="内容"
12.按钮 button只起到跳转作用，不进行提交。
submit是提交按钮 起到提交信息的作用
\
13.单选框
男<input type="radio" name="ral"/>
女<input type="radio" name="ral" />
单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
14.复选框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled">
(disabled="disabled" :禁用)
(checked="checked" :默认选中)
\
***
# *` CSS基础`*
1.CSS汉译:层叠样式表，就是如何修饰网页信息的显示样式。
层叠性：给同一个元素添加相同的CSS属性，属性值会存在覆盖问题（代码执行顺序从上向下执行）
2.CSS语法：CSS由两部分组成：选择符（选择器）例div{}，声明（属性：属性值组成）例：声明{属性：属性值；}
语法说明：
a.每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
b.属性必须放在花括号中，属性与属性值用冒号连接。
c.每条声明用分号结束。
d.当一个属性有多个属性值的时候，属性值和属性值不分先后顺序。
e.在书写样式过程中，空格，换行等操作不影响属性显示。
3.内部样式表：在head标签内写style标签，在style标签内写选择器和声明。
4.border-radius:50% (圆角）
5.外部样式表：创建外部CSS文件，通过link标签引入外部css文件。例如：<link rel="stylesheet" href="路径">(多数使用)或者@import url(路径)
6.内联样式表：在标签里写style="属性：属性值；属性：属性值；..."
7.总结：
a.行内（内联）样式的作用域是当前标签。
b.内部样式的作用域是当前文件。
c.外部样式表的作用域是有关联的所有文件。
9.class选择器：
a.通过class起名字。
b.通过.名字设置样式。
10.样式表的优先级
！important>内联>内部/外部
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
11.群组选择器
语法：选择符1，选择符2，选择符3......{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
12.包含选择器
语法：选择符1 选择符2{属性：属性值;}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;
13.伪类选择器
语法：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
E:hover{属性：属性值;}鼠标划过元素时的状态;
E:active{属性：属性值;}即鼠标按下时元素的状态;
*当这4个超链接伪类选择符联合使用时，应注意他们的顺序
14.id选择器
语法：#id名{属性：属性值;}
说明：
a.当我们使用id选择符时，应该为每个元素定义一个id属性；
如：<div id="top"></div>
b.id选择符的语法格式是“#”加上自定义的id名；
如：#top{width:300px; height:300px;}
c.起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
d.一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素 对象。
e.最大的用处：创建网页的外围结构.
15.通配符【*】
作用：选中页面上所有元素。常用来重置样式。
16.清除外边距
margin：0；
padding：0；
17.选择符的权重(!important的权重最高)
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0010
伪元素选择符的权重为0001
包含选择符的权重：为包含选择符的权重之和
行内样式的权重为1000 继承样式的权重为0000
\
18.字体大小：选择器（font-size:12px/14px/16px;）
属性值为数值型时，必须给属性值加单位，属性值为0时除外。
单位还可以是pt，9pt=12px；
默认情况下：1em=16px,0.75em=12px,1ppi=16px;
19.文本字体：{font-family:"宋体"，“黑体”；}
20.css加粗：{font-weight：bolder/bold/normal/100-900;}取值范围100-500不加粗，600-900加粗。
21.text-transform:none/capitalize首字母大写/uppercase将单词全部变成大写/lowercase将单词大写转变为小写。（鼠标滑过）
22.字体风格：{font-style:normal常规字体/italic/oblique倾斜;}
说明： 1）italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。
23.水平对齐方式:{text-align:left/right/center/justify（两端对齐中文不起作用）;}
24.垂直(基线)对齐方式{vertical-align:top/bottom/middle;}
25.行高{line-height:normal/数值；}
说明：
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
当单行文本的行高大于容器高时，可实现单行文本在容器中齐以下任意位置的定位。
26.文本修饰：text-decoration:none/underline/overline/line-through
说明：
none：没有修饰
underline：添加下划线
overline：添加上划线
line-through：添加删除线
27.首行缩进：text-indent:..(推荐单位用em)；em参考对象是当前字号。可以取负值，只对第一行起作用。
28.字间距 {letter-spacing:value;}控制英文字母或汉字的字距。
29.词间距{word-spacing:value;}控制英文单词词距。
\
30.定义列表符号样式：
a.list-style-type：disc(实心圆)/circle（空心圆）/square(实心方块)/none。
b.使用图片作为列表符号：list-style-image:url(所使用图片的路径及全称);
c.定义列表符号位置：list-style-position:outside（默认外面）/inside里面;
关于列表属性的简写：list-style:;
边框的相关属性
## 边框相关属性
1.边框：边框宽度：border-width
边框样式：border-style
边框颜色：border-color
2.边框线型：soild:实线； dashed:虚线； dotted:点状线； double:双线； none:没有边框
3.单独设置某个方向的边框属性：
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
4.
transparent 为透明色
5.引入背景图片:background-image:url();
png支持背景透明，jpg不支持背景透明。
设置背景图片大小：background-size
6.背景图片的显示原则
a.容器尺寸等于图片尺寸，背景图片正好显示在容器中；
b.容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
c.容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。
7.背景图片平铺属性
语法：background-repeat:no-repeat/repeat/repeat-x/repeat-y
no-repeat:不平铺
repeat:平铺
repeat-x:横向平铺
repeat-y:纵向平铺
8.背景图位置
background-position:
水平方向值：left/center/right或数值
垂直方向值： top/center/bottom或数值
9.背景图的固定
语法：选择符{background-attachment:scroll(滚动)默认的/fixed(固定);}
说明：记得用在有滚动条的地方；
10.各属性的缩写语法：
选择符{background：属性值1 属性值2 属性值3;}\
\
#### * 浮动详解*
1.浮动属性
语法：float:none/left/right;
注：*浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
*浮动后的元素会脱离标准流(不会脱离文本流)
*浮动后的元素相当于置换元素元素（一行显示多个、可以设置宽高）
2.盒模型的概念
盒模型是CSS布局的基石，规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。
3.盒模型的组成
内容区content、内填充 padding、边框border、外边距margin
内填充：padding,在设定页面中一个元素内容到元素的边缘(边 框) 之间的距离。 也称补白。padding不可以写负值！
4.padding作用：改变子元素或内容在父元素的位置。
padding值是额外加在元素原有大小之上的，为保持元素大小不变，需要从元素宽或高上减掉后添加的padding属性值。
padding设置一个值的时候，为上下左右；
padding设置两个值时，为上下、左右；
padding设置 为三个值时，上、左右、下；
padding设置四个值时，为上、右、下、左；
可以设置单独方向的padding
padding-top：value；上
padding-bottom：value；下
padding-left:value;左
padding-right:value;右
5.外边距margin，margin可以写负值！
作用：控制盒子跟盒子之间的间距。
说明：可单独设置某一方向边界
margin-left:左边界
margin-right:右边界
margin-top:上边界
margin-bottom:下边界
margin属性值的四种方式的表示方法和Padding相同。
***
元素类型
1.HTML元素分类为块状元素，内联（行内）元素，置换元素（行内块元素）。
2.块级元素(div、form、p、ul、ol、dl、dt、dd、li、h1-h6...
特点：独占一行显示，可以写width和height。块状元素一般为其他元素的容器，可以容纳其它内联元素和部分块状元素，例如div>p;
3.行内元素(a,b,br,i,em,label{表单标签}，img等)
特点：多个在一行显示，不可以写width和height。
内联元素支持盒模型，但个别属性不能正确显示：padding-top、padding-bottom
4.元素类型的转换
盒子模型可通过display属性来改变默认的显示类型
作用：该属性设置或检索对象元素应该生成的盒模型的类型。
语法：display：block（块状元素）/inline（行内元素）/inline-block（行内块元素）/none（隐藏元素）
5.>该选择器只会选择第一代的元素，用法.u1>li:hover {}
6.元素添加float属性，就相当于给该元素加了display:inline-block;
***
\
元素定位+锚点
1.属性position
属性值：static默认值 ，absolute绝对定位【绝对定位默认依据(html)定位】 ，relative相对定位 ，fixed绝对定位（固定定位）
需要配合方向（top,bottom,right,left）使用。
1.1 绝对定位：如果父元素有定位，依据有定位的父元素定位（定位值不为static时）。
绝对定位会脱离布局流，不占位。
层级顺序z-index：number；默认为0，数值可以取负值，值越大在上层显示，需要配合定位使用。
1.2相对定位 依据自身原来的位置定位。
子元素依据父元素定位口令：子绝父相。
相对定位不会脱离布局流，原来的位置占位。
2.元素始终在窗口上下左右居中
方法一：
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
方法二：
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
说明：当一个元素有绝对定位（absolute）的情况下，如果该元素的子元素需要以该元素为参照物进行绝对定位，那么子元素可以直接加position:absolute;
3.固定定位
position：fixed
需要配合方向使用。
4.绝对定位和相对定位的区别
a参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
b绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。
5.锚点链接
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记div id="命名锚记名"> </标记div>
2)命名锚记连接 语法：<a href="#命名锚记名称"></a>
6.opacity:0.5;(文字和背景都透明)（取值范围0~1）
background:rgba(,,,透明度)
7.滚动条
说明：Overflow内容溢出时的设置
属性： overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的属性值:
visible,scroll,hidden,auto.
visible 默认：其中的内容无论是否超出范围都将被显示。
hidden ：任何超出“width”和“height”的内容都会隐藏。
scroll ：无论内容是否超越范围，都将显示滚动条。
auto ：当内容超出范围时，显示滚动条，否则不显示。
8.滚动字幕
语法：
<marqueebehavior=“scroll/alternate” 滚动形式
direction="up/down/left/right" 滚动的方向
scrollamount=“value” 滚动速度
height="value" 滚动的范围
width="">
</marquee>
behavior（行为）="scroll(滚动)/alternate（晃动） direction（方向）="up(从下向上)/down（从上向下） /left（从右向左）/right（从左向右）”
scrollamount（滚动速度）="value"
height="value(上下滚动范围)" width=""(左右滚动范围)
***
图片整合
\
1.精灵图
使用软件CSS Satyr v1.2,exe
图片生成后，head部分用.pic写图片位置，再用.pic-$的位置。
body部分使用<span>标签使用精灵图。
2.滑动门
说明：滑动门是利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果。
特征：使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性。
\
\
宽度自适应
\
1.若块级元素宽度不设置，或者设置成100%，都是占据其父级元素的一整行（继承父元素宽度）。
应用场景：a.页面最外层的盒子一般都要占据屏幕的大小，所以宽度100%。
b.子元素使用百分比表示盒模型任意部分大小的话，代表的是子元素盒模型任意部分尺寸=父元素宽度*百分比;
2.高度自适应
1）父元素高度由子元素撑开
(1)若是子元素都浮动了，父元素不会被撑开（高度塌陷）
解决办法(清除浮动):
* 给父元素添加最后一个子元素(块级元素)
{ height:0;overflow:hidden;clear:both; (clear:left/both/right)}
缺点：造成不必要的浪费
* 给父元素添加{overflow:hidden;}
缺点:可能造成需要的部分被隐藏掉
* 伪元素清除法.（万能清除法）
.clearfix::after
{content:"";
display:block;
height:0;
overflow:hidden;
visibility:hidden;
clear:both;
zoom:1;} ==>base.css
备注：到时做案例的时候，给父元素添加类名 clearfix即可。
clear:both清除浮动 clear:left清除左浮 clear:right清除右浮
(2)预防子元素会没有内容，撑不开父元素的情况
解决办法：给父元素添加最小高度min-height。
（当内容高度小于最小高度时，按最小高度显示。当内容高度大于最小高度时，按内容高度显示）
1.兼容写法:
①{min-height:;_height:;}
_下划线是过滤器，IE6认识
过滤器<https://blog.csdn.net/b1244154318/article/details/51925612>
②overflow: hidden;
_overflow: visible;
min-height: 100px;
height: auto !important;
height: 100px;
***
\
BFC块级格式化上下文
块级格式化上下文 (Block Formatting Context)
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。
满足下列条件之一就可触发BFC
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block
【5】position的值为absolute或fixed
特性
【1】阻止垂直外边距（margin-top、margin-bottom）重叠
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠
解决： 触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠,display:inline-block;
【2】包含浮动元素
可以包含它内部的所有元素，包括浮动元素——因此一清除内部浮动
解决：清除浮动， overflow: hidden;，为其本身创建一个BFC
bfc的作用：
1.自适应两栏布局
2.可以阻止元素被浮动元素覆盖
3.可以包含浮动元素——清除内部浮动
4.分别属于不同的BFC时可以阻止margin合并
\
浏览器兼容
一、常用的浏览器
1）主流浏览器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的浏览器 : Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN
二、五大浏览器内核
•Trident （MSHTML）（ie 三叉戟；三叉线；三齿鱼叉）
•Gecko （壁虎 firefox）
•Presto （ 欧朋opera）
•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
•Blink (由Google和Opera Software开发的浏览器排版引擎)。
三、五大浏览器内核代表作品
*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器 代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
*Gecko：代表作品Mozilla Firefox (火狐)是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
*Webkit: 代表作品Safari（苹果）、Chrome（谷歌） ， 是一个开源项目。
*Presto : 代表作品Opera（欧朋） ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
***
浏览器兼容bug
一、1) CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug（漏洞）.
2) CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或官方的。有些人更喜欢使用patch(补丁)来描述这种行为。补丁 3) Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。
\
二、IE6常见CSS解析Bug及hack
1)图片有边框BUG(ie9及以下) 当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:0 none;
三、图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将div的字体大小设成0；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;
四、margin塌陷
当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上，
Css hack:
1、给父级元素添加overflow:hidden;(推荐使用)
2、给父元素或者子元素加浮动
3、给父元素元素加border（视情况而定）。
五、外边距合并
margin合并BUG当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值；尽量不要如此写，
六、双倍浮向（双倍边距）（IE6及以下）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;
七、默认高度（IE6）
描述：在IE6及以下版本中，部分块元素拥有默认高度
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
八、表单元素行高对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;
九、按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
(1)input外边套一个标签，在这个标签里写input的样式，把input的边框去掉，默认padding也要去掉,display:block。
(2)用a标签模拟
十、鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:如统一某元素鼠标指针形状为手型应添加声明：cursor:pointer;
十一、透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )
IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数)
\
***
高级表单
1.表单字段集
使input带边框
<fieldset>.....</fieldset>(默认有边框)
2.字段集标题
<legend align="center/left/right">....</legend>（默认无边框）
3.提示信息标签
<label for="绑定控件id名"></label>label元素用来定义标签，为元素指定提示信息。
4.上传文件框
<input type="file" multiple="multiple"(可实现多选) />
5.上传图片
<input type="image" src="" width="" height="" alt="图片" />（可作为提交按钮）
***
高级表格
1.caption--------------表格标题；
2.th-------------------定义表格列标题；
3.表格组成-------------thead\tbody\tfoot.
tbody排在最后，表格可以没有tfoot。可以有多个tbody
4.<colgroup span="分组列数"------定义列分组，会产生分割线
5.thead元素应与tbody和tfoot一起使用，必须在 table 元素内部使用这些标签。
6.rules-----分割线属性，属性值groups/rows/cols/all/none.
groups:位于行组和列组之间的线条；
rows:位于行之间的线条；
cols:位于列之间的线条；
all:位于行和列之间的线条；
none：没有线条；
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。 注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。
选择器
(一)基本选择器
1.标签选择器：通过标签名获取元素
2.class选择器：通过.类名获取元素 0010
3.id选择器：通过#id名获取元素(外层嵌套) 0100
4.* :通配符选择器，获取到页面的所有元素
5.群组选择器: 用逗号隔开基本选择器，表示这些选择器都获取到
(二)层次(关系)选择器
1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代
例：p a{
color:red;
}
div>a
p>a
2.子代选择器:用>隔开基本选择器，表示后一个选择器是前面的子代
例：.box>div
.box>div*3>div
3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）
4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素
(三）动态伪类选择器
1. a:link 锚链接被访问前添加样式
2. a:visited 锚链接被访问后添加样式
3. e:hover 鼠标悬停在元素上添加样式
4. e:active 鼠标点击元素时添加样式
5. :focus 表单元素被聚焦时，添加样式
(四)目标伪类选择器
目标:target{} 被选中的目标添加样式
(五)ui状态伪类选择器
1. :enabled 可用的表单元素添加样式
2. :disabled 不可用的表单元素添加样式(disabled )
3. :checked+E 被选中的表单元素添加样式
4. ：:selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)
(六)结构伪类选择器
1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。
2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子
3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子
n的用法：
（1）6n倍数 (2)even偶数 (3)odd奇数 （4）-n+5 选中1-5
（5）nth-child(-n+9):nth-child(n+7) 7-9区间
4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子
5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子
6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子
7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子
8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子
9. E:empty 获取到空的E元素（连空格都不能有）
(七)属性选择器
1. E[attr] 拥有attr属性的E元素添加样式
2. E[attr="val"] 拥有attr属性值为val的E元素添加样式
3. E[attr*="val"] attr属性值包含val的E元素添加样式
4. E[attr^="val"] attr属性值以val开头的E元素添加样式
5. E[attr$="val"] attr属性值以val结尾的E元素添加样式
(八)伪元素
1. E::before给E元素添加第一个子元素
例：div::before{
content:"Laotian";
display:block;
width:100px;
height:100px;
}
2. E::after 给E元素添加最后一个子元素
3. E::first-letter给E元素第一个字添加样式
4. E::first-line给E元素第一行添加样式
***
文本属性
1.文本阴影
text-shadow:（，，，）（水平方向【正值为右】，垂直方向【正值为下】，模糊度【不能为负值】，颜色）
2.显示省略号
a容器写宽；
b强制文本在一行显示white-space：nowrap；
c超出隐藏overflow:hidden;
d显示省略号text-overflow:ellipsis;
3.单词换行 word-wrap:break-word;
4.自定义字体
a.自定义 @font-face{font-family:起名字;src:url(字体路径);}
b.font-family使用
5.字体图标
a.使用图标库下载
b.link下载的iconfont.css文件
使用：
c.彩色图标使用js
引用js文件： <script src="[../../iconfont/iconfont.js]()"> </script>
使用彩色图标： <svg class="icon" aria-hidden="true">
<use xlink:href="[#icon-gouwuche_o]()">
</use>
</svg>
三、新增颜色模式
1.rgba(r,g,b,a)
【Red 0-255,Green 绿 0-255,Blue 蓝 0-255,透明度 0-1】;
2.HSLA(h,s,l,a)
【H 色调 取值为：0-360,过渡为：(红橙黄绿青蓝紫红) ,
S饱和度 取值为：0.0% - 100.0% ,
L 亮度 取值为：0.0% - 100.0%，50%是平衡值,
A 透明度取值0~1之间】
3.元素全透明：opacity
背景透明，文字不透明：background：rgba（r,g,b,a）
四、盒模型
标准盒子模型中，width(height)= content;
Ie盒子模型(怪异盒模型)中，
width(height)= border+padding+content；
box-sizing:border-box(怪异盒模型);
box-sizing:content-box(标准盒模型);
五、浏览器前缀
-webkit-border-box：谷歌浏览器、国内浏览器
-o-border-box: opera浏览器
-moz-border-box：火狐浏览器
-ms-border-box：ie浏览器
六、边框属性
圆角
倒的值为半径，
超过百分之五十为圆。
七、背景属性
1.background-size
属性值：
（1）数值、百分比:水平方向 垂直方向;[可能发生扭曲]
（2）cover:覆盖，背景图片完全覆盖容器[可能会丢失一部分图 片,不会发生扭曲]
（3）contain:包含，容器完全包含背景图片[容器可能会出现空 白区域]（背景图不会发生扭曲和丢失）
*轮播图，ui一般会给一张超级大的图片
轮播图的做法：
引入背景图background-image、设置背景图大小background-size:cover、背景图定位background-position:center center;
2.background-origin 背景的定位区域
换句话说，就是background-position的原点（0，0）在哪个区域的左上角
注意区分：background-position 背景在容器的定位区域的什么位置摆放
属性值：
padding-box（padding以内，默认）
content-box内容以内
border-box边框以内
八、什么是渐进增强和优雅降级
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
\伸缩布局盒模型（弹性盒模型）
1.说明：
css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局，即使他们的大小是未知或者动态的。
主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。
\
2.flexbox布局功能主要具有以下几点：
a.屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
b.指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
c.指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
d.指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
e.控制元素在页面上的布局方向；
f.按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。
\
3.弹性盒
一、设置在容器：父元素上。
1）使其变为弹性盒：
语法：display:flex;
说明：规定子项目在父元素主轴方向（默认水平）一行显示，不会换行。侧轴方向（默认垂直）会默认拉伸。
2)设置主轴方向：
语法：flex-direction;
属性值：row 默认为水平向右
column 垂直向下
row-reverse 水平向左
column-reverse垂直向上
3）允许子元素伸缩换行：
语法：flex-wrap：nowrap；
属性值：nowrap默认不换行 、wrap换行
4）设置子项目在容器主轴方向的对齐方式
语法：justify-content：属性值；
属性值：flex-start 默认在主轴方向起点位置对齐
flex-end 在主轴方向终点位置对齐
center 中间
space-between 将空白区域平分在子项目之间
space-around 将空白区域环绕在子项目两边
5）设置子项目在其所在行的侧轴对齐方式
语法： align-items（单行）：属性值；
属性值：stretch 默认拉伸
flex-start 子项目在其所在行的起始位置摆放
flex-end 子项目在其所在行的结束位置摆放
center 中间
6）设置子项目在侧轴方向的对齐方式
语法：align-content(控制多行)：属性值；
属性值：flex-start 默认在所在行起点位置对齐
flex-end 在所在行终点位置对齐
center 中间
space-between 将空白区域平分在子项目之间
space-around 将空白区域环绕在子项目两边
\
二、设置在子项目上：
1）设置子项目在父元素主轴方向的比份；
语法：flex:number;
2）设置单个子项目在其所在行的侧轴对齐方式；
语法：align-self：属性值；
属性值：stretch 默认拉伸
flex-start 子项目在其所在行的起始位置摆放
flex-end 子项目在其所在行的结束位置摆放
center 中间
3）设置子项目的顺序；
语法：order:number;
说明：写了order的排在没有order属性的元素后面。
写了order的，属性值越小的在越前面；
没写order的属性值默认为零，order可以写负值。
4）设置子元素压缩；
语法：flex-shrink: 0/1;
属性值：0---不压缩；
1---压缩；
\
***
\
多列布局
说明：css多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。跟瀑布流效果相仿。
核心属性：（一般加在body上）
column-width 列宽 ， 定义每列列宽； 类似于最小宽度min-width； auto 自适应；
column-count 列数，定义分列列数；最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定
column-gap：定义列间距； 不能为负数；
column-rule：定义列边框；与定义边框一样：2px dashed #ccc;
column-span： 属性值； 定义多列布局中子元素的跨列效果；通常用于标题；
属性值：none：不跨列； all：跨所有列；
当出现图片与下方标签不配对时，使用break-inside: avoid;（断点）这类属性加在图片的上级父元素上；
\
***
媒体查询
1.说明：页面结构简单使用
2.屏幕分界点：
超小屏幕xs （移动设备）768px以下
小屏设备sm 768px-992px
中等屏幕md 992px-1200px
宽屏设备lg 1200px以上
3.语法
1）@media screen and (条件：最小宽度，最大宽度等)
2）min-width 若当前页面宽度大于min-width的值时，则样式生 效。注意！链接的css文件的min-width应从小写到大;
或者最大宽度：
\
\
\
***
移动端布局
操作顺序：
1.链接相应的CSS、JS文件。注意所链接文件顺序。
使用其他编码器时，注意设置
2.确定设计稿大小，改相应rem、js参数；（插件：cssrem）
640px设计稿/rem、js（function）为640，插件（font-size）改为64，
750px设计稿/rem、js为750，插件改为75。
3.设置页面为高度自适应；
{height：100%}
4.根据测量布局；
5.当整体产生滚动条时，设置position：absolute；脱离布局流
6.px、em、和rem的区别
1）概念
px：绝对单位，页面按精确像素展示。
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
2）特点
PX特点：字体大小固定。
EM特点 ：
a. em的值并不是固定的；
b.em会继承父级元素的字体大小。
rem特点：
rem是CSS3新增的一个相对单位（root em，根em）,区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
\
\
***
\
边框
1.边框阴影：
语法：box-shadow:属性值；
属性值：x-offset(右)
y-offset(下)
blur模糊区域
spread扩展区域
color
inset向内
或者简写：box-shadow:0px 0px 0px 0 #ccc inset;
水平方向（正值为右）垂直方向（正值为下）模糊度 放大 颜色 在里/外
2.边框图片
语法：border-image
（1）边框图片资源 border-image-source:url().默认会将图片显示在边框的四个角
（2）边框图片的裁剪 border-image-slice(0 0 0 0上右下左)
（3）边框图片的宽度,默认为边框宽度。border-image-width（一般不写）
（4）边框图片的平铺border-image-repeat 属性值：stretch拉伸（默认） repeat重复 round缩放后的重复
（5）边框图片向外延伸 border-image-outset(不能为负值) 。
\
(二) 渐变gradient（属性值）
1.线性渐变
background: linear-gradient(yellow, blue,pink,#58bc58,...); 标准语法（必须放在最后）
2.对角渐变
background: -webkit-linear-gradient(left top, red , blue);[ Safari 5.1 - 6.0 ]
background: -o-linear-gradient(bottom right, red, blue); [ Opera 11.1 - 12.0 ]
background: -moz-linear-gradient(bottom right, red, blue); [ Firefox 3.6 - 15]
background: linear-gradient(to bottom right, red , blue); [标准的语法（必须放在最后）]
3.角度渐变
(新版本旋转方向正值为顺时针，老版本旋转方向正值为逆时针）
background: -webkit-linear-gradient(0deg, red, blue);[Safari 5.1 - 6.0 ]
background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(0deg, red, blue);
[标准语法(必须放在最后）]
4.颜色结点（不均匀分布）
background: linear-gradient(red 50%, blue 70%,yellow);
5.径向渐变
background: -webkit-radial-gradient(red, green, blue);
[ Safari 5.1 - 6.0]
background: -o-radial-gradient(red, green, blue);
[Opera 11.6 - 12.0 ]
background: -moz-radial-gradient(red, green, blue);[Firefox 3.6 - 15]
background: radial-gradient(red, green, blue);
[标准的语法 必须放在最后]
颜色（不均匀分布）
6.shape 参数定义了形状。
它可以是值 circle 或 ellipse。
其中，circle 表示圆形，ellipse 表示椭圆形。
默认值是 ellipse。
7.重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
\
三、过渡transition
1.transition-property规定应用过渡的 CSS 属性的名称。
2.transition-duration定义过渡效果花费的时间。默认是 0。
3.transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
a.ease规定慢速开始，然后变快，然后慢速结束的过渡效果
b.linear规定以相同速度开始至结束的过渡效果
c. ease-in规定以慢速开始的过渡效果
d. ease-out规定以慢速结束的过渡效果
e.ease-in-out规定以慢速开始和结束的过渡效果
f.transition-delay规定过渡效果何时开始。默认是 0。
语法：transition:all 2s linear 3s;
\
四、2D转换transform
1、translate( X,Y)偏移方法
[水平（正值为右），垂直（正值为下）]
2、rotate(0reg，0reg)旋转方法(reg为角度)
3、scale( X,Y)缩放方法，x,y为倍数，可放大可缩小
4、skew(Xdeg,Ydeg)扭曲方法
可组合写
\
五、3D变换
1.transform之3d移动变换: （加在父元素上）
语法：transform:translate3d(x,y,z)
z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。
transform:translateY() translateZ(z) 【女神上来】
2.transform-style规定变换的样式（加在父元素上）
当写3d模式时，要加上这句语法，开进图片3D状态。
属性值：flag平面（默认） preserve-3d保持3d变换 transform-style: preserve-3d 保持3d变换
3.设置观察的距离，
景深 perspective:value(父元素) 【案例女神向我走来】
4.transform之rotate3d
transform:rotate3d(x,y,z,角度)
此时x、y、z取值为0或1，0代表不旋转，1旋转
transform:rotateX(角度) transform:rotateY(角度) transform:rotateZ(角度)
备注：左手定律，大拇指指向轴的正方向，其他手指弯曲的方 向为旋转的正方向 【体操】
5.立方体 改变盒子变换的基准点
语法：perspective-origin ：（ ，）观察的基准点(角度deg)
属性值：第一个值为水平方向，正值为往右；第二值为垂直方向，正值为往下；
语法：transform-origin：（ ，）改变盒子变换的基准点
\
\
***
\
动画
1.自定义动画
（1）通过@keyframes指定动画序列；
（2）通过百分比将动画序列分割成多个节点；
（3）在各节点中分别定义各属性
（4）通过animation属性将动画应用于相应元素；
2.animation属性
(1)animation-name动画名字(必须)
(2)animation-duration动画播放时间（必须）
(3)animation-timing-function 动画播放的形式
属性值： linear线性 ease ease-in steps(n)
(4)animation-delay 动画播放的延迟
(5)animation-iteration-count 动画播放的次数
infinite无限次播放
(6)animation-direction 动画是否轮流反向播放
属性值:alternate交替播放 reverse反向播放
alternate-reverse 轮流反向
animation:1 2 3 4 5 6 ;（缩写）
补充：
(1)animation-play-state:paused; 暂停动画
(2)animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。
属性值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
***
\
### HTML特点
1.增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页[多媒体](http://baike.baidu.com/view/3323.htm)特性，三维、图形及特效特性，性能与集成特性，CSS3特性。
2.<header></header>
说明：定义文档的页眉，至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单、<nav>导航等。<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部，但它不局限于写在网页头部，也可以写在网页内容里面。
3.<nav></nav>
说明：作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分。在语义化方面更加精确，同时对于屏幕阅读器等设备支持更好。
4.<main></main>
说明：在一个文档中，不能出现一个以上的<main>元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
5.<article>
比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
\
