一、圖片標簽

1.場景：在網頁中顯示圖片

2.基本寫法：

<img src="">

3.特點：單標簽，img標簽需要展示對應的效果，需要借助其屬性進行設置

4常用屬性：

• src：其屬性值為目標圖片的路徑，圖片標簽中必須寫入該屬性并賦予其屬性值，才會有相應的效果；
• alt：其屬性值為替換文本，當圖片加載失敗時，才會顯示alt中的文本，反之則不會顯示；
• title：其屬性值為提示文本，當鼠標懸停時，才會顯示的文本；

二、音頻標簽和視頻標簽的介紹

1.場景：在頁面中插入視頻或音頻

2.基本寫法：

• 音頻：

  <audio src="" controls></audio>

• 視頻：

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

3.常見屬性：

• src：屬性值為視頻音頻的路徑（音頻標簽目前支持MP3、Wav、Ogg三種，視頻標簽目前支持MP4、WebM、Ogg三種格式）；
• controls：該屬性沒有屬性值，作用是顯示播放的插件；
• autoplay：，該屬性沒有屬性值，作用是自動播放（部分瀏覽器不支持）；
• loop：該屬性沒有屬性值，作用是自動播放；

三、超鏈接標簽

1.場景：需要從一個頁面跳轉到另一個頁面；

2.基本寫法：

<a href=""></a>

3.常見屬性：

• href：該屬性的屬性值是一個地址，也可以填一個”#“標識空鏈接；
• target：該屬性的作用是指定一個網頁的打開形式，其屬性值為”_self“（默認值）時，在當前窗口中跳轉；其屬性值為”_blank“時，在新窗口中跳轉，保留原網頁；

四、列表

1.無序列表

（1）場景：在網頁中表示一組無順序之分的列表；

（2）標簽組成：ul表示無序列表的整體，用于包裹li標簽；li表示無序列表的每一項，用于包裹每一行的內容；

（3）基本寫法：

<ul><li>內容1</li><li>內容2</li><li>內容3</li>
</ul>

效果：

• 內容1
• 內容2
• 內容3

（4）注意點：列表的每一項前默認顯示圓點標識。

2.有序列表

（1）場景：在網頁中表示一組有順序之分的列表；

（2）標簽組成：ol表示有序列的整體，用于包裹li標簽；li表示有序列表的每一項，用于包裹每一行的內容；

（3）基本寫法：

<ol><li>內容1</li><li>內容2</li><li>內容3</li>
</ol>

效果：

1. 內容1
2. 內容2
3. 內容3

3.自定義列表

（1）場景：在網頁的底部導航中通常會使用自定義列表實現

（2）標簽組成：dl表示自定義列表的整體，用于包裹dt/dd的標簽；dt表示自定義列表的主題；dd表示的自定義列表的針對主題的每一項內容；

（3）注意點：dd前會默認顯示縮進效果；dl標簽中只允許包含dt/dd的標簽；

（4）基本寫法：

<dl><dt>主題一</dt><dd>內容1</dd><dd>內容2</dd><dd>內容3</dd><dt>主題二</dt><dd>內容1</dd><dd>內容2</dd><dd>內容3</dd>
</dl>

效果：