html页面的整体结构代码,常规html页面结构(示例代码)

一、创建页眉

页眉包括网站标志、主导航和其他全站链接，甚至搜索框。也适合对页面深处的一组介绍性或导航性内容进行标记。

注意：role=“banner”(横幅)地标角色改善可访问性

二、标记导航  

• 无序链接列表

或

1. 有序链接列表

nav 标记文档中重要的链接群。

三、标记页面的主要区域

main元素包围着代表页面主题的内容，一个页面仅使用一次。

四、创建文章 段落、列表、音频、视频、图像、图形

article元素表示文档、页面、应用或网站的一个独立的容器。可以是一篇帖子、文章、评论或交互式的小部件或小工具。

五、定义区块段落、列表、音频、视频、图像、图形

section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容，通常包含一个标题。

注意：section可嵌套在article里，反之不行。

六、指定附注栏

使用aside的例子包括重要引述、侧栏、指向相关文章的一组链接、广告、nav元素组(友情链接)、相关产品列表等。

注意：对于与内容有关的图像(图表、图形或带有说明文字的插图)使用figure而非aside。

七、创建页脚

footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。页脚通常包含关于它所在区块的信息，如相关文档的链接、版权信息、作者或其他类似条目。

注意：只能对页面级的footer使用role="contentinfo",且一个页面只能使用一次。

八、创建通用容器

div是没有任何语义的通用容器。有了div就可以为其添加样式或javascript效果。

注意：div是块级内容的无语义容器。span是短语内容的无语义容器，可放在段落p元素内。

九、使用ARIA改善可访问性

WAI-ARIA:无障碍网页倡议-无障碍的富互联网应用。ARIA的地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定role属性就可以了。

十、为元素添加title属性

可以使用title属性为网站任何部分加上提示标签，在屏幕阅读器可以为用户朗读title文本，提升无障碍访问功能。