超連結可以讓我們從一個頁面跳轉到其他頁面，或者是當前頁面的其他的位置

使用a標籤來定義超連結，href屬性指定跳轉的目標路徑，值可以是一個外部網站的地址，也可以寫一個內部頁面的地址

超連結是也是一個行內元素，在a標籤中可以巢狀除它自身外的任何元素

<ul>
<li><a href="https://www.baidu.com">Website</a></li>   
<li><a href="mailto:[email protected]">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>

內部地址

當我們需要跳轉一個伺服器內部的頁面時，一般我們都會使用相對路徑，會以./或../開頭

• ./ 表示當前檔案所在目錄，可以省略不寫
• ../表示當前檔案所在目錄的上一級目錄
• <a href="./test1.html">超連結1</a><br />

<a href="../test2.html">超連結2</a><br />

<a href="./test3/test3.html">超連結3</a><br />
<a href="../test4/test4.html">超連結4</a>

新建頁面

target屬性，用來指定超連結開啟的位置可選值：

• _self在當前頁面中開啟超連結，預設值
• _blank在新建頁面中開啟超連結

錨點跳轉

可以使用javascript:void(0);來作為href的屬性，此時點選這個超連結什麼也不會發生

可以將#作為超連結的路徑的佔位符使用。

可以直接將超連結的href屬性設定為#，這樣點選超連結以後頁面不會發生跳轉，而是轉到當前頁面的頂部的位置

可以跳轉到頁面的指定位置（錨點），只需將href屬性設定#目標元素的id屬性值（唯一不重複）

圖片

圖片標籤用於向當前頁面中引入一個外部圖片

img標籤是一個自結束標籤，這種元素屬於替換元素（塊和行內元素之間，具有兩種元素的特點）

屬性

• src：屬性指定的是外部圖片的路徑（路徑規則和超連結是一樣的）
• alt：圖片的描述，這個描述預設情況下不會顯示，有些瀏覽器會在圖片無法載入時顯示，搜尋引擎會根據 alt 中的內容來識別圖片
• width：圖片的寬度（單位是畫素）
• height ：圖片的高度（單位是畫素）
• 寬度和高度中如果只修改了一個，則另一個會等比例縮放

注意

• 一般情況在 pc 端，不建議修改圖片的大小，需要多大的圖片就裁多大
• 但是在移動端，經常需要對圖片進行縮放（大圖縮小）

音視訊

音訊

audio標籤用來向頁面中引入一個外部的音訊檔案

音視訊檔案引入時，預設情況下不允許使用者自己控制播放停止

屬性：

• controls是否允許使用者控制播放
• autoplay音訊檔案是否自動播放
  • 如果設定了autoplay，則音樂在開啟頁面時會自動播放
  • 但是目前來講大部分瀏覽器都不會自動對音樂進行播放
• loop音樂是否迴圈播放

source

除了通過src屬性來指定外部檔案的路徑以外，還可以通過<source>元素來指定檔案的路徑

embed

IE8 下不支援audio元素，但是可以使用 <embed> 元素在文件中的指定位置嵌入外部內容。

這個內容是由外部應用程式或其他互動內容的來源提供的，如瀏覽器外掛。

視訊

使用video標籤來向網頁中引入一個視訊，使用方式和audio基本上是一樣的