H5新增元素和文档结构

1 新的文档结构

        H5新增多个结构化元素，以方便用户创建更友好的页面主体框架

1.1 article---文章块

        表示文章，用来表示页面中一块完整的、独立的、可以被转发的内容。例如：报纸文章、论坛帖子、用户评论、博客条目等。

提示：一些交互式小部件或小工具，或任何其他可独立的内容，原则上都可以作为article块，如日期选择器组件，但是这些内容不是article元素的主要目的，不要滥用。

        可以嵌套使用，原则上内层的内容要与外层的内容相关联。

1.2 section---区块

        用于表示文档中的节，在页面上多对内容进行区分。例如：章节、页眉、页脚或文档中得其他部分。

辨析：div元素也可以用来对页面进行分区，但section元素并非一个普通的容器，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。div元素关注解构的独立性，而section元素关注内容的独立性，section元素包含的内容可以单独存储到数据库中，或输出到word文档中。

        不要将section元素当做设置样式的结构容器，对于此类操作应该使用div元素实现。

        如果article、aside或nav元素更符合语义化使用条件，不要首选使用section元素

        不要为没有标题的内容区块使用section元素。

        article和section都是H5新增的元素，它们都用来区分不同内容，用法也相似，从语义化角度分析两者区分很大。

        article代表文档、页面或者应用程序中独立、完整的可以被外部引用的内容。因为article是一段独立的内容，所以通常包含 header 和 footer 结构。

        section用于对网站或者应用程序中页面上的内容进行分块。一个section通常由内容和标题组成。因此需要包含一个标题，一般不用包含header或者footer结构。

        通常使用section元素为那些有标题的内容进行分段，类似文章分段操作。相邻的section内容应当是相关的，而不像article之间各自独立。

1.3 nav---导航条

        用来标识页面导航的链接组。一个页面中可以拥有多个nav，作为页面整体或不同部分的导航。具体应用如下：主菜单导航、侧边栏导航、页内导航、翻页操作。并不是所有的链接组都要被放进nav中，只需要将主要的、基本的链接组放进nav元素即可。

        注意：不要用 menu 元素代替 nav 元素，menu主要用在一系列交互命令的菜单上，如快捷菜单。

1.4 aside---辅助栏

        用来标识所处内容之外的内容，aside内容应该与所处的附近内容相关。例如，当前页面或文章的附属信息部分，他可以包含与当前页面或主要内容相关的引用、侧边广告、导航条，以及其他类似的有别于主要内容的部分。

        aside元素主要有两种用法：

        （1）作为主题内容的附属信息部分，包含在article中，aside内容可以是与当前内容有关的参考资料、名词解释等。

        （2）作为页面或站点辅助功能部分，在article之外使用。最典型的形式是侧边栏，其中的内容可以是友情链接、最新文章列表、最新评论列表、历史存档、日历等。

1.5 main---主要区域

        用来标识网页中得主要内容，更有利于网页内容的语义分区，同时搜索引擎也能够主动抓取主要信息，避免被次要信息干扰。main内容对于文档来说应当是唯一的，它不应该包含在页面中重复出现的内容，如侧栏、导航栏、版权信息、站点标志或搜索表单等。总结，在一个页面中，不能出现一个以上的main元素。main元素不能被包含在article、aside、footer、header或nav中。

提示：由于main元素不对页面内容进行分区或分块，所以不会对网页大纲产生影响。

1.6 header---标题栏

        表示页眉，用来标识页面标题栏。header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或是一个内容块的标题。header也可以包含其他内容，如数据表格、表单或相关的LOGO信息，一般整个页面的标题应该放在页面的前面。

        在一个网页内可以多次使用header元素，header内部可以包含h1~h6元素，也可以包含hgroup、table、form、nav等元素，只要应该显示在头部区域的标签，都可以包含在header元素中。

1.7 hgroup---标题组（H5.1版本中废除！）

        表示标题分组，用来为标题或子标题进行分组。通常hgroup与h1~h6元素组合使用，一个内容块中得标题及其子标题可以通过hgroup组成一组，但是如果文章只有一个主标题，则不需要hgroup元素。

