网页里出现频率最高的两种内容，一是图片，二是链接。这篇把 <img>、<a> 的常用写法和最容易迷糊的路径问题一次说清。

img：把图片放进页面

<img src="images/cat.jpg" alt="一只橘猫趴在键盘上" width="400">

三个最常用的属性：

  • src：图片地址，必填
  • alt：图片加载失败或被读屏软件朗读时显示的替代文字，强烈建议写
  • width / height：宽高，一般只写一个，另一个按原始比例缩放

图片挂掉的时候 alt 就派上用场了：用户至少知道这个位置本来是什么，搜索引擎也靠它理解图片内容。

a：想去哪就 href 到哪

<a href="https://sherry.cool">雪梨代码库</a>   <!-- 外部网址 -->
<a href="about.html">关于本站</a>              <!-- 同站页面 -->
<a href="#intro">跳到本页开头</a>              <!-- 页内锚点 -->

想在新标签页打开，加 target="_blank"，顺手把 rel="noopener" 也带上：

<a href="https://example.com" target="_blank" rel="noopener">新窗口打开</a>

rel="noopener" 能防止新打开的页面反向操控原页面，属于习惯性的安全写法。

链接里也可以包图片，点击图片就跳转：

<a href="gallery.html"><img src="images/cat.jpg" alt="去看更多猫"></a>

相对路径与绝对路径

假设目录长这样：

site/
├── index.html
├── about.html
└── images/
    └── cat.jpg

在 index.html 里引用它们：

<img src="images/cat.jpg">    <!-- 当前目录下的子目录 -->
<a href="about.html">         <!-- 同级文件直接写文件名 -->
<img src="../logo.png">       <!-- ../ 表示回到上一级目录 -->

三条规则记住就够用：

  • 不以 / 开头的是相对路径，从当前文件所在目录出发
  • ../ 是上一级，./ 是当前目录（通常省略不写）
  • 以 / 开头的是站点根路径，本地直接双击 HTML 文件时经常失效，初学阶段统一用相对路径最省心

还有个隐蔽坑：路径大小写。Windows 本地不区分大小写，传到服务器就变 404，文件名统一用小写最稳。

图片格式怎么选

  • JPG：照片类，色彩丰富、体积小
  • PNG：需要透明背景的图和截图
  • SVG：矢量图标，放大不糊
  • WebP：新一代格式，同画质体积更小，现代浏览器都支持

另外别把几 MB 的大图塞进页面再靠 CSS 缩小显示，流量白白浪费，尽量用合适尺寸的图。

小结

  • <img> 必写 src 和 alt；<a> 靠 href 决定去向
  • 新标签打开用 target="_blank"，配上 rel="noopener"
  • 相对路径从当前文件出发，../ 回上一级；初学优先相对路径
  • 按用途选格式：照片 JPG、透明 PNG、图标 SVG