图像与链接
图像与链接是网页中最常用的两种元素，掌握其属性配置是前端基础技能。
图像标签
基础语法
HTML
<img src="图片路径" alt="替代文本">
核心属性
| 属性 | 必填 | 说明 |
|---|---|---|
src | 是 | 图片路径（相对/绝对/网络地址） |
alt | 推荐 | 替代文本，图片无法显示时展示 |
width | 否 | 宽度（像素或百分比） |
height | 否 | 高度（像素或百分比） |
title | 否 | 鼠标悬停提示文本 |
常用示例
HTML
<!-- 相对路径 -->
<img src="images/logo.png" alt="网站Logo">
<!-- 网络地址 -->
<img src="https://example.com/image.jpg" alt="示例图片">
<!-- 指定尺寸 -->
<img src="photo.jpg" alt="照片" width="300" height="200">
<!-- 响应式图片 -->
<img src="banner.jpg" alt="横幅" style="max-width:100%;">
链接标签
基础语法
HTML
<a href="目标地址">链接文本</a>
核心属性
| 属性 | 说明 |
|---|---|
href | 目标地址（URL / 锚点 / 协议链接） |
target | 打开方式：_self（默认）/ _blank（新窗口） |
title | 鼠标悬停提示文本 |
download | 下载链接，值为文件名 |
链接类型
HTML
<!-- 外部链接 -->
<a href="https://www.example.com" target="_blank">外部网站</a>
<!-- 页内锚点 -->
<a href="#section1">跳转到章节1</a>
<h2 id="section1">章节1</h2>
<!-- 邮件链接 -->
<a href="mailto:test@example.com">发送邮件</a>
<!-- 电话链接 -->
<a href="tel:13800138000">拨打电话</a>
<!-- 下载链接 -->
<a href="file.pdf" download="文档.pdf">下载文件</a>
图像链接
HTML
<a href="https://example.com" target="_blank">
<img src="logo.png" alt="点击访问">
</a>
要点总结
- alt必写：提升可访问性和SEO
- 路径正确：确保图片路径可访问
- target谨慎：外部链接建议
_blank - 尺寸控制：避免图片变形，保持比例
