經過我的上一篇博客可以讓大家簡單地了解了一下 HTML5 的基礎標簽，現在再和大家分享一下 HTML5 的常用標簽吧

　　基礎標簽與常用標簽的主要區別在于：要先有基礎標簽的基礎才可以靈活的使用常用標簽。

常用標簽主要分為六種：

列表標簽

鏈接標簽

表格標簽

圖像標簽

音頻標簽

視頻標簽

?

一、列表標簽

　　（1） <ul> 標簽：定義無序列表；要使用樣式來定義列表類型。

　　（2） <ol> 標簽：定義有序列表；要使用 CSS 來定義列表的類型。

　　（3） <li> 標簽：定義列表項目，可用在無序列表（<ul>）和有序列表（<ol>）中；同時也是要使用 CSS 來定義列表和列表項目的類型。

例子：

<ul><li>廣東</li><li>廣西</li><li>江西</li> </ul> <ol><li>美食</li><li>風景</li><li>水果</li> </ol>

?

啟動瀏覽器后，運行效果如下：

　　（4） <dl> 標簽；定義列表（definition list）；用于結合 <dt> （定義列表中的項目）和? <dd>? （描述列表中的項目）。

　　（5） <dt> 標簽：定義列表中的項目（即術語部分）。

　　（6） <dd> 標簽：定義列表中定義條目的定義部分。

?

例子：

<dl><dt>美食</dt><dd>可以讓你的生活更有活力、更加美好...</dd><dt>風景</dt><dd>可以讓你感受它的美好、心靈得到洗禮...</dd> </dl>

啟動瀏覽器后，運行效果入下：

?

?

二、鏈接標簽

　　（1）<a> 標簽：

a、<a> 標簽定義超鏈接，用于從一張頁面鏈接接到另一張頁面。

b、<a> 元素最重要的屬性是? href?屬性，它指示鏈接的目標。

c、在所有的瀏覽器中，鏈接默認的外觀是：

　　未被訪問的鏈接帶有下劃線而且是藍色的；

　　已被訪問的鏈接帶有下劃線而且是紫色的；

　　活動鏈接帶有下劃線而且是紅色的；

d、可以使用 CSS 偽類向文本超鏈接添加復雜而多樣的樣式。

注意：

　　a、如果不使用 href 屬性，則不可以使用如下屬性：download，hreflang，media，rel，target 以及? type 屬性。

　　b、被鏈接頁面通常顯示在當前瀏覽器窗口中，除非您規定另一個目標（target?? 屬性）。

　　c、請使用 CSS 來設置鏈接樣式。　

?

例子：

跳轉到某個網頁：

這是一個<a href="link.html">連接的案例</a>

　　2.跳轉到頁面的某個地方

<a href="#jump-test">跳轉到本頁面的一個"連接點"</a><P> <a name="jump-test">下一個連接點</a>

　　3.跳轉到另一個頁面的另一個地方

<a href="link.html#jump-test">跳轉到另一個地方的某個地方</a>link.html 中要先有<a name="jump-test"...</a>標簽

　　4.通過圖片跳轉到另一個頁面

<a href="lastpage.htm"><img scr="圖片文件及其路徑"></a>

　　5.跳轉到音頻

<a href="音頻文件及其路徑">...</a>

　　6.跳轉到視頻

<a href="視頻文件及路徑">...</a>

　　7.跳轉到郵箱

<a href="mailto:username@cctv.com">發送郵件</a>

　　8.跳出框架

<a href="window.html" target="#">打開一個新窗口</a>

?

　　（2） <nav> 標簽：定義導航鏈接的部分；如果文章中有“前后”按鈕，則應該把它放到 <nav> 元素中。

<nav> <a href="index.htm">首頁</a> <a href="previous.htm">上一頁</a> <a href="next.htm">下一頁</a> </nav>

?

啟動瀏覽器后，運行效果如下：

?

三、表格標簽

　　（1） <table> 標簽：

a、<table> 標簽定義 HTML 表格。

b、<table> 內也分頭 <thead> 和主體 <tbody>。

c、簡單的 HTML 表格由 table 元素以及一個或多個 tr、th、td 元素組成。

d、tr? 元素定義表格行，th? 元素定義列頭，td? 元素定義表格單元。

可選屬性：

border：值（pixels）規定表格邊框的寬度。

width?：值（pixels、%）規定表格寬度。

height：值（pixels、%）規定單元格高度。

cellpadding：值（pixels、%）規定單元邊沿與其內容之間的空白。

cellspacing?：值（pixels、%）規定單元格之間的空白。

frame：值（void、above、below、hsides、lhs、rhs、vsides、box、border）規定外側邊框的哪個部分是可見的。

rules：值（none、groups、rows、cols、all）規定內側邊框的哪個部分是可見的。

?

　　（2） <caption> 標簽：定義表格標題，但必須直接放置到 <table> 標簽之后；

　　　　　　　　　　　　注意：每個表格最多能規定一個標題，通常標題會居中顯示在表格上方。

　　（3） <th> 標簽：定義表格內的表頭單元格。

　　HTML 表單中有兩種類型的單元格：

• 列頭單元格??—? 包含表頭信息（由 th 元素創建）
• 標準單元格??—??包含數據（由 td?元素創建）

　　th? 元素內部的文本通常會呈現為居中的粗體文本。

可選屬性：

abbr：值（text）規定單元格中內容的縮寫版本。

align：值（left、right、center、justify、char）規定單元格內容的水平對齊方式。

axis：值（category_name）對單元格進行分類。

char：值（character）規定根據哪個字符來進行內容的對齊?。

