HTML5 常用的結構化標簽整理


一、語義化結構化標簽

結構化標簽優點:

1、方便瀏覽器處理和識別,提升了網頁的質量和語義。

2、減少了大量無意義的div標簽,增強代碼的可讀性。

結構化標簽:(header,nav,body,article,section,aside,hgroup,figure,figcaption,footer)

<header>定義文檔的頁眉
<nav>定義導航鏈接的部分

<article>定義外部的內容,可以是一篇新的文章
<section>定義文檔的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分。

<aside>定義article以外的內容,aside的內容可用作文章的側邊欄

<figure>用於對元素進行組合,使用figcaption元素為元素組添加標題

<figcaption>定義figure元素的標題

<hgroup>用於對section或網頁的標題進行組合,使用figcaption元素為元素添加標題

<time>定義日期或時間,或者兩者。
<footer>定義section或文檔的頁腳

HTML5的文檔結構

1 <header>...</header>
2 <nav>...</nav>
3 <article>
4   <section> ... </section>
5 </article>
6 <aside>...</aside> 
7 <footer>...</footer>

HTML5的圖片結構

1 <figure id="fig2">
2   <legend>Figure 2. Install Mozilla XForms dialog</legend>
3   <img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
4 </figure>

  雖然這些標簽都有固定的用意,但具體情況還要具體分析。標簽的使用可以根據自己的需求做適當的調整!

二、格式化文本標簽

三、常用表格標簽

四、常用列表標簽

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM