何雨果的知识库

Appearance

HTML 链接与图片 ​

BeginnerHTML Fundamentals

链接和图片是网页交互与展示的核心元素，也是理解 HTML 属性（Attributes） 机制的关键入口。

一、🏷️ HTML 属性（Attributes） ​

属性为 HTML 元素提供 附加信息，写在开放标签内：

html
<tagname attribute="value">内容</tagname>
         │         │
         属性名    属性值

属性分类 ​

类型说明示例
特有属性只属于特定元素<a> 的 href、<img> 的 src
全局属性所有元素都可使用draggable、id、class、lang

一个元素可以有多个属性，用空格分隔：

html
<a href="https://example.com" draggable="true">链接文本</a>

二、🔗 锚元素（Anchor Element） ​

锚元素 <a> 用于创建超链接，是 HTML 中"HyperText"的核心体现。

2.1 基本语法 ​

html
<a href="https://www.google.com">访问 Google</a>
组成说明
<a>锚元素标签
hrefHypertext Reference，指定链接目标 URL
标签间内容链接显示的文本（蓝色、带下划线）

2.2 没有 href 的锚元素 ​

如果 <a> 没有 href 属性，它会被渲染为普通文本，不是活动链接，点击无响应。

html
<!-- ❌ 没有 href：不会显示为链接 -->
<a>这不是一个链接</a>

<!-- ✅ 有 href：显示为蓝色可点击链接 -->
<a href="https://example.com">这是一个链接</a>

2.3 链接到本地页面 ​

使用相对路径链接到同一网站的其他页面：

html
<a href="./public/about.html">关于我</a>
<a href="./public/contact.html">联系方式</a>

2.4 图片链接 ​

将 <img> 嵌入 <a> 内，实现点击图片跳转：

html
<a href="./public/about.html">
  <img src="./assets/images/photo.png" alt="我的照片" />
</a>

三、🖼️ 图片元素（Image Element） ​

<img> 是 空元素（Void Element），没有闭合标签。

3.1 基本语法 ​

html
<img src="./images/photo.jpg" alt="照片描述" />
属性全称说明
srcSource必填，图片的 URL 或文件路径
altAlternative Text强烈推荐，图片的替代文本描述
height—可选，设置图片高度（像素），宽度自动等比缩放

3.2 图片来源 ​

图片 src 可以是本地相对路径或网络 URL：

html
<!-- 本地图片 -->
<img src="./images/cat.png" alt="猫咪" />

<!-- 网络图片 -->
<img src="https://picsum.photos/200" alt="随机图片" />

占位图片

picsum.photos 提供随机占位图片，URL 末尾的数字指定尺寸（像素）。类似于文本中的 Lorem Ipsum，适合设计阶段使用。

3.3 GIF 动图 ​

GIF 图片与 JPEG/PNG 使用方式完全相同，放入 src 后浏览器会自动播放动画。

3.4 href vs src 辨析 ​

初学者常混淆这两个属性：

属性全称所属元素用途
hrefHypertext Reference<a> 锚元素指定链接跳转目标
srcSource<img> 图片元素指定图片文件来源
html
<!-- ❌ 错误：img 不能用 href -->
<img href="photo.jpg" />

<!-- ❌ 错误：a 不能用 src -->
<a src="https://example.com">链接</a>

<!-- ✅ 正确 -->
<img src="photo.jpg" alt="照片" />
<a href="https://example.com">链接</a>

3.5 路径调试技巧 ​

当图片无法显示时（出现"破碎图标" 🖼️），通常是路径错误：

  • 使用 VS Code 自动补全：输入 src=" 后，VS Code 会弹出文件路径建议，利用下拉选择可以避免拼写错误
  • 检查建议列表：如果建议的文件不是你预期的，说明当前路径前缀（./ 或 ../）可能用错了
  • 检查大小写：文件名的大小写在某些系统上是敏感的（如 Linux 服务器），Cat.png 和 cat.png 是不同的文件

四、♿ Alt 文本与无障碍访问 ​

alt 属性是图片元素中最重要的无障碍特性。

4.1 为什么 alt 文本重要 ​

视障用户使用 屏幕阅读器 浏览网页。当遇到图片时，屏幕阅读器会朗读 alt 属性的内容，帮助用户理解图片内容。

html
<!-- 屏幕阅读器会朗读："海豚跃出海面 图片" -->
<img src="dolphin.jpg" alt="海豚跃出海面" />

4.2 alt 文本编写原则 ​

场景处理方式
有意义的图片简洁描述图片内容：alt="日落时分的森林"
装饰性图片留空但保留属性：alt=""
不要写"图片"或"照片"——屏幕阅读器会自动标注元素类型

五、📚 参考资源 ​

← 返回 Web 开发研究