HTML 不仅能够定义网页的单独部分(例如“段落”或“图片”),还可以使用块级元素 (例如“标题栏”、“导航菜单”、“主内容列”)来定义网站中的复合区域。
网页的外观多种多样,但是除了全屏视频或游戏,或艺术作品页面,或只是结构不当的页面以外,都倾向于使用类似的标准组件:
页眉 :通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息,通常存在于所有网页。
导航栏 :指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏,导航栏通常应在所有网页之间保持一致,否则会让用户感到疑惑,甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分,而不是独立的组件,但这并非绝对;还有人认为,两者独立可以提供更好的 无障碍访问特性,因为屏幕阅读器可以更清晰地分辨二者。
主内容 :中心的大部分区域是当前网页大多数的独有内容,例如视频、文章、地图、新闻等。这些内容是网站的一部分,且会因页面而异。
侧边栏 :一些外围信息、链接、引用、广告等。通常与主内容相关(例如一个新闻页面上,侧边栏 可能包含作者信息或相关文章链接),还可能存在其他的重复元素,如辅助导航系统。
页脚 :横跨页面底部的狭长区域。和标题一样,页脚是放置公共信息(比如版权声明或联系方式)的,一般使用较小字体,且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。
标签定义文档的主体。 标签包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。
HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧义地表示上文所讲的内容区段,屏幕阅读器等辅助技术可以识别这些元素,并帮助执行“找到主导航“或”找到主内容“等任务。
为了实现语义化标记,HTML 提供了明确这些区段的专用标签,例如::页眉。:导航栏。:主内容。主内容中还可以有各种子内容区段,可用、 和 等元素表示。
:侧边栏,经常嵌套在 中。:页脚。如下图所示:
1、
标签是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。标签通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图片、搜索表单或者其他相关内容。
< header>
< h1> 网页主题 h1>
header>
2、
标签用于定义导航链接,是html5新增的元素。该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。
标签通常可以用于传统导航条 、侧边栏导航、页内导航、翻页操作等情况。
< nav>
< ul>
< li> < a href = " #" > 首页 a> li>
< li> < a href = " #" > 公司概况 a> li>
< li> < a href = " #" > 产品展示 a> li>
< li> < a href = " #" > 联系我们 a> li>
ul>
nav>
3、
标签用于指定文档的主体内容。 标签中的内容在文档中是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注意在一个文档中, 元素是唯一的,所以不能出现一个以上的 元素。 元素不能是以下元素的后代:、
如下图所示,标签对应于布局中的主内容区。在标签下面可以有标签、
< main>
< article>
< header>
< h1> 标题 h1>
header>
< section>
< p> 文章内容 p>
section>
< footer>
文章分页列表
footer>
article>
main>
4、
标签代表文档、页面或者应用程序中与上下文不相关的独立部分,该元素经常被用于定义一篇日志、一条新闻或用户评论等。
标签通常使用多个
< article>
< header>
< h1> 第一章 h1>
header>
< section>
< header>
< h2> 第1节 h2>
header>
section>
< section>
< header>
< h2> 第2节 h2>
header>
section>
article>
5、
标签用来定义当前页面或者文章的复数信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
标签主要的用法分为两种: 1、被包含在标签内作为主要内容的附属信息。 2、在标签之外使用,作为页面或者站点全局的附属信息部分。最常用的形式是侧边栏,其中的内容可以使友情链接、广告单元等。
< article>
< header>
< h1> 标题 h1>
header>
< section> 文章主要内容 section>
< aside> 其他相关内容 aside>
article>
< aside> 右侧菜单 aside>
6、
标签用于对网站或应用程序中页面上的内容进行分块,一个
在使用标签时,需要注意一下三点: 1、不要将标签用作设置样式的页面容器,那是div的特性。 2、如果标签、
< article>
< header>
< h2> 小张的个人介绍 h2>
header>
< p> 小张是一个好学生,是一个帅哥。。。 p>
< section>
< h2> 评论 h2>
< article>
< h3> 评论者:A h3>
< p> 小张真的很帅 p>
article>
< article>
< h3> 评论者:B h3>
< p> 小张是一个好学生 p>
article>
section>
article>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
7、
标签用于定义一个页面或者区域的底部,它可以包含所有通常放在页面底部的内容。与
< article>
文章内容
< footer>
文章分页列表
footer>
article>
< footer>
页面底部
footer>