网页布局结构分析

H5新增的常用结构性元素

平阴网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

section	标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域
article	标签定义独立的内容标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分
nav	标签定义导航链接的部分并不是所有的 HTML 文档都要使用到元素。元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求
aside	标签定义标签外的内容。 aside 的内容应该与附近的内容相关例如侧边栏
hgroup	标签被用来对标题元素进行分组。当标题有多个层级（副标题）时，元素被用来对一系列 - 元素进行分组
footer	标签定义文档或者文档的一部分区域的页脚。元素应该包含它所包含的元素的信息。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个元素

header	标签定义文档或者文档的一部分区域的页眉。元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，您可以定义多个元素。注释：标签不能被放在、或者另一个元素内部
figure	标签规定独立的流内容（图像、图表、照片、代码等等）。元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响

H5新增的常用语义性元素

mark	标签定义带有记号的文本。请在需要突出显示文本时使用标签
progress	标签定义运行中的任务进度（进程）
time	标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果
details	标签规定了用户可见的或者隐藏的需求的补充细节。标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在标签里边。元素的内容对用户是不可见的，除非设置了 open 属性
datalist	标签规定了元素可能的选项列表。标签被用来在为元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用元素的 list 属性来绑定元素
ruby	标签定义 ruby 注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。将标签与和标签一起使用：元素由一个或多个需要解释/发音的字符和一个提供该信息的元素组成，还包括可选的元素，定义当浏览器不支持 "ruby" 元素时显示的内容

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

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

tip:目前主流浏览器并不支持

标签

command

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

当使用

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

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

布局结构样例

临摹样例：

网页布局结构分析

思路：

网页布局结构分析

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

Structure导航1导航2导航3导航4导航5Lasted News内容1内容2内容3About your site第一段内容第二段内容About your team哈哈哈哈WebSite template

文章标题：网页布局结构分析
文章转载：http://cxhlcq.com/article/ipgies.html

- 元素进行分组