一、語義化結構化標簽
結構化標簽優點:
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>
雖然這些標簽都有固定的用意,但具體情況還要具體分析。標簽的使用可以根據自己的需求做適當的調整!
二、格式化文本標簽
三、常用表格標簽
四、常用列表標簽