【6】HTML基礎（3）——HTML常用標簽②

★文章內容學習來源：拉勾教育大前端就業集訓營

接上篇…#目錄
五、影像標簽
六、音頻和視頻標簽
七、超級鏈接

五、影像（image）

（一）語法：

1.<img>標簽進行定義；
2.是單標簽，本身相當于一個特殊的文本；
3.由于<img>為單標簽，所以它只能通過屬性進行相關的影像設定，

（二）作用：

1. <img>標簽的作用是在指定的位置插入一張圖片；
   在HTML檔案，常用的插入圖片的型別有：jpg、png、gif，

（三）<img>常用屬性展示：

示例 ：

<img src="C:\Users\86156\Desktop\damao.jpg"  
width="500px" height="500px" border="2" 
title="大臉貓" alt="這是一張大臉貓圖片">

找的到圖片時瀏覽器效果：

找不到圖片時瀏覽器效果：

(四）src屬性和路徑詳細介紹

如果需要插入一張圖片到HTML中，<img>標簽必須設定src屬性，
1.src：全稱source資源，屬性值是圖片查找的路徑，
2.路徑：指的是尋找檔案時所歷經的線路，在HTML中有特殊的書寫語法，
3.路徑分為相對路徑和絕對路徑，不同的方式出發點和參考位置不同，

相對路徑：
相對路徑查找檔案時，需要從HTML檔案本身出發，根據相對的位置進行查找，包含三種方向，
①同級查找：指目標檔案與HTML檔案位于同一級，直接書寫檔案名+后綴格式； <img src="damao.jpg">
②子級查找：指目標檔案在與HTML檔案同一級的檔案夾的內部，需要先查找檔案夾名稱，然后通過關閉 符號/進入檔案夾查找里面的檔案；如果有多層檔案夾，需要/進入多層，
<img src="images/smile02.png">
<img src="images/tupian/smile03.jpg">
③上級查找：指目標檔案在HTML檔案所在檔案夾的更上一級，需要跳出當前檔案夾到上一層，路徑寫法 利用…/表示跳出一級，如果跳出多級書寫多次…/，直到找到檔案，
<img src="../../smile04.jpg" />
<img src="../images/smile01.jpg" />

絕對路徑
絕對路徑查找檔案時，不需要從HTML檔案出發，而是直接從電腦的盤符出發進行查找，或者使用網址形式查找，
①盤符出發：例如從c盤或者d盤出發查找圖片，書寫時以c:/開頭，后續類似子級查找寫法直至找到 目標檔案，
<img src="C:/Users/Documents/html/images/smile02.png" />
②網址形式：要查找的檔案是來自網路資源，路徑寫法以http://開頭，
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />

★從盤符出發的絕對路徑的缺點：
a.盤符出發的路徑不可移植，不可移動;
b.盤符出發的路徑容易出現中文字符，中文的路徑容易出現錯誤，

路徑實際應用
a.建議多使用相對路徑，可以適當使用網址形式的絕對路徑;
b.使用相對路徑必須將圖片或檔案與HTML同時上傳，而且需要保持相對位置不變，

(五）影像標簽其他屬性詳細介紹

1.寬度和高度
width：圖片的寬度；
height：圖片的高度；
屬性值：以px為單位的數值，或者省略px不寫，
如果不設定兩個屬性，會以圖片的原始尺寸加載，
如果設定屬性：只設定了其中一個，另一個會等比例變換；
如果兩個都設定，按照設定值加載，
參考（三）中示例

2.邊框border
border：設定圖片的邊框，
屬性值：數值，數值是幾表示邊框寬度為幾像素，
★注意：border屬性可以使用css進行設定，css中的邊框有更多的設定效果，
參考（三）中示例

3.提示文本title
title：設定的是滑鼠懸停時的提示文本，
屬性值：自定義的提示文字內容，
參考（三）中示例

4.替換文本alt
alt：設定的是圖片查找錯誤時，出現的替換文本，
如果能正常找到圖片，替換文本是不顯示的，
屬性值：自定義的替換內容，
參考（三）中示例

（六）總結

<img>標簽最為重要的屬性為src，盡量使用alt屬性對圖片進行說明，添加相對關鍵詞可以有利于SEO搜索引擎優化，
其他屬性可以根據需求進行設定，

六、音頻和視頻標簽

（一）音頻標簽

1.語法

①使用<audio>標簽進行定義；
② <audio>是雙標簽；
③同圖片一樣，需要使用src屬性設定音頻查找的路徑；
★音頻檔案支持的格式包括：.mp3、.ogg、.wav，
示例:

<audio src="audio.mp3"> </audio>

2.常用屬性

①音頻控制條屬性controls
音頻加載后不會自動顯示播放器的控制條，需要使用controls屬性進行設定，屬性值也是 controls，
示例:

 <audio src="audio.mp3" controls="controls">

顯示效果:

（二）視頻標簽

1.語法

視頻的設定方法與音頻非常類似，
①視頻使用<video>標簽進行定義；
② <video>是雙標簽，
③ 使用src屬性設定視頻查找的路徑，
視頻檔案支持的格式包括：.mp4、.ogg、.webm，
示例:

 <video src="video.mp4"></video>

2.常用屬性

①視頻控制條屬性controls
視頻也需要使用controls屬性設定控制條，屬性值也是controls，
示例:

 <video src="video.mp4" controls="controls" ></video>

七、超級鏈接標簽

HTML 使用超級鏈接與網路上的另一個檔案相連，
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅影像，可以點擊這些內容來跳轉到新的檔案或者當前檔案中的某個部分，

（一）語法

1.在HTML中使用<a>標簽可以創建鏈接; a全稱anchor，錨的意思;
2.<a>為雙標簽;

（二）作用

1.在指定的位置添加超級鏈接，提供用戶進行點擊和跳轉，
2.<a>標簽可以實作兩種跳轉：跨頁面跳轉、頁面內跳轉，
實作跳轉的方式需要用到一些標簽屬性，
示例：

<a>鏈接內容</a>

（三）常用屬性

（四）錨點跳轉

1.頁面內錨點跳轉

實作的是從某個位置跳轉到同頁面的另一個位置；
制作方法分為兩個步驟：

（1）設定錨點：

設定跳轉目標位置；
兩種方法：
①在目標位置找到任意一個標簽，給它添加id屬性，id的屬性值必須是唯一的；（相當于確目標的“身份證號”）
★ id的屬性值自定義規則：必須以字母開頭，后面可以有字母、數字、下劃線和橫線，區分大小寫，
示例：

<h2 id="mubiao">目標位置</h2>

②在目標位置添加一個空的<a>標簽，只設定一個name屬性，name屬性值設定方式與id相同，也必須是唯一的，
示例：

<a name="mubiao"></a>

（2）添加鏈接

鏈接到錨點，在需要點擊的位置設定<a>標簽，給a的href屬性設定屬性值為#id屬性值或者#加a的name屬性值，

<a href="#mubiao">點擊文本</a>

2.跨頁面錨點跳轉

綜合了跨頁面跳轉和錨點跳轉
制作方法也分為兩個步驟：

（1）設定錨點

方式與頁面內錨點跳轉一致，在目標網頁的指定位置設定使用id或name 屬性

（2）鏈接到錨點

添加超級鏈接時href屬性需要更改，屬性值寫為頁面的路徑#id ，
示例：

<a href="new.html#mubiao">點擊文本</a>

下篇繼續HTML常用標簽…