1.8 footer---页脚栏

        表示脚注，用来标识文档或节的页脚。内应当含有文档的作者、版权信息、使用条款链接、联系信息等。

2 新的语义信息

2.1 address---联系信息

        address元素用来在文档中定义联系信息，包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等。

2.2 time---显示时间

        定义公历的时间（24小时制）或日期，时间和地区偏移是可选的。

        该元素能够以机器可读的方式对日期和时间进行编码。例如：浏览器能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

        time元素定义了两个属性： 

        datetime：规定日期和时间的格式，否则由元素的内容给定日期和时间。

        pubdate：定义time元素中得日期和时间是文档或article内容的发布日期。可选的布尔值属性，可以用在article元素的time元素上，H5新标准不再支持该属性。

<time datetime="2017-11-13">2017年11月13日<time>
<time datetime="2017-11-13">11月13日<time>
<time datetime="2017-11-13">我的生日<time>
<time datetime="2017-11-13T20:00">我的生日的晚上8点<time>
<time datetime="2017-11-13T20:00Z">我的生日的晚上8点<time>
<time datetime="2017-11-13T20:00+09:00">我的生日的晚上8点的美国时间<time>

        浏览器通过datetime属性获取time的时间，而time开始标记和结束标记中间的部分是显示在网页上的。datetime属性中的日期与时间之间要用“T”（表示时间）文字分隔。"Z"表示给机器编码时使用UTC标准时间，"+09:00"是加上时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。 

2.3 figure和figcaption---流媒体

figure元素可以定义独立的流内容，如图像、图表、照片、代码等。figure元素的内容应该与主内容相关，但如果被删除，则不会对文档产生影响。

figcaption元素表示figure元素的标题，它从属于figure元素，必须在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

2.4 details和summary---详细内容（IE不支持）

        details元素用于描述文档或文档某个部分的细节，被details标识的内容可以展开或收缩显示。details可以包含文字、表单、插件或表格等任何超文本信息。

        details包含open属性，取值为布尔值，默认值为false，当该属性为true时，其包含的子元素应该展开显示，当该元素为false时，其包含的子元素应该收缩起来不显示。

        summary元素为details的子元素，可以为details定义标题（页面可见），用户单击标题时，会显示出details包含的信息。

        如果details元素内无summary元素，浏览器会提供默认文字和上下箭头以供单击。

        details元素状态切换时，触发toggle事件。

2.5 mark---记号文本

        用来定义带有记号的文本，表示页面中需要临时高亮提示的信息，对于当前浏览器者来说具有提示作用。例如：在网页中检索某个关键词时，显示匹配的检索结果。

