语义化标签：
更利于搜索引擎的抓取（SEO的优化） 利于开发人员的维护(可维护性更高，因为结构清晰,seo易于阅读) 更有利于特殊终端的阅读(手机，个人助理等）
新增标签：
header : 头部信息 footer ：页脚 nav：导航链接的部分。 main: 主体。是唯一的，<main> 不能是<article>、<aside>、<footer>、<header> 或 <nav>元素的后代 section：独立的内容区块 aside：侧边栏导航 article：文章标签 hgroup： 标签用于对网页或区段（section）的标题进行组合 mark：标记，内容显示背景颜色，可以修改 address：地址标签 time： 表示日期或时间，也可以同时表示两者，相当于span dialog 标记定义一个对话框(会话框)类似微信 video：用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放 source：标记定义媒体资源 例: <video controls width="250"> <source src="/media/examples/flower.webm" type="video/webm"> <source src="/media/examples/flower.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video> audio：于在文档中表示音频内容<audio controls></audio> canvas：可被用来通过js脚本绘制图形 <canvas id="mycanvas"></canvas>兼容：
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->新增类型（type属性）
<input type=”search” />（后面有清除） <input type=”tel” />（移动端弹出软键盘） <input type=”url” />（提示输入正确网址） <input type=”email” />（邮箱格式） <input type=”number” max=“最大值” min=”最小值” step=”数字间隔”/> <input type=”range” max=“最大值” min=”最小值” step=”数字间隔”/> <input type=”color” />有关时间的：
<input type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31" /> <input type="month"/> <input type="week" /> <input type="time" /> <input type="datetime-local" />属性选择器介绍 （E代表标签元素名）
E[att] {} : 选择具有att属性的E元素。 E[att="val"] {} : 选择具有att属性且属性值等于val的E元素。 E[att~="val"] {}:用于选取属性值中包含指定词汇的元素。 E[att|="val"] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择 E[att*="val"] {}:选择具有att属性且属性值为包含val的字符串的E元素。 E[att^="val"] {}:选择具有att属性且属性值为以val开头的字符串的E元素 E[att$="val"] {}:选择具有att属性且属性值为以val结尾的字符串的E元素结构伪类选择器
p:first-line 用于为某个元素的第一行文字使用样式 :first-letter 用于为某个元素的第一个文字使用样式 :before 用于在某个元素之前插入一些内容 :after 用于在某个元素之后插入一些内容 :root 将样式绑定到页面的根元素中 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用的样式 :target 使用该选择器来对页面中的某个target元素（锚记链接）指定样式 :first-child 单独指定第一个子元素的样式 :last-child 单独指定最后一个子元素的样式 :nth-of-type(odd)奇数和:nth-of-type(even)偶数 选择奇偶行状态伪类选择器
E:hover 划过 E:active 点击 E:focus 激活 E:enabled、E:disabled E:read-only、E:read-write E:checked E::selection指定当元素处于选中状态时的样式层级选择器
li + li:相邻兄弟选择器，后边相邻的选择器会被选中，第一个li不会被选中 li ~ li:通用兄弟选择器，li后面的所有li元素被选中 ul > li:子选择器，ul后面直接的li元素被选中私有前缀针对浏览器显示差异
Gecko 前缀-moz- Presto 前缀-o- Trident 前缀-ms- Webkit 前缀-webkit-渐进增强和优雅降级
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。