HTML5超链接与图片基础：a标签和img属性实战详解

脚本专家 · 发表于 4 小时前

在前端页面开发中，超链接和图片是最基础的交互元素。本文通过代码实例，详细讲解HTML5中a标签和img标签的常用属性，包括href、target、id锚点、相对路径以及图片格式选择原则，适合刚入门的前端开发者参考。

一、超链接标签常用属性

1. href与target控制链接跳转方向
使用a标签创建超链接时，href属性指定目标文档的URL，target属性决定打开方式。target可选值：
- _self：默认值，在当前窗口打开；
- _blank：在新窗口或新标签页打开。

示例：

<a href="http://www.example.com" target="_blank">打开新页面</a>

复制代码

2. id属性实现页面内锚点跳转
通过id属性为页面中的元素命名锚点，可以快速定位到文档内的指定位置，避免用户手动滚动页面。锚点本身在页面上不可见，语法如下：

<a id="section1">锚点文本</a>

复制代码

使用时，可在链接的href中通过#加上锚点名称跳转。例如：

<a href="#section1">跳转到第一节</a>

复制代码

完整示例代码（test.html）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点示例</title>
</head>
<body>
<p><font size="3" color="red">个人博客</font></p>
<a href="http://www.example.com" target="_blank">外部链接</a>
<hr />
<a href="#bottom">跳转到底部</a>
<a href="#C4">查看Chapter 4 满江红</a>
<hr />
<h2>Chapter 1 满江红</h2>
<p>怒发冲冠，凭栏处...（省略内容）</p>
<h2><a id="C4">Chapter 4 满江红</a></h2>
<p>内容略...</p>
<hr />
<a id="bottom" href="#">回到顶部</a>
</body>
</html>

复制代码

注意：锚点名称可自定义，也可使用name属性代替id属性，二者效果相同。

二、相对路径写法

当链接指向服务器内部的页面时，推荐使用相对路径。相对路径以.或..开头：
- ./ 表示当前文件所在目录；
- ../ 表示上一级目录。

例如，当前页面为test.html，若需要引用同目录下的img文件夹中的图片，路径可写为 ./img/photo.jpg。

三、图片标签img的核心属性

img标签用于向页面引入外部图片，它是一个自结束标签，属于替换元素（兼具块级与行内元素特点）。主要属性：
- src：指定图片路径，规则同超链接路径；
- alt：替代文本，当图片无法加载时显示，有利于SEO和辅助阅读；
- width / height：图片显示宽度和高度，单位像素。若只设置其中一个，另一个会等比例缩放。

示例：

<img src="./img/sunset.jpg" alt="日落景观" width="200">

复制代码

注意：一般不建议在HTML中修改图片尺寸，最佳实践是使用与显示尺寸一致的图片。但在移动端开发中常需对图片进行缩放（大图缩小）。

四、图片格式选择原则

不同图片格式各有特点，实际开发中应根据场景选用：
- JPEG（JPG）：色彩丰富，不支持透明和动画，适用于照片类图片；
- GIF：色数少，支持简单透明和动画，适用于图标或简单动画；
- PNG：色彩丰富，支持复杂透明，不支持动画，是网页设计常用格式，尤其适合需要透明底色的图片；
- WebP：谷歌推出的新一代格式，集成了JPEG、PNG、GIF的优点，文件体积更小，但兼容性有限。

选择原则：效果相同时选用体积小的格式；效果不同时优先保证显示效果。

通过以上示例，开发者可以快速掌握a标签和img标签的基础用法，并在实际项目中合理应用锚点跳转、路径引用及图片优化。

热心网友7 · 发表于 4 小时前

楼主这个教程写得很实用，尤其是锚点跳转的完整示例和图片格式对比，对刚接触前端的人非常友好。我有个小问题想问一下：id锚点如果写在非a标签元素上（比如div或h2），用href="#id"跳转时是不是也完全兼容？另外，现在网页开发中WebP格式的兼容性有改善吗？

HTML5超链接与图片基础：a标签和img属性实战详解

Re: HTML5超链接与图片基础：a标签和img属性实战详解

浏览过的版块

指导单位

旗下站点

联系我们