H5新增的常用结构性元素

section

标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域

article

标签定义独立的内容

标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分

nav

标签定义导航链接的部分

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求

aside

<aside> 标签定义 <article> 标签外的内容。

aside 的内容应该与附近的内容相关

例如侧边栏

hgroup

<hgroup> 标签被用来对标题元素进行分组。

当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列<h2>-<h7>元素进行分组

footer

<footer> 标签定义文档或者文档的一部分区域的页脚。

<footer> 元素应该包含它所包含的元素的信息。

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

在一个文档中，您可以定义多个 <footer> 元素

header

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 <header> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部

figure

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响

H5新增的常用语义性元素

mark

<mark> 标签定义带有记号的文本。

请在需要突出显示文本时使用 <mark> 标签

progress

<progress> 标签定义运行中的任务进度（进程）

time

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

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

details

<details> 标签规定了用户可见的或者隐藏的需求的补充细节。

<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

<details> 元素的内容对用户是不可见的，除非设置了 open 属性

datalist

<datalist> 标签规定了 <input> 元素可能的选项列表。

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

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素

ruby

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

将 <ruby> 标签与<rt>和<rp>标签一起使用：
<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容

menu

<menu> 标签定义了一个命令列表或菜单。

<menu> 标签通常用于文本菜单，工具条和命令列表选项

tip:目前主流浏览器并不支持 <menu> 标签

command

<command> 标签可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

当使用 <menu> 元素时，command 元素将作为菜单或者工具栏的一部分显示出来。但是，用 command 规定键盘快捷键时，command元素能被放置在页面的任何位置，但元素不可见

tip:主流浏览器都不支持 <command> 标签


布局结构样例

临摹样例：

思路：

样例代码，此代码不能真实运行，意在表达出页面结构

Structure导航1导航2导航3导航4导航5LastedNews内容1内容2内容3Aboutyoursite第一段内容第二段内容Aboutyourteam哈哈哈哈WebSitetemplate