Tech Docs Station

Appearance

链接与图片 ​

链接和图片是网页中最重要的两个元素，它们让网页变得互联互通、丰富多彩。

超链接 ​

超链接使用 <a> 标签创建，href 属性指定链接目标：

html
<a href="https://example.com">访问示例网站</a>

链接类型 ​

1. 绝对 URL ​

html
<a href="https://www.baidu.com">百度</a>
<a href="https://www.google.com/search?q=html">Google 搜索</a>

2. 相对 URL ​

html
<a href="page.html">同级页面</a>
<a href="./page.html">同级页面</a>
<a href="../index.html">上级目录页面</a>
<a href="/about/index.html">根目录开始</a>

3. 锚点链接 ​

跳转到页面内的指定位置：

html
<a href="#section1">跳转到章节1</a>
<a href="#top">回到顶部</a>

<h2 id="section1">章节1</h2>

4. 邮件链接 ​

html
<a href="mailto:example@email.com">发送邮件</a>
<a href="mailto:example@email.com?subject=咨询&body=您好">带主题和内容的邮件</a>

5. 电话链接 ​

html
<a href="tel:+8612345678900">拨打电话</a>

target 属性 ​

控制链接的打开方式：

html
<a href="https://example.com" target="_blank">新窗口打开</a>
<a href="https://example.com" target="_self">当前窗口打开（默认）</a>
<a href="https://example.com" target="_parent">父框架中打开</a>
<a href="https://example.com" target="_top">顶层窗口打开</a>

安全提示

使用 target="_blank" 时，建议添加 rel="noopener noreferrer" 以防止安全漏洞：

html
<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全的外部链接</a>

图片 ​

图片使用 <img> 标签插入，这是一个自闭合标签：

html
<img src="image.jpg" alt="图片描述">

必需属性 ​

属性说明
src图片路径（必需）
alt替代文本（必需，用于无障碍访问和图片无法显示时）

可选属性 ​

html
<img src="photo.jpg" alt="风景照片" width="300" height="200" title="点击查看大图">

图片路径 ​

相对路径 ​

html
<img src="images/photo.jpg">          <!-- 同级目录下的 images 文件夹 -->
<img src="./photo.jpg">               <!-- 当前目录 -->
<img src="../images/photo.jpg">       <!-- 上级目录 -->

绝对路径 ​

html
<img src="https://example.com/images/photo.jpg">
<img src="/assets/images/photo.jpg">  <!-- 网站根目录开始 -->

图片格式 ​

格式特点适用场景
JPEG/JPG有损压缩，文件小照片、复杂图像
PNG无损压缩，支持透明图标、Logo、截图
GIF支持动画动态图片
WebP压缩率高，支持透明现代浏览器通用
SVG矢量图形，可缩放图标、Logo、图表

图片尺寸 ​

html
<!-- 使用 HTML 属性 -->
<img src="photo.jpg" alt="照片" width="300" height="200">

<!-- 使用 CSS（推荐） -->
<img src="photo.jpg" alt="照片" style="width: 300px; height: auto;">

响应式图片 ​

html
<!-- 使用 CSS 实现响应式 -->
<img src="photo.jpg" alt="照片" style="max-width: 100%; height: auto;">

<!-- 使用 srcset 提供不同分辨率 -->
<img 
    src="small.jpg" 
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 480px, 800px"
    alt="响应式图片">

图片链接 ​

将图片包裹在链接中：

html
<a href="https://example.com">
    <img src="logo.png" alt="网站Logo">
</a>

图片地图 ​

创建可点击的图片区域：

html
<img src="map.jpg" alt="地图" usemap="#workmap">

<map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="区域1" href="area1.html">
    <area shape="circle" coords="337,300,44" alt="区域2" href="area2.html">
    <area shape="poly" coords="130,100,180,50,230,100" alt="区域3" href="area3.html">
</map>

figure 元素 ​

用于包装图片和说明文字：

html
<figure>
    <img src="sunset.jpg" alt="日落">
    <figcaption>美丽的日落风景</figcaption>
</figure>

实践示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>链接与图片示例</title>
</head>
<body>
    <article>
        <h1>我的相册</h1>
        
        <nav>
            <a href="#landscape">风景</a> |
            <a href="#portrait">人物</a> |
            <a href="#animal">动物</a>
        </nav>
        
        <h2 id="landscape">风景照片</h2>
        <figure>
            <img src="landscape.jpg" alt="山川风景" width="400">
            <figcaption>壮丽的山川风景</figcaption>
        </figure>
        
        <h2 id="portrait">人物照片</h2>
        <a href="portrait-detail.html">
            <img src="portrait.jpg" alt="人物照片" width="400">
        </a>
        
        <h2 id="animal">动物照片</h2>
        <figure>
            <img src="animal.jpg" alt="可爱的小猫" width="400">
            <figcaption>可爱的小猫</figcaption>
        </figure>
        
        <hr>
        
        <footer>
            <p>
                联系我们：
                <a href="mailto:contact@example.com">发送邮件</a> |
                <a href="tel:+8612345678900">拨打电话</a>
            </p>
            <p><a href="#top">回到顶部</a></p>
        </footer>
    </article>
</body>
</html>