【6】HTML基础（3）——HTML常用标签②
【6】HTML基础（3）——HTML常用标签②
★文章内容学习来源：拉勾教育大前端就业集训营
接上篇…#目录
五、图像标签
六、音频和视频标签
七、超级链接
五、图像（image）
（一）语法：
1.
2.是单标签，本身相当于一个特殊的文本；
3.由于
（二）作用：
在HTML文件，常用的插入图片的类型有：jpg、png、gif。
（三）![]()
| 属性名 | 描述 |
|---|---|
| src | 表示图片的路径 |
| width | 表示图片的宽度 |
| height | 表示图片的高度 |
| border | 边框属性;它的值可以设置边框的厚度 |
| title | 设置提示文本 |
| alt | 设置图像没有找到时候的替换文本 |
示例 ：
<img src="C:\Users\86156\Desktop\damao.jpg"
width="500px" height="500px" border="2"
title="大脸猫" alt="这是一张大脸猫图片">
找的到图片时浏览器效果：
找不到图片时浏览器效果：
(四）src属性和路径详细介绍
如果需要插入一张图片到HTML中，src属性。
1.src：全称source资源，属性值是图片查找的路径。
2.路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
3.路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
相对路径：
相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。
①同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式； 
②子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭 符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
③上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法 利用…/表示跳出一级，如果跳出多级书写多次…/，直到找到文件。
绝对路径
绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。
①盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。
②网址形式：要查找的文件是来自网络资源，路径写法以http://开头。
★从盘符出发的绝对路径的缺点：
a.盘符出发的路径不可移植，不可移动;
b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
路径实际应用
a.建议多使用相对路径，可以适当使用网址形式的绝对路径;
b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。
(五）图像标签其他属性详细介绍
1.宽度和高度
width：图片的宽度；
height：图片的高度；
属性值：以px为单位的数值，或者省略px不写。
如果不设置两个属性，会以图片的原始尺寸加载。
如果设置属性：只设置了其中一个，另一个会等比例变换；
如果两个都设置，按照设置值加载。
参考（三）中示例
2.边框border
border：设置图片的边框。
属性值：数值，数值是几表示边框宽度为几像素。
★注意：border属性可以使用css进行设置，css中的边框有更多的设置效果。
参考（三）中示例
3.提示文本title
title：设置的是鼠标悬停时的提示文本。
属性值：自定义的提示文字内容。
参考（三）中示例
4.替换文本alt
alt：设置的是图片查找错误时，出现的替换文本。
如果能正常找到图片，替换文本是不显示的。
属性值：自定义的替换内容。
参考（三）中示例
（六）总结
src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。
其他属性可以根据需求进行设置。
六、音频和视频标签
（一）音频标签
1.语法
①使用标签进行定义；
② 是双标签；
③同图片一样，需要使用src属性设置音频查找的路径；
★音频文件支持的格式包括：.mp3、.ogg、.wav。
示例:
<audio src="audio.mp3"> audio>
2.常用属性
①音频控制条属性controls
音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。
示例:
<audio src="audio.mp3" controls="controls">
显示效果:
（二）视频标签
1.语法
视频的设置方法与音频非常类似。
①视频使用标签进行定义；
② 是双标签。
③ 使用src属性设置视频查找的路径。
视频文件支持的格式包括：.mp4、.ogg、.webm。
示例:
<video src="video.mp4">video>
2.常用属性
①视频控制条属性controls
视频也需要使用controls属性设置控制条，属性值也是controls。
示例:
<video src="video.mp4" controls="controls" >video>
七、超级链接标签
HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
（一）语法
1.在HTML中使用标签可以创建链接; a全称anchor，锚的意思;
2.为双标签;
（二）作用
1.在指定的位置添加超级链接，提供用户进行点击和跳转。
2.标签可以实现两种跳转：跨页面跳转、页面内跳转。
实现跳转的方式需要用到一些标签属性。
示例：
<a>链接内容a>
（三）常用属性
（四）锚点跳转
1.页面内锚点跳转
实现的是从某个位置跳转到同页面的另一个位置；
制作方法分为两个步骤：
（1）设置锚点：
设置跳转目标位置；
两种方法：
①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的；（相当于确目标的“身份证号”）
★ id的属性值自定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。
示例：
<h2 id="mubiao">目标位置h2>
②在目标位置添加一个空的标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。
示例：
<a name="mubiao">a>
（2）添加链接
链接到锚点，在需要点击的位置设置标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。
<a href="#mubiao">点击文本a>
2.跨页面锚点跳转
综合了跨页面跳转和锚点跳转
制作方法也分为两个步骤：
（1）设置锚点
方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name 属性
（2）链接到锚点
添加超级链接时href属性需要更改，属性值写为页面的路径#id 。
示例：
<a href="new.html#mubiao">点击文本a>
下篇继续HTML常用标签…