Web前端开发简明教程
首页 > Web前端开发简明教程 > 6.1 HTML 5结构化标签

6.1 HTML 5结构化标签

2020-10-12 17:35:23 35 0

编辑 收藏

6.1 HTML 5结构化标签

<section>标签定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分:

<section> <h1>WWF</h1> <p> The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. </p> </section>

section元素用于对网站或应用程序中页面上的内容进行分块,或者对文章进行分段;一个section元素通常由内容及其标题组成。<header>标签定义文档或者文档一部分区域的页眉:

<header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </head>

<footer>标签定义文档或者文档一部分区域的页脚,在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等:

<footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>

<article>标签定义独立的内容。<article>标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 可以描述论坛帖子、博客文章、新闻故事、评论等:

<article> <header> <h1>标题</h1> <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p> </header> <p>article的使用方法</p> <footer> <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p> </footer> </article>

article元素可以嵌套使用,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面:

<article> <header> <h1>article元素使用方法</h1> <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p> </header> <p>此标签里显示的是article整个文章的主要内容,下面的section元素里是对该文章 的评论</p> <section> <h2>评论</h2> <article> <header> <h3>发表者:maizi</h3> <p><time pubdate datetime="2016-6-14">1小时前</time></p> </header> <p>这篇文章很不错啊,顶一下!</p> </article> <article> <header> <h3>发表者:小妮</h3> <p>2016-6-14T:21-26:00"</p> </header> <p>这篇文章很不错啊,对article解释得很详细</p> </article> </section> </article>

与article相比,section元素强调分段或分块,section应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分;而article强调独立性,一般来说,article会有标题部分(通常包含在header内),有时也会包含footer。

TAGS:前端教程

取消回复欢迎 发表评论: