HTML5 新增的主体结构元素
程序员文章站
2022-05-11 10:54:25
...
article 元素与 section 元素
<article>
<header>
<h1>主体结构元素</h1>
</header>
<section>
<h2>article 元素</h2>
<ul>
<li>article 元素代表文档、页面或应用程序中的独立的、完整的、可以独自被外部引用的内容。</li>
<li>article 元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。</li>
<li>article 元素也可以用来表示插件,它的作用是使插件看起来好像内嵌在页面中一样。</li>
</ul>
</section>
<section>
<h2>section 元素</h2>
<ul>
<li>section 元素用于对网站或应用程序中页面上的内容进行分块。</li>
<li>section 元素通常由内容及标题组成。</li>
<li>article 元素可以看成是一种特殊的section 元素,它比section 元素更强调独立性,而section 元素强调分段或分块。</li>
</ul>
<article>
<header>
<h3>关于section 元素的使用禁忌总结:</h3>
</header>
<ol>
<li>不要将section 元素用作设置样式的页面容器,这是div元素的工作。</li>
<li>如果article 元素、aside 元素或nav 元素更符合使用条件,不要使用section 元素元素。</li>
<li>不要为没有标题的内容区块使用section 元素。</li>
</ol>
</article>
</section>
<footer>
<em>除了内容部份,一个article 元素通常有它自己的标题(一般放在 header 元素里面),有时还有自己的脚注。</em>
</footer>
</article>
nav 元素
nav 元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。只需要将主要的、基本的链接组放进该元素即可。
nav 元素可以用应用的场合包括:传统导航、侧边栏导航、页内导航、翻页操作等。
注意: 在HTML5中不要使用 menu 元素代替 nav 元素。menu 元素是用在一系列发出命令的菜单上的,是一种交互性的元素。
aside 元素
aside 元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
aside 元素的主要用法:
- 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文档有关的参考资料、名词解释等。
- 在 article 元素之外使用,作为页面或站全局的附属信息部分。
time 元素
time 元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差,可以包括如下格式。
<time date="2010-11-13">2010年11月13日</time>
<time date="2010-11-13">11月13日</time>
<time date="2010-11-13">我的生日</time>
<time date="2010-11-13T20:00">我生日的晚上8点</time>
<time date="2010-11-13T20:00Z">我生日的晚上8点</time>
<time date="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>
说明: 日期与时间之间要用“T”字符隔开;以“Z”结尾的格式表示使用UTC标准时间编码;最后一种格式为添加时差。
time 元素的“pubdate”是一个可选的 boolean 型属性,可以用在article 元素中的 time元素上,表示具体发布日期。
上一篇: vue3开发学习笔记(持续补充中...)
下一篇: HTML5新增的非主体结构元素