<p>HTML5是构建开放Web平台的核心。<p>
<script>
var ps = document.getElementsByTagName('p');
Array.prototype.forEach.call(ps,function(p){
    p.innerHTML = p.innerHTML.replace(/HTML5/g,function(html){
        return "<mark>" + html + "</mark>"
    }
}
</script>

2.6 progress---进度条

        定义任务的进度或进程，这个进度可以是不确定的，表示进度正在进行，但不清楚还有多少进度没有完成，也可以用0到某个最大数字之间的数字来表示进度完成情况，不适合用来表示度量衡。属性如下：

        max：规定任务一共需要多少任务

        value：规定已经完成多少任务

2.7 meter---度量（IE不支持）

        定义已知范围或分数值内的标量测量，如：磁盘用度、查询结果的相关性等。不应用与指示进度。属性如下：

        form：规定meter元素所属的一个或多个表单

        high：规定被视作高得值的范围，如果小于low值，则使用low值，如果大于max值，则使用max值

        low：规定被视作低的值的范围，必须小于或等于high值，如果大于max值，如使用max值

        max：规定范围的最大值。默认为1，如果小于min属性值，则使用min值

        min：规定范围的最小值，默认为0，不能小于0

        optimum：规定度量的优化值，必须在min和max之间，可以大于high属性值

        value：必填，规定度量的当前值，默认为0，可以指定一个浮点小数值。

2.8 dialog---模态对话框

        定义对话框或窗口。默认隐藏，js使用showModal()方法修改open属性值为true显示dialog元素，close()方法修改open属性值为false隐藏dialog元素。使用dialog元素的returnValue属性为对话框设置或返回一个返回值。相关事件有对话框关闭事件onclose，用户在模态框窗口中按下esc事件oncancel。

2.9 bdi---隔离文本（目前只有Firefox和Chrome支持此标签）

        允许设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他无法完全控制的内容时可用。

2.10 wbr---换行断点

        定义在文本中何处需要换行，页面自动识别如果需要换行优先根据wbr标签换行

2.11 ruby、rt、rp---文本注释

        比如在汉字顶部添加拼音。需要与rt或rp元素配合使用。

        rt：定义字符的解释或发音

        rp：定义备用显示内容，即当浏览器不支持ruby元素时的显示内容

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离家老大回
</ruby>

2.12 command---菜单命令（仅IE9支持）

        可以定义命令的列表或菜单，如上下文菜单、工具栏，以及列出表单控件和命令。menu元素中可以包含command和menuitem元素，用于定义命令和项目

3 完善旧元素

3.1 a---超链接

        新增属性：

        download：下载的超链接目标（被单击后直接下载，而不是在新窗口显示），IE不支持

        media：设置被连接文档是被何种媒体/设备优化的

        type：设置被连接文档的MIME类型

3.2 ol---有序列表

        reversed属性：设置列表顺序为降序显示（IE不支持）

3.3 dl---定义列表

        H5重新定义了dl元素，允许dl列表包含多个带名字的列表项，每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，即不允许有重复的术语。

3.4 cite---引用文本

        表示引用参考，如书籍或杂志的标题。按照惯例，引用的文本斜体显示，一般把引用文本包裹在a元素中，方便用户快速跳转。

        隐藏功能：从文档中自动摘录参考书目。浏览器能够自动整理引用表格，并把它们作为脚注或独立的文档来显示。

        cite元素的语义已经超过了改变他所包含的文本外观的作用，它使浏览器能够以各种实用的方式来向用户表达文档的内容

3.5 iframe---浮动框架

        新增安全属性：

        sandbox：启用一系列对对iframe中内容的额外限制，取值：“”、allow-forms（允许表单提交）、allow-same-origin（允许同源访问）、allow-scripts（允许执行脚本）、allow-top-navigation（允许框架访问），可多值，空格分隔。

        seamless：定义iframe看上去是包含文档的一部分，取值为seamless（无缝嵌入）或不设置

        srcdoc：规定在iframe中显示的HTML内容，取值为 HTML代码

3.6 script---脚本

        async属性：规定异步执行脚本，仅适用于外部脚本，取值为async

4 H5新的全局属性

4.1 contentEditable---可编辑内容

        主要功能是允许用户在线编辑元素中的内容，取值为布尔值

注意：该属性有隐藏的inherit（继承）状态，如果没有指定值，由inherit状态决定。

        在编辑时，元素isContentEditable属性值为true，不编辑时为false，利用该属性可实现对编辑数据的后期操作

4.2 contextmenu---快捷菜单（仅Firefox支持）

        用于定义元素的上下文菜单（用户右击元素时出现的菜单）

4.3 data---自定义属性（IE不支持）

        data-*属性可以自定义用户数据，如用于储存页面或元素的私有数据，赋予所有HTML元素嵌入自定义属性的能力，通过元素的dataset.对象获取，复合属性名通过驼峰命名法访问

4.4 draggable---可拖动

        draggable属性：定义元素是否可以被拖动，取值true（可拖动）、false（不可拖动）、auto（使用浏览器的默认行为）

4.5 hidden---隐藏（IE不支持）

        取值为布尔值，设置元素的可见状态。防止用户查看元素，直到匹配某些条件，使用js删除该属性，加载出来。

4.6 spellcheck---语法检查

        对元素进行拼写和语法检查，可以对input元素非密码文本值、textarea元素文本、可编辑元素中的文本进行拼写检查。取值为布尔值，不可简写为属性无值。如果元素的readOnly或disable属性为true则不执行检查拼写