HTML教程（3）——常用标签（1）

一、图片标签

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>

效果：