【6】HTML基础（3）——HTML常用标签②

接上篇…#目录

• 五、图像标签
• 六、音频和视频标签
• 七、超级链接

五、图像（image）

（一）语法：

• <img>标签进行定义；
• 是单标签，本身相当于一个特殊的文本；
• 由于<img>为单标签，所以它只能通过属性进行相关的图像设置。

（二）作用：

• <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属性。
• src：全称source资源，属性值是图片查找的路径。
• 路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
• 路径分为相对路径 和绝对路径 ，不同的方式出发点和参考位置不同。

1.相对路径：

• 相对路径查找文件时，需要从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" />

2.绝对路径

• 绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。
• ①盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到 目标文件。
  <img src="C:/Users/Documents/html/images/smile02.png" />
• ★从盘符出发的绝对路径的缺点：
  a.盘符出发的路径不可移植，不可移动;
  b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
• ②网址形式：要查找的文件是来自网络资源，路径写法以http://开头。
  <img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />

3.路径实际应用

• 建议多使用相对路径，可以适当使用网址形式的绝对路径;
• 使用相对路径必须将图片或文件与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 使用超级链接与网络上的另一个文档相连；
• 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

（一）语法

• 在HTML中使用<a>标签可以创建链接; a全称anchor，锚的意思;
• <a>为双标签;

（二）作用

• 在指定的位置添加超级链接，提供用户进行点击和跳转。
• <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常用标签…