HTML5新增元素

1.结构元素

• 背景：
  • 对于页面中较大块的结构（如导航、内容区、侧边栏、底部等），一般都是使用div元素来实现的，这样会导致可读性和可维护性变得非常差，这个时候就引入了结构元素

• header元素
  • 一般用于三个地方：页面头部、文章头部（artical元素）和区块头部（section）
  • 当用于页面头部时，hearder元素一般被用于包含网站名称、页面LOGO、顶部导航、介绍信息等
  • 当用于文章头部时，hearder元素一般被用于包含“文章标题”和“meta信息”等，所谓“meta信息”就是作者、点赞数、评论数等
  • 当用于区块头部时，hearder元素一般被用于区块标题内容
• nav元素（一般搭配无序列表来做导航栏）
  • 一般用于三个地方：顶部导航、侧栏导航和分页导航
  • 当用于顶部导航时，nav元素可以放在header元素内部，也可以放在外部，具体放在哪，看开发需求
• article元素
  • 一般只会用于一个地方：文章的内容部分，可以将article看成一个独立的部分，它内部可以包含标题以及其他部分
  • 注意：
    • 严格意义上来说，每个article元素内部都应该有一个header元素
• aside元素
  • aside元素一般用于表示跟周围区块相关的内容
  • 正确的使用aside元素，可以分为以下两种情况
    • 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关
    • 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，例如相关文章、相关链接等
• section元素
  • section元素一般用于某一个需要标题内容的区块，如果不需要标题，用div，需要标题就用section元素
  • 注意；
    • section元素内部必须要有一个header元素
• footer元素
  • 一般用于两种地方：一个是“页面底部”，一个是“文章底部”

2.表单元素

• 新增input元素类型（input元素的type属性新增了大量属性值）
• 注意：
  • 验证型的验证机制不是很完备，需要结合pattern属性来完整化

验证型
email	邮件类型
tel	电话号码（搭配pattern完善）
url	URL类型（搭配pattern完善）

取值型
range（min最小值、max最大值、step间隔数、value展现的值）	取数字（滑块方式）(搭配output标签展现输出值)
number（min最小值、max最大值、step间隔数、value展现的值）	取数字（微调方式）(搭配output标签展现输出值)
color	取颜色

取值型
data	取日期（如2018-11-11）
time	取时间
month	取月份
week	取周数

3.新增其他表单元素

• output元素
  • 我们可以用来定义表单元素的输出结果和计算结果
• datalist元素
  • 我们可以来为文本框提供一个可选的列表（搭配option，也就是子元素全是option标签）

<form action=""> <input type="text" list="content"> // 这里是需要被提供可选列表的文本框 list的值要和 datalist的id值相等，才能完成绑定 <datalist id="content"> <option value="http://www.baidu.com" label="百度"></option> // value、label都要填写东西，不然不会生效 <option value="http://zhihu.com" label="知乎"></option> </datalist> </form>

• keygen元素
  • 用于客户端保护的一种方法，但是兼容性极差，不用深入，了解下就行

4.其他新增元素

• address
  • 利用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）
  • 当address元素应用于整个页面时，一般放在底部footer元素内，表示该网站所有者的地址信息
• time
  • 定义一段有意义的时间就放在time里面
  • 语法：
    • datatime属性是给搜索引擎看的，所以一般不用写
• progress（重点关注）
  • 进度条
  • 注意：
    • max的值必须大于等于value的值
    • value属性表示当前值
  • 用途：
    • progress元素一般结合上传文件或下载文件操作来显示进度条，或者展示一个loading图标，以便增强用户体验
• meter（重点关注与progress的区别）
  • meter与progress是非常相似的，都是以进度条形式来显示数据比例（max、value）
  • 区别：
    • meter用于显示静态数据比例，所谓静态数据，就是很少改变的数据，例如，男生人数占全班的多少
    • progress用于显示动态数据比例，所谓动态数据，就是会不断改变的数据，例如，下载文件的进度
• figure和figcaption（figure默认有margin-left、right为40px，margin-top、bottom为16px）
  • figure元素用于包裹图片和图注
  • figcaption元素用于表示图片注释（figcaption是块元素）
• fieldset和legend
  • fieldset元素用来给表单元素进行分组（fieldset元素是块元素）
  • legend元素用于定义某一组表单的标题

5.改良后的元素（有以下四种）

• a新增属性
  • 当被设置download属性时并且download没给值时，点击可以下载图片
  • 当download属性被赋值时，下载之后会把图片名字改成赋的值

download	定义可被下载的目标（如文件、图片等）
media（用得少）	定义被链接文档为何种媒介或设备优化的
type（用得少）	定义被链接文档的MIME类型

• ol新增属性
  • reversed属性，用于设置列表顺序为降序显示（该属性用得很少，简单了解下）
• small元素（相比div、span更具有语义化）
  • small元素来表示“小字印刷体”的文字，一般用在网站底部的免责声明、版权声明等
• script元素（新增defer、async，重点理解）（面试题）
  • defer属性用于异步加载外部JS文件，当异步加载完成后，该外部JS文件不会立即执行，而是等到整个HTML文档加载完成之后才会执行
  • async属性用于异步加载外部JS文件，当异步加载完成后，该外部JS文件会立即执行，即使整个HTML文档还没加载完成
  • 总结：
    • 总的来说，defer属性相对async属性来说，更符合大多数开发场景对脚本加载执行的要求

6.引申问题

• 怎么使低版本的IE浏览器支持HTML5新元素？
  • html5shiv.js插件:
    • Remy开发的html5shiv.js能够在低版本的IE浏览器中创建main，header，footer等HTML5元素。也就是说使用javascript能创建这些本来不存在的HTML5新元素

<!--[if lt IE 9]>  // 引入
<script src="html5shiv.js"></script>
<![endif]-->

• • selectivizr.js插件:
    • 此插件提供了大量的低版本IE浏览器不支持的选择器和属性

<!--[if lte IE 8]><script src="selectivizr.js"></script><![endif]-->  // 引入