二、多媒体标签¶
TIP： 深入浅出多媒体标签的定义和最佳实践
1、图片标签 img¶
TIP： 图片标签是实际开发中常用的标签，标准和规范也尤其重要
1.1、语法和基础¶
TIP： <img>标签用来在网页中插入图片
<img src="images/logo.png" />
-
img是英语单词 image（图片）的缩写 -
src是英语单词 source（来源）的缩写 -
""中是图片的存储目录和完整的文件名
注：
-
图片必须存放在项目文件夹中，如：
images中 -
图片只是引入到网页中，本质上没有被插入到网页中
1.2、img 标签的 alt 属性¶
TIP： alt 属性是英语 alternate（代替者）缩写
-
对图像的文本描述，不强制
-
若由于某种原因无法加载图像，浏览器会在页面上显示 alt 属性中的备用文本
-
供视力不方便的用户使用的网页朗读器，也会朗读 alt 中的文本
-
对于搜索引擎优化友好，告诉搜索引擎图片的含义，利于搜索引擎爬虫抓取
<img src="images/logo.png" alt="艾编程Logo" />
1.3、img 标签的 width、height 属性¶
-
width、height属性设置图片宽度和高度，单位是 PX（像素），可不写 -
如果省略其中一个属性，则表示按原始比例缩放图片
<img src="images/logo.png" alt="艾编程Logo" width="200" />
1.4、图片标签规范¶
TIP：
PC 端 img 图片必须填写
src、width、height、alt属性，统称图片标签的四要素移动端必须填写
alt属性
alt不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称
2、网页上支持的图片格式¶
| 支持格式 | 描述 |
|---|---|
.bmp |
Windows 画图软件默认保存的格式，位图 |
.jpeg（.jpg） |
有损压缩图片，通常用于照片显示 |
.png |
便携式网络图像，用于 logo，背景图形等。支持透明和半透明 |
.gif |
动画，如：表情包 |
.svg |
矢量图片 |
.webp |
最新的压缩算法，非常优秀的图片格式 |
3、相对路径和绝对路径¶
TIP： 深入相对路径和绝对路径本质
3.1、相对路径¶
从当前网页出发，要找到图片的路径就叫 相对路径
<img src="images/logo.png" />
<img src="../images/logo.png" />
<img src="../../images/logo.png" />
-
../表示回退上一级目录 -
./表示当前目录
![[Pasted image 20260127012354.png]]
3.2、绝对路径¶
描述文件或文件夹的精准完整地址
<img src="D:\web\icoding-web\images\logo.png" />
<img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" />
4、超级链接 - a 标签¶
4.1、语法和基础¶
超级链接是网页与网页之间链接跳转的方法
-
<a></a>标签是英语 anchor（锚）的首字母 -
href属性是英语 hypertext reference（超文本引用）缩写
<a href="https://www.baidu.com">百度一下，你就知道</a>
4.2、a 标签的 href 属性¶
TIP： href 属性支持相对路径和绝对路径
<a href="./index.html">进入首页</a>
<a href="../index.html">进入首页</a>
<a href="D:\web\icoding-web\index.html">进入首页</a>
<a href="https://www.icodingedu.com">艾编程</a>
4.3、a 标签的 title 属性¶
TIP： a 标签的 title 属性用于设置鼠标的悬停文本
<a href="https://www.baidu.com" title="点击，进入百度官网">百度一下，你就知道</a>
4.4、a 标签的 target 属性¶
| target 属性值 | 描述 |
|---|---|
_blank/ blank |
在新窗口中打开网页 |
_self |
默认，当前页面跳转 |
注： HTML4 中 blank 之前有个下划线 _blank都可使用
<h1>超级链接 - a标签</h1>
<a href="https://www.baidu.com">百度一下，你就知道</a>
<h2>a 标签的 target 属性</h2>
<a href="https://www.baidu.com" target="blank">_blank：新窗口打开</a><br /><br />
<a href="https://www.baidu.com" target="_self">_self：默认，当前页面跳转</a>
<!-- 给图片添加超级链接：点击图片标签跳转连接 -->
<a href="https://www.baidu.com" target="blank">
<img src="images/logo.png" />
</a>
4.5、页面锚点¶
TIP： 对于很长的页面，可以给对应的标签添加 id 属性，将它变成页面的"锚点"
-
当点击锚点链接时，浏览器地址栏就会出现
#id属性名称，页面就会自动滚动到锚点处 -
从其他页面点击带
#号的链接，就可以直接定位到锚点位置
<h1>页面锚点链接</h1>
<p>
<a href="#phone">小米手机</a>
<a href="#zn">智能穿戴</a>
<a href="#jd">家电</a>
<a href="#sh">生活电器</a>
<a href="#cf">厨房电器</a>
<a href="#jj">智能家居</a>
<a href="#cx">出行搭配</a>
<a href="#bh">日用百货</a>
</p>
<h2 id="phone">小米手机</h2>
<img src="images/1.webp" alt="" />
<h2 id="zn">智能穿戴</h2>
<img src="images/2.webp" alt="" />
<h2 id="jd">家电</h2>
<img src="images/3.webp" alt="" />
<h2 id="sh">生活电器</h2>
<img src="images/4.webp" alt="" />
<h2 id="cf">厨房电器</h2>
<img src="images/5.webp" alt="" />
<h2 id="jj">智能家居</h2>
<img src="images/6.webp" alt="" />
<h2 id="cx">出行搭配</h2>
<img src="images/7.webp" alt="" />
<h2 id="bh">日用百货</h2>
<img src="images/8.webp" alt="" />
<p>
<a href="#top">回到顶部</a>
</p>
![[Pasted image 20260127013010.png]]
注： 在 HTML5 中直接使用 #top即可回到顶部，不用定义 id="top"
<a href="#top">回到顶部</a>
5、特殊链接（下载、邮件、电话）¶
TIP： 深入浅出 a 标签实现文件下载、发送邮件、打电话
5.1、普通下载¶
TIP： 指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接
基本用法：
<h1>特殊链接</h1>
<h2>下载链接</h2>
<a href="doc/1.zip">web前端学习资料zip下载地址</a><br /><br />
<a href="doc/1.doc">学习资料doc文档</a>
![[Pasted image 20260127013053.png]] download 属性
-
作用： 点击链接时，浏览器会下载文件而非打开它
-
默认行为： 如果未指定 download 属性，浏览器会尝试在标签页中打开文件（如 PDF、图片）或导航到文件地址
-
自定义下载文件名： 可以通过 download 属性指定下载后的文件名，而非服务器上的原始文件名
注： 某些浏览器可能忽略自定义文件名（出于安全策略），文件名需包含扩展名（如 .pdf、.jpg）
<body>
<h1>特殊链接</h1>
<h2>普通下载</h2>
<a href="./internet.pdf">普通下载：互联网的基本原理学习笔记（PDF 格式）</a>
<h2>强制下载文件</h2>
<a href="./internet.pdf" download>强制下载：互联网的基本原理学习笔记（PDF 格式）</a>
<h2>强制下载文件 + 自定义文件名</h2>
<a href="./internet.pdf" download="认知互联网的基本原理">
强制下载文件 + 自定义文件名：互联网的基本原理学习笔记（PDF 格式）
</a>
</body>
![[Pasted image 20260127013125.png]]
5.2、邮件链接¶
TIP：
mailto:前缀的链接即邮件链接，系统将自动打开 email 相关软件
<a href="mailto:arry@icodingedu.com">给arry老师发邮件</a>
5.3、电话链接¶
TIP：
tel:前缀的链接即电话链接，系统将自动打开手机拨号键
<a href="tel:18966666666">给arry老师打电话</a>
6、a 标签的妙用和最佳实践¶
TIP： 在 HTML5 中，a 标签可以包裹块级元素，关于 a 标签的 SEO 优化最佳实践
6.1、a 标签包裹块级元素¶
<a href="...">
<div>
<h2>文章标题</h2>
<p>文章摘要...</p>
</div>
</a>
具体实践案例： 所有点击区块可以跳转的链接都是类似的用法 ![[Pasted image 20260127013225.png]]
6.2、rel 属性用法¶
TIP： rel 属性是 HTML 中
<a>、<link>、<area>等标签的一个重要属性
rel 属性通过描述链接的语义和上下文，帮助：
-
搜索引擎理解链接的性质，优化 SEO
-
浏览器增强安全性和性能（如防止钓鱼攻击、优化预加载）
-
开发者明确代码意图，提升可维护性
| 属性值 | 适用标签 | 用途说明 | 示例 |
|---|---|---|---|
nofollow |
<a> |
指示搜索引擎不要跟踪该链接，不传递权重。常用于用户生成内容或广告链接 | <a href="https://example.com" rel="nofollow">广告链接</a> |
noopener |
<a> |
防止新打开的页面通过 window.opener访问原页面的 window对象，增强安全性 |
<a href="https://example.com" target="_blank" rel="noopener">安全链接</a> |
noreferrer |
<a> |
类似于 noopener，但还会阻止浏览器发送 Referer 头信息，保护隐私 |
<a href="https://example.com" target="_blank" rel="noopener noreferrer">隐私保护链接</a> |
external |
<a> |
非标准但广泛使用的值，表示链接指向外部网站（无实际技术效果，仅用于标记） | <a href="https://external.com" rel="external">外部链接</a> |
ugc |
<a> |
表示链接来自用户生成内容（如论坛帖子），建议搜索引擎降低权重传递 | <a href="https://example.com" rel="ugc">用户评论链接</a> |
sponsored |
<a> |
标记赞助或付费链接，帮助搜索引擎识别广告内容 | <a href="https://example.com" rel="sponsored">赞助链接</a> |
注：
-
rel 属性的值是大小写不敏感的（如
nofollow和NOFOLLOW等效） -
某些值（如
ugc、sponsored）是较新的标准，可能不被所有工具完全支持，但主流搜索引擎（如 Google）已支持 -
合理使用 rel 属性，可以显著提升网页的安全性、SEO 表现和用户体验
6.3、最佳实践¶
TIP：
安全性： 使用
target="_blank"时，务必添加rel="noopener noreferrer"，防止window.opener攻击SEO 优化： 合理使用
nofollow、ugc和sponsored，避免传递权重给不希望优化的链接实践案例： 大厂网站（浏览器右键检查元素，搜索 rel 查看）、Vue 官网