Web前端开发笔记——第二章 HTML语言 第十一节 语义标签
目錄
- 一、語義標簽的定義
- 二、頭部標簽、底部標簽
- 三、導航欄標簽
- 四、內容欄標簽、區段標簽
- 五、其它內容標簽
- 六、< figure > 和 < figcaption >標
- 結語
一、語義標簽的定義
之前有闡述過Web語義化的知識：
這里還要了解Web語義化的知識，Web語義化指使頁面有更好的結構與含義，使開發者、計算機都能快速理解網頁的內容。
<em></em>標簽也叫強調標簽<strong></strong>也叫重點強調標簽來對文本進行標識，本質上看起來和i標簽b標簽和是一樣的，只不過em標簽和strong標簽是有語義的，它們更加明確，這就叫Web語義化，而i標簽和b標簽只是對文本進行斜體處理和粗體處理，它們無語義。
如Web語義化，語義元素標簽即為更明確、清楚的元素標簽，使開發者、瀏覽者更加理解其內容。
比如，下列是一個網站的基本的語義元素標簽的頁面，其中包括頭部標簽、底部標簽、內容欄標簽等等，這些都是一個個塊：
二、頭部標簽、底部標簽
通過<header></header>頭部標簽和<footer></footer>底部標簽，可定義網頁的頭部區域以及底部區域，頭部一般介紹網頁的信息區域或者展示區域，底部一般是該網頁的備案號、鏈接的條款、聯系方式等等。
三、導航欄標簽
通過<nav></nav>導航欄標簽，可以定義導航欄的內容。例如，下列html代碼中：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><header><h1>主頁</h1></header><nav><a href="#">數據庫</a><a href="#">HTML</a><a href="#">JavaScript</a><a href="#">計算機網絡</a></nav><footer><p>2000-2021</p></footer></body></html>運行結果如下：
四、內容欄標簽、區段標簽
通過<article></article>標簽來定義一個獨立的內容，且通過<section></section>標簽來定義一個個區段，它可以是不同的段落。
例如，下列html代碼中：
運行結果如下：
五、其它內容標簽
通過<aside></aside>標簽來定義除網頁的主要區域外的其它內容，例如廣告欄、側邊欄等等。
六、< figure > 和 < figcaption >標
<figure></figure> 和<figcaption></figcaption>標簽一般用于定義圖像內容，也是語義標簽， 且figcaption定義圖像的標題內容，它位于figure的最后。
例如，下列html代碼中：
運行結果如下：
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第十一节 语义标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第二章 HTML语
- 下一篇： Web前端开发笔记——第三章 CSS语言