前端面试基础-html篇之H5新特性

h5的新特性（目前个人所了解）如下

• 语义化标签
• 表单新特性
• 视频(video)和音频(audio)
• canvas画布
• svg绘图
• 地理定位
• 为鼠标提供的拖放API
• webworker
• （重点）Storage
• （重点）Websocket

HTML语义化是什么？

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

为什么要语义化？

• 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。

• 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

• 方便其他设备的解析

• 便于团队开发和维护

1、<section></section>

定义文档中的主体部分的节、段。

2、<article></article>

一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。。。

3、<aside></aside>

用来装载页面中非正文的内容，独立于其他模块。例如广告、成组的链接、侧边栏。。。

4、<header></header>

定义文档、页面的页眉。通常是一些引导和导航信息，不局限于整个页面头部，也可以用在内容里。

5、<footer></footer>

定义了文档、页面的页脚，和header类似。

6、<nav></nav>

定义了一个链接组组成的导航部分，其中的链接可以链接到其他网页或者当前页面的其他部分。

7、<hgroup></hgroup>

用于对网页或区段(section)的标题元素(h1~h6)进行组合。

8、<figure></figure>

用于对元素进行组合。

9、<figcaption></figcaption>

为figure元素加标题。一般放在figure第一个子元素或者最后一个。

10、<details></details>

定义元素的细节，用户可以点击查看或者隐藏。

11、<summary></summary>

和details连用，用来包含details的标题。

12、<canvas></canvas>

用来进行canvas绘图。

13、<video></video>

定义视频。

14、<audio></audio>

定义音频。

15、<embed></embed>

定义嵌入网页的内容。比如插件。

16、<source></source>

该标签为媒介元素(比如video、audio)定义媒介元素。

17、<datalist id='dl'></datalist>

定义可选数据的列表，与input配合使用(<input list='dl'>)可制作输入值的下拉列表。

18、<mark></mark>

在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。

19、<meter [min/max/low/high/optimum/value]></meter>

度量衡，用红黄绿表示出一个数值所在范围。

20、<output></output>

定义不同类型的输出，样式与span无异。

21、<progress></progress>

进度条，运行中的进度。

22、<time></time>

定义日期或者时间。

23、<keygen></keygen>

定义加密内容。

24、<command></command>

定义命令行为。