HTML5新语义化标签 ( 很重要的 )
新旧对比：
width height background -> css2.1
transform border-radius -> css3
div span h1 img -> html4.01
header footer main -> html5
注：很多新的HTML5语义化标签，跟div类似。
1.新语义化标签(都是双标签)
header : 页眉
footer : 页脚
main : 主体
*注：header footer main 语义化标签在一个页面中只能出现一次。*
hgroup : 标题组合
nav : 导航
article : 独立的内容
论坛帖子
报纸文章
博客条目
用户评论
aside : 辅助信息的内容
section : 区域 , 跟div的功能以及语义是一样的
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分
datalist : 选项列表（跟seclect下拉菜单用处相同）
涉及到的语法：list id value ...
<input type="text" list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="abcd"></option>
<option value="apple"></option>
<option value="around"></option>
</datalist>
details / summary : 文档细节 / 文档标题
相关语法：open属性
<details open>
<summary>HTML</summary>
<p>超文本标记语言</p>
</details>
progress / meter : 定义进度条 / 定义度量范围
<progress min="0" max="100" value="50"></progress>
<meter min="0" max="100" value="80" low="30" high="70"></meter>
time : 定义日期或时间
<p>今天是 <time>3月3日</time></p>
<p>今天是 <time title="2月14日">情人节</time></p>
mark : 带有记号的文本
2. 音频与视频标签(都是双标签)
audio ：音频
以下是可能需要添加的控件属性
controls : 显示控件
loop : 循环播放
autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题 )
muted : 静音
video : 视频
object-fit: cover; 可以让视频覆盖整个父容器。
注：音频和视频的默认控件是隐藏的。
注：如果想做出跟QQ音乐一样的效果：audio标签 + 隐藏控件（默认的，控件的样式用HTML+CSS模拟）+ JavaScript来实现交互功能。
注：在视频中，可以通过 autoplay + muted 可以在静音的情况下进行自动播放。
注：默认情况下，视频是不能进行拉伸的，必须成比例。
注：为了能够支持多个备选文件的兼容支持，可以配合source标签。
3. 新的表单控件？
<input type="email">，加在type中的属性控件
email : 电子邮件地址输入框
url : 网址输入框
number : 数值输入框
range : 滑动条
date / month / week : 日期控件
search : 搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
color : 颜色控件
tel : 电话号码输入框 ( 跟普通框的区别，在移动端，会调起带数字的软键盘 )
time : 时间控件
表单怎么把值传给后端的？
后端通过获取表单中的的name，就可以得到value值，这也叫做键值对；
相当于name是银行卡，value是钱，后端拿的是银行卡取得钱
后端根据 name 拿到 value
表单传输方式？
method : 数据传输方式
GET （ 默认的，获取的时候网址后面会带有你输入的东西 ）
POST （从网址上看不到你提交成功没）
传输类型?
enctype : 数据传输类型
application/x-www-form-urlencoded 默认传输的是文本
multipart/form-data 传输的是文件
表单的新属性？
autocomplete="off" 关闭表单的默认提示信息
autofocus : 自动获取焦点
required : 值不能为空
pattern : 正则验证 ( JS的内容了 )
4. 分栏布局？
column-count : 分栏的个数
column-width : 分栏的宽度
注：column-count column-width 不要一起去写。
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : num | all （合并分栏）
5. 伪类与伪元素？
#elem:after{}
#elem:hover{}
以上两种写法在旧版本中是对的规范的，但在新版本css3中第一个不规范。
在 CSS2.1的时候 : #elem:after{} √
在 CSS3的时候 : #elem:after{} × #elem::after{} √
#elem:hover{} √ #elem::hover{} ×
**写法区别**：
伪类： 单冒号 -> :hover :active :visited :link ...
伪元素： 双冒号 -> ::after ::before ...
**功能区别**：
伪类只会对操作的元素起作用，相当于样式添加到了元素身上
而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。
6. link标签的扩展学习？
<link rel="dns-prefetch" href="//static.360buyimg.com">
提前去进行域名的dns解析，这样在进入网址时就会加快速度
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
给网页头部添加小图标，格式固定的只能是.ico或.cur，跟制作鼠标小手文件类型一样。
7. 扩展meta标签？元信息（辅助信息）
<meta charset="UTF-8">
编码格式，必须要写
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这是用于移动端的可视窗口设置，可以加上属性user-scalable=no使用户在移动端不能进行缩放。
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
以上两个都是网页的描述信息，有助于搜索引擎搜索，即是搜索关键词。
<meta name="renderer" content="webkit">
用哪个引擎去渲染页面。有的浏览器可能有多个引擎，chrome : webkit blink ..
<meta http-equiv="X-UA-Compatible" content="ie=edge">
ie浏览器已什么方式渲染edge最新版进行渲染，ie9 ie10 -> edge
<meta http-equiv="refresh" content="3" url="">
每隔多长时间可以对浏览器进行刷新，3就是3秒刷新一次
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
在指定的时间内，请求资源会走缓存，提高进入网址的速度。
8. CSS Hack?
我们一直用的就是chrome浏览器，但是还有很多其他浏览器，当然这些浏览器都可以称为高级浏览器。
CSS Hack 解决那些古老的浏览器兼容性问题。
Hack分类
下载：下载ieTester工具 , 可以在服务器环境下进行测试新旧版本浏览器的测试。
1. CSS属性前缀法
_ + * \9 \0 ...
div {_background: red;}
div {_background: red \9;}等
2. 选择器前缀法（选择器前加*）
*html
3. IE条件注释法
<!--[if IE]>…<![endif]-->
IE6 BUG 非常多：
1. IE6高度的最小值是19px ,解决 overflow:hidden;
2. IE6双边距问题margin和float，解决 display:inline;
