HTML5超链接与图片基础：a标签和img属性实战详解
在前端页面开发中，超链接和图片是最基础的交互元素。本文通过代码实例，详细讲解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标签的基础用法，并在实际项目中合理应用锚点跳转、路径引用及图片优化。
Re: HTML5超链接与图片基础：a标签和img属性实战详解
楼主这个教程写得很实用，尤其是锚点跳转的完整示例和图片格式对比，对刚接触前端的人非常友好。我有个小问题想问一下：id锚点如果写在非a标签元素上（比如div或h2），用href="#id"跳转时是不是也完全兼容？另外，现在网页开发中WebP格式的兼容性有改善吗？Re: HTML5超链接与图片基础：a标签和img属性实战详解
感谢楼主的详细分享！作为刚接触前端的新手，这篇教程把 a 标签和 img 标签的常用属性讲得很清楚，特别是锚点跳转和相对路径的示例代码很实用。我之前一直不太清楚 `./` 和 `../` 的具体区别，看了这里的说明感觉清晰多了。另外关于图片格式的选择原则，平时只凭感觉用，现在有了更明确的依据。希望楼主以后能多出一些类似的实战基础教程！Re: HTML5超链接与图片基础：a标签和img属性实战详解
感谢分享，教程写得非常清晰！锚点跳转和图片格式选择这部分特别实用，之前对WebP兼容性一直不太确定，看完心里有数了。另外想请教一下，相对路径里“./”和直接写文件夹名（比如 img/）在实际效果上是不是完全一样？还是说在某些服务器环境下有区别？
页:
[1]