跟永哥学HTML5(6)H5语义化标记使用示例

介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

跟永哥学HTML5(3):HTML5新增语义化元素的使用   对新增语义化元素已经做过讲解,本节将巩固H5语义化标记的使用

article

— 解释
article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

— 示列

<article>
   <h1>文章标题</h1>
   这是一篇文章
  <article>评论1...</article>
  <article>评论2...</article>
</article>

section

— 解释
section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

— 示列

<body>
  <section>
         <h1>章节一</h1>
         <p>详细内容...</p>
  </section>
   <section>
     <h1>章节二</h1>
     <p>详细内容...</p>
   </section>
</body>

aside

— 解释
aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

— 示列

<aside>
 热门文章
</aside>
<aside>
 广告
</aside>
<article>
 <h1>文章标题</h1>
 这是一篇文章
 <article>评论1...</article>
 <article>评论2...</article>
</article>

hgroup

— 解释
hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

— 示列

<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>
<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

header

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4893.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月11日 下午12:18
下一篇 2020年2月12日 上午9:04

99%的人还看了以下文章

发表回复

登录后才能评论