web前端：main、header、footer、nav、article、section标签的用法

HTML5
添加了诸如main、header、footer、nav、article、section等大量新标签，这些新标签为开发人员提供更多的选择和辅助特性。

默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。

标签main
main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。

main标签的语义化特性可以使辅助技术快速定位到页面的主体。有些页面中有 “跳转到主要内容” 的链接，使用main标签可以使辅助设备自动获得这个功能。

<header><h1>Weapons of the Ninja</h1>
</header><main>//网页的主体内容
</main><footer></footer> //main标签应该在header标签与footer标签之间。

标签article
article是另一个具有语义化特性的 HTML5 新标签。article是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。

<h1>Deep Thoughts with Master Camper Cat</h1>
<main><article><h2>The Garfield Files: Lasagna as Training Fuel?</h2><p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p></article>
//用于呈现独立及完整的内容<img src="samuraiSwords.jpeg" alt=""><article><h2>Defeating your Foe: the Red Dot is Ours!</h2><p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p></article><img src="samuraiSwords.jpeg" alt=""><article><h2>Is Chuck Norris a Cat Person?</h2><p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p></article>
</main>

请注意section和div的区别：
section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。

<div> - 内容组
<section> - 有联系的内容组
<article> - 独立完整的内容

标签header
header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。

注意：
header用在 HTML 文档的body标签中。这点与包含页面标题、元信息的head标签不同。

<body><header><h1>Training with Camper Cat</h1></header>
//适用于那些在多个页面顶部重复出现的内容，导航或简介信息<main><section id="stealth"><h2>Stealth &amp; Agility Training</h2><article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article><article><h3>No training is NP-complete without parkour</h3></article></section><section id="combat"><h2>Combat Training</h2><article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article><article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article></section><section id="weapons"><h2>Weapons Training</h2><article><h3>Swords: the best tool to literally divide and conquer</h3></article><article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article></section></main>
</body>

标签nav
nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。

对于页面底部辅助性质的站点链接，不需要使用nav，用footer会更好。

<body><header><h1>Training with Camper Cat</h1><nav><ul><li><a href="#stealth">Stealth &amp; Agility</a></li><li><a href="#combat">Combat</a></li><li><a href="#weapons">Weapons</a></li></ul></nav>
//用于呈现页面中的主导航链接</header><main><section id="stealth"><h2>Stealth &amp; Agility Training</h2><article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article><article><h3>No training is NP-complete without parkour</h3></article></section><section id="combat"><h2>Combat Training</h2><article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article><article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article></section><section id="weapons"><h2>Weapons Training</h2><article><h3>Swords: the best tool to literally divide and conquer</h3></article><article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article></section></main>
</body>

标签footer
与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

<body><header><h1>Training</h1><nav><ul><li><a href="#stealth">Stealth &amp; Agility</a></li><li><a href="#combat">Combat</a></li><li><a href="#weapons">Weapons</a></li></ul></nav></header><main><section id="stealth"><h2>Stealth &amp; Agility Training</h2><article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article><article><h3>No training is NP-complete without parkour</h3></article></section><section id="combat"><h2>Combat Training</h2><article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article><article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article></section><section id="weapons"><h2>Weapons Training</h2><article><h3>Swords: the best tool to literally divide and conquer</h3></article><article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article></section></main><footer>&copy; 2016 Camper Cat</footer>//用于呈现版权信息或者相关文档链接</body>

web前端：main、header、footer、nav、article、section标签的用法相关推荐

html5 section标签,html5 section标签是什么意思？html5 section标签的用法总结
本篇文章主要的介绍了关于HTML5 section标签的定义以及它的用法,最后还有一个案例总结,现在让我们开始阅读这篇文章吧先来解释下html5 section标签的意思: html5 sectio ...
html5 footer header,html-5 --html5教程article、footer、header、nav、section使用
header header元素是一种具有引导和导航作用的辅助元素.通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格.搜索表单或 ...
HTML语义化标签一（header、nav、section、article）
一.header元素 <header> 标签支持 HTML 的全局属性和 HTML 的事件属性. <header> 标签表示介绍性的内容,可以让您了解页面涉及的内容,具有导航性 ...
web前端学习总结（概念和HTML标签）
文章目录前言一.基本概念二.HTML标签 1.内联元素 2. 块级元素 3.<div>和<span> 4.特殊符号 5.图像和多媒体 6.超链接 7.表格 8.表单总结 ...
小猿圈web前端讲解dl、dt、dd标签
于web前端工作者以及正在学习前端的同学来说dl.dt.dd标签一定不陌生的,今天小猿圈web前端讲师就给大家讲解一下dl.dt.dd标签用途等问题. dd.dt标签是是列表用的. 我们平时常用的是& ...
html section 布局,section标签的用法
标签的用法由于昨晚发了一篇文章 http://www.zcool.com.cn/article/ZMzA3MzI=.html ,有一个网友评论问的用法.所以现在举例来说明一下: html5引入了标 ...
【Web前端初学笔记】②HTML基本结构标签，VSCode工具创建页面，网页开发工具
文章目录一.HTML基本结构标签二.VSCode工具创建页面三.网页开发工具 1. 基本骨架 2. 文档类型声明标签 3. lang语言种类 4. 字符集 `Character set` 一.H ...
HTML基础——header, nav, footer, article, section, aside
文章目录 HTML基础--header, nav,footer, article,section, aside HTML5界面结构 <header> <footer> < ...
2021年web前端面试集锦
一. HTML.CSS相关 HTML5新特性.语义化语义化标签 : header nav main article section aside footer 语义化意味着顾名思义,HTML5的语义化 ...

web前端：main、header、footer、nav、article、section标签的用法

web前端：main、header、footer、nav、article、section标签的用法相关推荐

最新文章

热门文章