HTML5常用標籤（2-4）連結標籤及多媒體標籤
摘要：
連結標籤
a
<a> 標籤用於定義超連結，超連結可以讓使用者從一個網頁跳轉到另一個網頁。
<a> 標籤最重要的屬性是 href 屬性，它指定了連結目標的 URL。
在瀏覽器中，通常超連結的預設外觀是：
注意
在 HTML ...
連結標籤
a
<a> 標籤用於定義超連結，超連結可以讓使用者從一個網頁跳轉到另一個網頁。
<a> 標籤最重要的屬性是 href 屬性，它指定了連結目標的 URL。
在瀏覽器中，通常超連結的預設外觀是：
注意
在 HTML 4.01 中， <a> 標籤可以是超連結或錨。在 HTML5 中， <a> 標籤始終是超連結，但是如果未設定 href 屬性，則只是超連結的佔位符。
HTML5 提供了一些新屬性，同時不再支援一些 HTML 4.01 屬性。
屬性
| 屬性 | 值 | 描述 |
| download | filename | 指定被下載的超連結目標。 |
| href | URL | 指定連結指向頁面的 URL。 |
| hreflang | language_code | 指定被連結文件的語言。 |
| media | media_query | 指定被連結文件是為何種媒介/裝置優化的。 |
| rel | text | 規定當前文件與被連結文件之間的關係。 |
| target | _blank、_parent、_self、_top、framename | 指定在何處開啟超連結。 _blank：在新視窗中開啟 _parent：在當前的父視窗中開啟，如果不存在父視窗，此選項的行為方式與 _self 等同 _self：當前視窗開啟（預設） _top：在整個視窗中開啟 framename：在指定的框架中開啟 |
| type | MIME type | 指定被連結文件的的 MIME 型別。 |
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一個標題</title> <body> <p> 非同步社群<a href="https://www.epubit.com/">傳送門</a></p> </body> </html>
非同步社群：傳送門
link
<link> 標籤用於指定外部資源。
link 元素最常見的用途是連結樣式表。
注意
link 元素定義了 6 個屬性，其中 rel 屬性是必選的，它說明了當前文件與被連結資源之間的關係。
屬性
| 屬性 | 值 | 描述 |
| href | URL | 指定被連結資源的 URL。 |
| hreflang | language_code | 指定被連結資源使用的語言。 |
| sizes | HeightxWidth | 指定圖示的大小（比如 sizes="16x16" ）。 |
| media | media_query | 指定被連結的資源將被顯示到什麼裝置上。 |
| rel | alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag | 指定當前文件與被連結資源之間的關係。 |
| type | MIME_type | 規定被連結文件的 MIME 型別。 |
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一個標題</title> <link rel="stylesheet" type="text/css" href="css/fishc.css" > </head> <body> <h1>我通過外部樣式表進行格式化。</h1> <p>我也一樣！</p> </body> </html>
放在同級目錄css檔案內的fishc.css:
body{
color: green;
}
我通過外部樣式表進行格式化。
我也一樣！
多媒體標籤
video
<video> 標籤定義視訊，比如電影片段或其他視訊流。
語法
vedio:autoplay|controls|height|loop|muted|poster|preload|src|width
屬性值
| 屬性 | 值 | 說明 |
| autoplay | autoplay | 如果出現該屬性，則視訊在就緒後馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示控制元件，比如播放按鈕。 |
| height | pixels | 設定視訊播放器的高度。 |
| loop | loop | 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。 |
| muted | muted | 如果出現該屬性，視訊的音訊輸出為靜音。 |
| poster | URL | 規定視訊正在下載時顯示的影象，直到使用者點選播放按鈕。 |
| preload | auto、metadata、none | 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。如果使用 “autoplay”，則忽略該屬性。 |
| src | URL | 要播放的視訊的 URL。 |
| width | pixels | 設定視訊播放器的寬度。 |
支援格式說明
目前， <video> 元素支援三種視訊格式：MP4、WebM、Ogg。
MP4 = MPEG 4檔案使用 H264 視訊編解碼器和AAC音訊編解碼器。
WebM = WebM 檔案使用 VP8 視訊編解碼器和 Vorbis 音訊編解碼器。
Ogg = Ogg 檔案使用 Theora 視訊編解碼器和 Vorbis音訊編解碼器。
瀏覽器支援表：
| 瀏覽器 | MP4 | WebM | Ogg |
| Internet | Explorer | YES | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES | YES | YES |
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一個標題</title> </head> <body> <video width="640" height="360" controls> <source src="隨便一個視訊地址或者自己伺服器上的視訊地址"type="video/mp4"> 您的瀏覽器不支援 HTML5 video 標籤。 </video> </body> </html>
audio
<audio> 標籤定義聲音，比如音樂或其他音訊流。
語法
audio:autoplay|controls|loop|muted|preload|src;
屬性值
| 屬性 | 值 | 說明 |
| autoplay | autoplay | 如果出現該屬性，則音訊在就緒後馬上播放。 |
| controls | controls | 如果出現該屬性，則向用戶顯示音訊控制元件（比如播放/暫停按鈕）。 |
| loopNew | loop | 如果出現該屬性，則每當音訊結束時重新開始播放。 |
| muted | muted | 如果出現該屬性，則音訊輸出為靜音。 |
| preload | auto、metadata、none | 規定當網頁載入時，音訊是否預設被載入以及如何被載入。 |
| srcNew | URL | 規定音訊檔案的 URL。 |
支援格式說明
目前， <audio> 標籤定義聲音，支援的3種檔案格式：MP3、Wav、Ogg。
瀏覽器支援表：
| 瀏覽器 | MP3 | Wav | Ogg |
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一個標題</title> </head> <body> <audio controls><source src="隨便一個音訊地址或者自己伺服器上的音訊地址" > 您的瀏覽器不支援 audio 元素。 </audio> </body> </html>