HTML5标签

1. datalist : 选项列表
   datalist 标签规定了 input 元素可能的选项列表。datalist 标签被用来在为 input 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

    <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属性
   progress / meter : 定义进度条 / 定义度量范围
   time : 定义日期或时间
   mark : 带有记号的文本

2.音频与视频
autio：音频 双标签
controls 显示控件
loop：循环播放
autoplay：自动播放（ 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题）
muted：静音
video：视频 双标签
object-fit:cover 可以让视频覆盖整个父容器
注：音频和视频的默认控件是隐藏的
如果想做出和QQ音乐一样的效果：audio标签+隐藏控件（默认的，控件的样式用过HTML+CSS）+Java Script来实现交互功能
在视频中，可以通过autoplay + muted可以在静音的情况下播放
为了能够支持多个备选文件的兼容支持，可以配合source标签

3.新的input控件
email：电子邮件地址输入框
url：网址输入框
number：数值输入框
range：滑动条
data / month / week：日期控件
search：搜索框（跟普通框多一个关闭按钮）
color：颜色控件
tel：电话号码输入框（ 跟普通框的区别，在移动端会调动手机的键盘）
time：时间控件
表单的新属性

4.分栏布局
column-count：分栏的个数
column-width：分栏的宽度
注：分栏的个数和宽度有冲突，不能同时写
column-gap：分栏的间距
column-rule：分栏的边线
column-span：合并分栏

5.伪类与伪元素
伪类：单冒号 -> :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">
给头标签页添加小图标