HTML5常用的语义化标签_亦心_前端开发者

快速查询

article | aside | nav | section | header | footer  
article | aside | nav | section | header | footer  

架构预览

nav 定义导航链接的部分

在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等

<nav>
    <ul>
       <li><a href=”#”>Home</a></li>
       <li><a href=”#”>css</a></li>
       <li><a href=”#”>Html5</a></li>
    </ul>
</nav>
<nav>
    <ul>
       <li><a href=”#”>Home</a></li>
       <li><a href=”#”>css</a></li>
       <li><a href=”#”>Html5</a></li>
    </ul>
</nav>

<nav><ul><li><a href=”#”></a></li><li><a href=”#”></a></li><li><a href=”#”></a></li></ul></nav>

article 定义文章  

装载显示一个独立的文章内容,论坛帖子、新闻、博客文章、用户评论等,artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

<article>
    <h1>标题</h1>
    <p> 内容</p>
    <article>用户评论</article>
    <article>回复评论</article>
</article>
<article>
    <h1>标题</h1>
    <p> 内容</p>
    <article>用户评论</article>
    <article>回复评论</article>
</article>

<article><h1></h1><p></p><article></article><article></article>

</article>

section 定义文档中的节

 章节、页眉、页脚或文档中的其他部分,

<section>
   <h1>标题1</h1>
   <p>内容1</p>
</section>
<section>
   <h1>标题2</h1>
   <p>内容2</p>
</section>
<section>
   <h1>标题1</h1>
   <p>内容1</p>
</section>
<section>
   <h1>标题2</h1>
   <p>内容2</p>
</section>

<section><h1></h1><p></p></section><section><h1></h1><p></p></section>

aside 定义文章的侧栏

广告,成组的内容,友情链接,侧边栏等

<aside>
     <h1> 侧栏标题1</h1>
     <p>这是侧栏内容1</p>
</aside>
<aside>
     <h1> 侧栏标题2</h1>
     <p>这是侧栏内容3</p>
</aside>
<aside>
     <h1> 侧栏标题1</h1>
     <p>这是侧栏内容1</p>
</aside>
<aside>
     <h1> 侧栏标题2</h1>
     <p>这是侧栏内容3</p>
</aside>

<aside><h1></h1><p></p></aside><aside><h1></h1><p></p></aside>

header 定义文档的页眉

通常是一些引导和导航信息

<header> 
     <p>logo</p> 
     <nav>
          <ul>
               <li>Home</li>
               <li>Html5</li>
          </ul>
     </nav> 
</header>
<header> 
     <p>logo</p> 
     <nav>
          <ul>
               <li>Home</li>
               <li>Html5</li>
          </ul>
     </nav> 
</header>

<header><p></p><nav><ul><li></li><li></li></ul></nav></header>

footer 定义文档或节的页脚

在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息

<footer> 
  <p>© 2019 All Rights Reserved. </p>
</footer>
<footer> 
  <p>© 2019 All Rights Reserved. </p>
</footer>

<footer><p></p></footer>

 

 

参考文献

1 html5 | http://caibaojian.com/html5
2 w3school | https://www.w3school.com.cn/
3 MDN | https://developer.mozilla.org/zh-CN/docs/web/html/

 

» 本文来自:前端开发者 » 《HTML5常用的语义化标签_亦心_前端开发者》
» 本文链接地址:https://www.rokub.com/73381.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!