技术小天使做前端这么多年，回头看HTML里最基础的<img>和<a>两个标签，反而觉得它们是最值得反复打磨的起点。最近帮学生梳理Web前端技术第二次作业，主题恰好就是这两个标签的实验报告。原本以为只是随便写写用法，结果越深入越发现，里面藏着的门道比想象中多得多——从图片加载失败的兜底策略，到链接跳转的浏览器差异，再到本地文件与服务器环境的路径坑，几乎每一个点都能展开成一篇完整的排错记录。
这篇文章我会完整复盘这次实验的全过程，包括我为什么选择这两个标签作为实验对象、实验环境怎么搭、每个属性背后浏览器到底做了什么、以及我在实验过程中踩到的典型坑和对应的排查链路。无论你是刚接触HTML的新手，还是已经写了一阵子前端但没系统梳理过基础标签的开发者，这篇文章都能帮你把这两个最常用的标签彻底吃透。
1. 实验背景与目标设定
1.1 为什么偏偏是这两个标签
Web前端技术课程第二次作业选<img>和<a>作为实验对象，看起来朴素，但这两个标签几乎是整个互联网交互的基石。没有<a>标签，网页之间就无法串联成网；没有<img>标签，网页就只剩下干巴巴的文字，视觉表达和信息传递都会大打折扣。
在做实验设计的时候，我给自己定了几个目标：第一，弄清楚浏览器在解析这两个标签时，到底发出了哪些网络请求、遵循什么路径规则；第二，把常用属性的边界条件摸清楚——比如alt为空字符串和不写alt有什么区别、target="_blank"在什么情况下会失效；第三，通过刻意制造错误（比如让图片404、让链接指向不存在的锚点），观察浏览器的默认行为和可优化空间。
这个思路其实已经脱离"作业"本身了，更像是一次针对基础标签的深度剖面实验。
1.2 实验环境与准备工作
这次实验我用的是一台安装了Windows 11的普通笔记本，编辑器是VS Code，浏览器准备了三款——Chrome、Edge和Firefox，目的是观察不同浏览器对同一段标签代码的解析差异。这里有一个容易被忽略的细节：如果你直接用file://协议双击打开HTML文件，很多行为跟部署到服务器上是不一样的。为了模拟更真实的场景，我用VS Code的Live Server插件起了一个本地服务，通过http://127.0.0.1:5500访问实验页面。
提示：文件协议下浏览器对相对路径的解析逻辑和HTTP协议下基本一致，但涉及到缓存策略、跨域资源请求、以及某些浏览器对本地文件的限制时，表现会有差异。所以做标签实验建议也起一个本地服务器，别只开文件。
实验目录结构非常清晰：
text复制web-lab02/
├── index.html # 主页：a标签实验区
├── image.html # 图片标签实验区
├── assets/
│ ├── images/
│ │ ├── photo-1.jpg
│ │ ├── photo-2.png
│ │ └── broken.jpg # 这个文件故意改名制造404
│ └── pages/
│ ├── about.html
│ └── contact.html
└── css/
└── style.css
提前把目录规划好，后面做路径实验时才能区分清楚相对路径和绝对路径的行为差异。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. img标签实验：图片显示的完整机制拆解
2.1 从最简单的img标签说起
<img>标签的写法看着简单，<img src="photo-1.jpg" alt="示例图片">，但这一行代码背后浏览器的处理流程其实分好几步。实验时我打开了Chrome开发者工具的Network面板，重新加载页面，观察到一个关键现象：当HTML解析器遇到<img>标签时，会立即向服务器发起图片资源的请求，这个请求是并行发出的，不会阻塞后续HTML的解析。
这就是图片加载和脚本加载最大的区别。<script>标签默认会阻塞解析，而<img>不会，浏览器会一边继续解析后面的DOM，一边在后台下载图片。把这个请求时序图看清楚之后，你就能理解为什么页面底部放一个巨大的图片不会明显拖慢首屏文字出现的时间——文字先渲染，图片后填充，这是浏览器默认的异步加载机制。
src属性是图片标签的灵魂，它的值决定了浏览器去哪里取资源。我在实验中分别测试了三种路径写法：
html复制<!-- 相对路径：相对于当前HTML文件所在目录 -->
<img src="assets/images/photo-1.jpg">
<!--