1.Emmet语法

1.1快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如div然后tab 键，就可以生成<div></div>如果想要生成多个相同标签加上*可以了比如div*3 就可以快速生成3个div如果有父子级关系的标签,可以用>比如ul > li就可以了如果有兄弟关系的标签,用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo 或者#two tab 键就可以了如果生成的div类名是有顺序的，可以用自增符号$如果想要在生成的标签内部写内容可以用{}表示

1.2快速生成CSS样式语法

CSS基本采取简写形式即可.

比如w200按tab 可以生成width: 200px;比如Ih26px按tab 可以生成line-height: 26px;

2.HTML常用标签

2.1超链接标签（重点）

外部链接:例如< a href= "http:// www. baidu.com">百度</a >内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如< a href= *index.html">首页</a>.空链接:如果当时没有确定链接目标时，<a href= "#">首页</a>。下载链接: 如果href里面地址是一个文件或者压缩包，会下载这个文件。网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.锚点链接:点我们点击链接可以快速定位到页面中的某个位置. ●在链接文本的href属性中，设置属性值为#名字的形式,如<a href= "#two">第2集</a> ●找到目标位置标签,里面添加一-个id属性=刚才的名字, 如:<h3 id="two">第2集介绍</h3>

3.表格标签

3.1表格的基本语法

<table> <tr> <td>单元格内的文字</td> </tr> </table> <table> </table> 是用于定义表格的标签。<tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中。<td> </td> 用于定义表格中的单元格,必须嵌套在<tr> </tr>标签中。字母td指表格数据( table data) , 即数据单元格的内容。<th>标签表示HTML表格的表头部分(table head的缩写)

4.列表标签

5.表单标签

5.1表单域

5.2表单元素type属性

5.3表单元素其他属性

name和value是每个表单元素都有的属性值主要给后台人员使用.name表单元素的名字,要求单选按钮和复选框要有相同的name值.checked属性主要针对于单选按钮和复选框，主要作用一打开页面,就要可以默认选中某个表单元素.maxlength是用户可以在表单元素输入的最大字符数- -般较少使用.

5.4<label>标签

<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

<label for="sex">男</label> <input type="radio" name="sex" id="sex" />

核心: 标签的for属性应当与相关元素的id属性相同。

5.5<select>表单元素

<select> <option>选项1 </option> <option>选项2 </option> <option>选项3</option> </select> <select> 中至少包含一对<option> 。 2.在<option>中定义selected =”selected "时,当前项即为默认选中项。

6.字体复合属性（复合）

body { font: font-style font-weight font-size/line-height font-family; } 使用font属性时,必须按上面语法格式中的顺序书写，不能更换顺序,并且各个属性间以空格隔开不需要设置的属性可以省略(取默认值) , 但必须保留font-size和font-family属性,否则font属性将不起作用

7.CSS的复合选择器

7.1链接伪类选择器

为了确保生效,请按照LVHA的循顺序声明:link - :visited - :hover - :active.记忆法:lovehate或者Iv包包hao。因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

7.11：focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，-般情况表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

input: focus { background-color :yellew; }

8.css的背景

一般情况下元素背景颜色默认值是transparent (透明) ,我们也可以手动指定背景颜色为透明色。

background-color: transparent;

背景复合写法

background:背景颜色 背景图片地址 背景平铺 背景图片位置;

background: rgba(0, 0, 0, .4) url("images/arr.png") no-repeat center ;

9.盒子模型

9.1表格的细线边框

border-collapse:collapse; collapse单词是合并的意思border-collapse: collapse;表示相邻边框合并在一起

9.2内边距（padding）

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小,margin没有这特性

9.3外边距（margin）

margin 简写方式代表的意义跟 padding 完全一致。

9.3.1外边距合并

9.3.1.1相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

9.3.1.2嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。 （1）当父元素外边距大时

.fa { width: 500px; height: 500px; margin-top: 100px; background-color: black; } .ch { width: 200px; height: 200px; margin-top: 50px; background-color: blue; }

（2）当子元素外边距大时

.fa { width: 500px; height: 500px; margin-top: 50px; background-color: black; } .ch { width: 200px; height: 200px; margin-top: 100px; background-color: blue; }

实验结果相同，选外边距大的那个

9.4圆角边框

border-radius:length; 参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角

9.5盒子阴影

盒子阴影不占用空间,不会影响其他盒子排列。

10.浮动

10.1浮动特性

浮动元素会脱离标准流(脱标)浮动的元素会一-行内 显示并且元素顶部对齐浮动的元素会具有行内块元素的特性浮动的盒子不再保留原先的位置浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

10.2 清除浮动

10.2.1父级添加 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

10.2.2:after 伪元素法

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }

10.2.3双伪元素清除浮动

.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }

11.定位

11.1相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

选择器 { position: relative; }

相对定位的特点：（务必记住）

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

11.2绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

选择器 { position: absolute; }

绝对定位的特点：（务必记住）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。绝对定位不再占有原先的位置。（脱标）

11.3 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

选择器 { position: fixed; }

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系不随滚动条滚动。 固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

11.4定位叠放次序 z-index

选择器 { z-index: 1; } 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有 z-index 属性

11.5定位的拓展

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽`。块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

12元素的显示与隐藏

12.1display 属性

display 属性用于设置一个元素应如何显示。

display: none ；隐藏对象display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置

12.2visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

12.3overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。