【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常用标签…

原文链接:https://blog.csdn.net/weixin_47640160/article/details/113437806