charoff：值（number）規定對齊字符的偏移量。

colspan：值（number）規定單元格可橫跨的列數。

headers：值（header_cells'_id）規定單元格相關的表頭。

rowspan：值（number）規定單元格可橫跨的行數。

scope：值（col、colgroup、row、rowgroup）定義表頭數據與單元格數據相關聯的方法。

valign：值（top、middle、bottom、baseline）規定單元格內容的垂直排列方式。

?

　　（4） <tr>標簽：定義 HTML 表格中的行，tr? 元素包含一個或多個 th 或 td 元素。

可選屬性：

align：值（right、left、center、justify、char）定義表格行的內容對齊方式。

char：值（character）規定根據哪個字符來進行文本對齊。

charoff：值（number）規定第一個對齊字符的偏移量。

valign：值（top、middle、bottom、baseline）規定表格行中的內容的垂直對齊方式。

?

　　（5） <td>標簽：定義 HTML 表格中的標準單元格；

　　　　　　　　　注意：在使用 colspan 和? rowspan? 屬性來實現內容橫跨多個行或列，<thead> 元素中不允許使用 <td> 元素。

　　HTML 表格有兩類單元格：

• 表頭單元 - 包含頭部信息（由 th 元素創建）
• 標準單元 - 包含數據（由 td 元素創建）

　　td 元素中的文本一般顯示為正常字體且左對齊。

可選屬性：

abbr：值（text）規定單元格中內容的縮寫版本。

align：值（left、right、center、justify、char）規定單元格內容的水平對齊方式。

axis：值（category_name）對單元格進行分類。

char：值（character）規定根據哪個字符來進行內容的對齊?。

charoff：值（number）規定對齊字符的偏移量。

colspan：值（number）規定單元格可橫跨的列數。

headers：值（header_cells'_id）規定單元格相關的表頭。

rowspan：值（number）規定單元格可橫跨的行數。

scope：值（col、colgroup、row、rowgroup）定義表頭數據與單元格數據相關聯的方法。

valign：值（top、middle、bottom、baseline）規定單元格內容的垂直排列方式。

?

例子：

<table border="1"><tr><th>地區</th><th>美食</th></tr><tr><td>廣東</td><td>原汁原昧蒸土雞 、荷包飯、姜奶、云吞面</td></tr></table>

啟動瀏覽器后，運行效果入下：

?

四、圖像標簽

　　（1） <img> 標簽：img? 元素向網頁中嵌入衣服圖像。

　注意：從技術上講，<img> 標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像的占位空間。

　　　　<img> 標簽有兩個必需的屬性： scr? 屬性? 和 alt 屬性。

可選屬性：

height：值（pixels、%）定義圖像的高度。

ismap：值（URL）將圖像定義為服務器端圖像映射。

longdesc：（URL）指向包含的圖像描述文檔的 URL。

usemap：值（URL）將圖像定義為客戶器端圖像映射。

width：值（pixels、%）設置圖像的寬度。

例子：

<img src="C:\Users\BIGBANG\Pictures\壁紙\GD.JPG" width="200" height="200"/>

啟動瀏覽器后，運行效果如下：

?

五、音頻標簽

　　<audio> 標簽：audio? 元素能夠播放聲音文件或者音頻流。

　　目前，<audio> 元素支持的3種文件格式：MP3、Wav、Ogg。

提示：可以在 <audio> 和 </audio> 之間放置文本內容，這些文本信息將會被顯示在那些不支持 <audio> 標簽的瀏覽器中

可選屬性：

autoplay：值（autoplay）如果出現該屬性，則音頻在就緒后馬上播放。

controls：值（controls）如果出現該屬性，則向用戶顯示音頻控件（比如播放/暫停按鈕）。

loop：值（loop）如果出現該屬性，則每當音頻結束時重新開始播放。

muted：值（muted）如果出現該屬性，則音頻輸出為靜音。

preload：值（auto、metadata、none）規定當網頁加載時，飲品是否默認被加載以及如何被加載。

scr：值（URL）規定音頻文件的 URL。

例子：

?

<audio src="E:\apache-tomcat-9.0.17\audio\sound.ogg" controls="controls"> 您的瀏覽器不支持 audio 標簽。 </audio>

啟動瀏覽器后，運行效果如下：

?

六、<video> 標簽

　　<video> 標簽：定義視頻，比如電影片段或其他視頻流。

　　目前，<video> 元素支持三種視頻格式：MP4、WebM、Ogg。

可選屬性：

autoplay：值（autoplay）如果出現該屬性，則音頻在就緒后馬上播放。

controls：值（controls）如果出現該屬性，則向用戶顯示音頻控件（比如播放/暫停按鈕）。

height：值（pixels）設置視頻播放器的高度。

loop：值（loop）如果出現該屬性，則每當音頻結束時重新開始播放。

muted：值（muted）如果出現該屬性，則音頻輸出為靜音。

poster：值（URL）規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。

preload：值（auto、metadata、none）規定當網頁加載時，飲品是否默認被加載以及如何被加載。

scr：值（URL）規定音頻文件的 URL。

width：值（pixels）設置視頻播放器的寬度。

例子：

?

<video src="E:\apache-tomcat-9.0.17\video\群主喝醉了.mp4" width="300" height="220" controls="controls"> 您的瀏覽器不支持 video 標簽。 </video>

啟動瀏覽器后，運行效果如下：

好了，就先分享到這了，希望對您會有所幫助哦。

?

轉載于:https://www.cnblogs.com/LHYXYM/p/10668161.html

總結

以上是生活随笔為你收集整理的HTML5 的知识分享（二）：HTML5 的常用标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。