HTML5新增文档结构元素
为了更好的表达HTML文档和语义,HTML5新增了许多用于表达文档结构方面的元素,用以取代HTML4中的DIV元素。HTML5提提供的文档结构元素主要有header、article、section、nav、aside和footer等元素。
- header元素
元素定义了页面或内容区域的头部信息,例如:放置页面的站点名称、logo和导航栏、搜索框等放置在页面头部的内容以及内容区域的标题、作者、发布日期等内容。
<header> 标记对之间可以包含h1-h6六个标题元素,以及p、span等元素...</header>
- article元素
用于表示页面中一块与上下文不相关的独立内容,比如一个帖子、一篇博客文章。
标记对之间可以包含header、footer、section以及嵌套的article等元素。
<article>
<header>
<h2>标题...</h2>
</header>
<p>段落...</p>
</article>
- section元素
用于对页面的某块内容进行分块,如将该快内容进一步分成章节的标题、内容和页脚等几部分。
标记对之间可以包含h1-h6六个标题元素、p元素、以及多个article元素以表示“分块”内容又包含多篇文章。此外,还可以嵌套section。
<article>
<header>
<h2>...</h2>
</header>
<section>
<h3>...</h3>
<p>对文章内容使用section进行分块,块内通常包含标题和内容</p>
</section>
<section>
<h3>...</h3>
<p>...</p>
</section>
</article>
- nav元素
用于定义页面上的各种导航条,一个页面可以拥有多个nav元素,作为整个页面或不同部分内容的导航。
<body>
<header>
<h1>美食DIY</h1>
</header>
<div>
nav定义页面的各种导航条
<nav>
<ul>
<li><a href="...">西瓜</a></li>
<li><a href="...">苹果</a></li>
<li><a href="...">车厘子</a></li>
</ul>
</nav>
</div>
<div>一个新的导航条
<nav>
</nav>
</div>
</body>
- aside元素、
用于定义当前页面或当前文章的辅助信息,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等内容,通常作为侧边栏内容。
<article>
<h2>侧边栏内容</h2>
<ul>
<li><a href="..."></a></li>
</ul>
</article>
- footer元素
用于为页面或某个文章定义脚注内容,包括文章的版权信息、作者联系方式等内容,一个页面也可以包含多个footer内容。
<footer>脚注内容
<ul>
<li>版权信息</li>
<li>联系方式</li>
</ul>
</footer>