詳解HTML5常用的語義化標簽

  發布時間:2019-09-27 16:01:01   作者:佚名   我要評論
這篇文章主要介紹了詳解HTML5常用的語義化標簽的相關資料,需要的朋友可以參考下

快速查詢

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>

article 定義文章

裝載顯示一個獨立的文章內容,論壇帖子、新聞、博客文章、用戶評論等,artilce可以嵌套,則內層的artilce對外層的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>

aside 定義文章的側欄

廣告,成組的內容,友情鏈接,側邊欄等

<aside>
     <h1> 側欄標題1</h1>
     <p>這是側欄內容1</p>
</aside>
<aside>
     <h1> 側欄標題2</h1>
     <p>這是側欄內容3</p>
</aside>

header 定義文檔的頁眉

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

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

footer 定義文檔或節的頁腳

在典型情況下,該元素會包含創作者的姓名、文檔的創作日期以及/或者聯系信息

<footer> 
  <p>© 2019 All Rights Reserved. </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常用的語義化標簽,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • HTML5新特性之語義化標簽

    HTML5 只有一個簡單的文檔類型:<!DOCTYPE html>,表示瀏覽器會按照標準模式解析。今天小編給大家帶來了HTML5新特性之語義化標簽,感興趣的朋友一起看看吧
    2017-10-31
  • HTML5新增語義化標簽解析及用法 中文PDF版

    本文檔主要講述的是HTML5新增語義化標簽解析及用法;HTML5標準添加的新元素當中,用于標識常見頁面結構的包括:section、header、footer、nav、article和mark等。有需要的
    2016-10-25
  • HTML5中語義化 b 和 i 標簽

    b 和 i 標簽在現在的 Web 標準潛規則中是不推薦使用,甚至是反對使用的,因為認為他們只是“表現”粗體和斜體,而沒有任何“語義”。更多的用 strong
    2008-10-17

最新評論

码报108