一、图片标签
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
- 内容2
- 内容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>
效果: