HTML5超链接与图片基础用法详解
我将创建一个完整、交互式的教程页面，详细讲解HTML5中超链接和图片的基础用法。这个页面将包含示例代码、可视化演示和交互练习。
设计思路
- 左侧：导航目录，快速跳转到不同章节
- 主内容区：详细讲解每个概念
- 右侧：实时代码编辑器和结果预览
- 底部：交互式练习区域
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5超链接和图片基础用法详解</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
display: grid;
grid-template-columns: 250px 1fr 350px;
gap: 20px;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
grid-column: 1 / -1;
background: linear-gradient(135deg, #4a6fa5 0%, #2c3e50 100%);
color: white;
padding: 30px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 15px;
}
header h1 i {
color: #f1c40f;
}
.tagline {
font-size: 1.1rem;
opacity: 0.9;
max-width: 800px;
}
/* 左侧导航 */
.sidebar {
background-color: white;
border-radius: 12px;
padding: 25px 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
position: sticky;
top: 20px;
height: fit-content;
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.sidebar h2 {
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
}
.nav-list {
list-style: none;
}
.nav-item {
margin-bottom: 8px;
}
.nav-link {
display: block;
padding: 12px 15px;
background-color: #f8f9fa;
border-radius: 8px;
color: #4a6fa5;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.nav-link:hover, .nav-link.active {
background-color: #e9f2ff;
border-left-color: #4a6fa5;
color: #2c3e50;
transform: translateX(5px);
}
/* 主内容区 */
.main-content {
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.section {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.section:last-child {
border-bottom: none;
}
.section h2 {
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
font-size: 1.8rem;
}
.section h2 i {
color: #4a6fa5;
}
.section h3 {
color: #4a6fa5;
margin: 20px 0 12px;
font-size: 1.4rem;
}
.example {
background-color: #f8f9fa;
border-left: 4px solid #4a6fa5;
padding: 20px;
margin: 15px 0;
border-radius: 0 8px 8px 0;
}
.example h4 {
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
code {
background-color: #2c3e50;
color: #ecf0f1;
padding: 3px 6px;
border-radius: 4px;
font-family: 'Consolas', monospace;
font-size: 0.95rem;
}
pre {
background-color: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin: 10px 0;
font-family: 'Consolas', monospace;
font-size: 0.95rem;
line-height: 1.5;
}
.demo-link, .demo-image {
display: inline-block;
margin: 10px 0;
padding: 10px 20px;
background-color: #4a6fa5;
color: white;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.3s;
}
.demo-link:hover {
background-color: #3a5a80;
}
.demo-image-container {
text-align: center;
margin: 20px 0;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.demo-image-container img {
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
/* 右侧代码编辑器 */
.code-editor {
background-color: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
position: sticky;
top: 20px;
height: fit-content;
}
.code-editor h2 {
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.editor-header h3 {
color: #4a6fa5;
font-size: 1.2rem;
}
#run-btn {
background-color: #27ae60;
color: white;
border: none;
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s;
}
#run-btn:hover {
background-color: #219653;
}
#code-input {
width: 100%;
height: 200px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: 'Consolas', monospace;
font-size: 0.95rem;
resize: vertical;
margin-bottom: 15px;
}
#preview {
min-height: 200px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f8f9fa;
overflow: auto;
}
/* 练习区域 */
.practice-section {
grid-column: 1 / -1;
background-color: white;
border-radius: 12px;
padding: 30px;
margin-top: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.practice-section h2 {
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.practice-task {
background-color: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.practice-task h3 {
color: #4a6fa5;
margin-bottom: 10px;
}
.task-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Consolas', monospace;
margin: 10px 0;
}
.check-btn {
background-color: #4a6fa5;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s;
margin-top: 10px;
}
.check-btn:hover {
background-color: #3a5a80;
}
.result {
margin-top: 15px;
padding: 12px;
border-radius: 6px;
display: none;
}
.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
footer {
grid-column: 1 / -1;
text-align: center;
padding: 20px;
margin-top: 30px;
color: #7f8c8d;
font-size: 0.9rem;
border-top: 1px solid #eee;
}
/* 响应式设计 */
@media (max-width: 1100px) {
.container {
grid-template-columns: 1fr;
}
.sidebar, .code-editor {
position: static;
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
header h1 {
font-size: 2rem;
}
.container {
padding: 15px;
}
.main-content, .sidebar, .code-editor, .practice-section {
padding: 20px;
}
}
.attribute-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.attribute-table th, .attribute-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
.attribute-table th {
background-color: #f2f6fc;
color: #2c3e50;
font-weight: 600;
}
.attribute-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.attribute-table tr:hover {
background-color: #f0f7ff;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-link"></i> HTML5超链接与图片基础用法详解</h1>
<p class="tagline">本教程将详细讲解HTML5中<a>超链接和<img>图片元素的基础用法，包括各种属性、示例和最佳实践。</p>
</header>
<!-- 左侧导航 -->
<nav class="sidebar">
<h2><i class="fas fa-list"></i> 目录</h2>
<ul class="nav-list">
<li class="nav-item"><a href="#intro" class="nav-link active"><i class="fas fa-home"></i> 简介</a></li>
<li class="nav-item"><a href="#links" class="nav-link"><i class="fas fa-link"></i> 超链接基础</a></li>
<li class="nav-item"><a href="#link-attributes" class="nav-link"><i class="fas fa-cog"></i> 超链接属性</a></li>
<li class="nav-item"><a href="#link-types" class="nav-link"><i class="fas fa-external-link-alt"></i> 链接类型</a></li>
<li class="nav-item"><a href="#images" class="nav-link"><i class="fas fa-image"></i> 图片基础</a></li>
<li class="nav-item"><a href="#image-attributes" class="nav-link"><i class="fas fa-sliders-h"></i> 图片属性</a></li>
<li class="nav-item"><a href="#combined" class="nav-link"><i class="fas fa-object-group"></i> 组合使用</a></li>
<li class="nav-item"><a href="#practice" class="nav-link"><i class="fas fa-code"></i> 练习</a></li>
</ul>
</nav>
<!-- 主内容区 -->
<main class="main-content">
<section id="intro" class="section">
<h2><i class="fas fa-home"></i> HTML5超链接与图片简介</h2>
<p>超链接和图片是HTML文档中最常用的两种元素，它们构成了互联网信息呈现和导航的基础。</p>
<p><strong>超链接（<a>）</strong>：用于创建从一个网页到另一个网页的链接，也可以链接到同一页面的不同部分、电子邮件地址、文件等。</p>
<p><strong>图片（<img>）</strong>：用于在网页中嵌入图像，使网页内容更加丰富和直观。</p>
<p>在HTML5中，这两个元素都得到增强，增加了新的属性和语义化特性。</p>
</section>
<section id="links" class="section">
<h2><i class="fas fa-link"></i> 超链接基础</h2>
<p>HTML超链接使用 <a> 标签定义，最基本的形式如下：</p>
<div class="example">
<h4><i class="fas fa-code"></i> 基本语法</h4>
<pre><code><a href="目标URL">链接文本</a></code></pre>
</div>
<h3>示例：</h3>
<div class="example">
<h4><i class="fas fa-desktop"></i> 代码示例</h4>
<pre><code><!-- 链接到外部网站 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 链接到同一网站的另一个页面 -->
<a href="about.html">关于我们</a>
<!-- 链接到电子邮件 -->
<a href="mailto:contact@example.com">联系我们</a></code></pre>
<h4><i class="fas fa-eye"></i> 效果演示</h4>
<a href="https://www.example.com" class="demo-link" target="_blank">访问示例网站</a><br>
<a href="#links" class="demo-link">关于我们（本页锚点）</a><br>
<a href="mailto:contact@example.com" class="demo-link">联系我们</a>
</div>
</section>
<section id="link-attributes" class="section">
<h2><i class="fas fa-cog"></i> 超链接属性详解</h2>
<p><a> 标签支持多种属性来控制链接的行为和表现：</p>
<table class="attribute-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>href</td>
<td>指定链接目标的URL（必需属性）</td>
<td><code>href="page.html"</code></td>
</tr>
<tr>
<td>target</td>
<td>指定在哪里打开链接文档</td>
<td><code>target="_blank"</code>（新窗口打开）</td>
</tr>
<tr>
<td>rel</td>
<td>指定当前文档与链接文档的关系</td>
<td><code>rel="noopener noreferrer"</code></td>
</tr>
<tr>
<td>title</td>
<td>提供链接的额外信息（鼠标悬停时显示）</td>
<td><code>title="点击查看更多信息"</code></td>
</tr>
<tr>
<td>download</td>
<td>指定链接为下载链接</td>
<td><code>download="filename"</code></td>
</tr>
</tbody>
</table>
<div class="example">
<h4><i class="fas fa-desktop"></i> 综合示例</h4>
<pre><code><a href="https://www.example.com"
target="_blank"
rel="noopener noreferrer"
title="在新窗口打开示例网站">
安全地访问外部网站
</a>
<a href="/files/document.pdf" download="教程文档.pdf">
下载PDF文档
</a></code></pre>
<h4><i class="fas fa-eye"></i> 效果演示</h4>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="在新窗口打开示例网站" class="demo-link">
安全地访问外部网站
</a>
<br>
<a href="#link-attributes" class="demo-link" onclick="alert('下载功能需要真实的文件链接，这里仅作演示');return false;">
下载PDF文档（演示）
</a>
</div>
</section>
<section id="link-types" class="section">
<h2><i class="fas fa-external-link-alt"></i> 不同类型的链接</h2>
<p>HTML超链接可以指向多种不同类型的资源：</p>
<h3>1. 页面锚点链接</h3>
<div class="example">
<pre><code><!-- 跳转到页面内的特定部分 -->
<a href="#section2">跳转到第二部分</a>
<!-- 目标位置需要有对应的id -->
<h2 id="section2">第二部分内容</h2></code></pre>
</div>
<h3>2. 电子邮件链接</h3>
<div class="example">
<pre><code><a href="mailto:someone@example.com?subject=邮件主题&body=邮件内容">
发送邮件
</a></code></pre>
</div>
<h3>3. 电话链接（移动设备）</h3>
<div class="example">
<pre><code><a href="tel:+861234567890">拨打电话</a></code></pre>
</div>
</section>
<section id="images" class="section">
<h2><i class="fas fa-image"></i> 图片基础</h2>
<p>HTML图片使用 <img> 标签定义，这是一个空元素（没有结束标签）：</p>
<div class="example">
<h4><i class="fas fa-code"></i> 基本语法</h4>
<pre><code><img src="图片路径" alt="替代文本"></code></pre>
</div>
<h3>示例：</h3>
<div class="example">
<h4><i class="fas fa-desktop"></i> 代码示例</h4>
<pre><code><!-- 基本图片 -->
<img src="image.jpg" alt="美丽的风景">
<!-- 带尺寸的图片 -->
<img src="image.jpg" alt="美丽的风景" width="400" height="300">
<!-- 使用网络图片 -->
<img src="https://picsum.photos/400/300" alt="示例图片"></code></pre>
<h4><i class="fas fa-eye"></i> 效果演示</h4>
<div class="demo-image-container">
<p>本地图片（模拟）：</p>
<img src="https://picsum.photos/400/200?random=1" alt="示例图片1" width="400" height="200">
<p>带尺寸控制的图片：</p>
<img src="https://picsum.photos/400/200?random=2" alt="示例图片2" width="300" height="150">
</div>
</div>
</section>
<section id="image-attributes" class="section">
<h2><i class="fas fa-sliders-h"></i> 图片属性详解</h2>
<p><img> 标签支持多种属性来控制图片的显示和行为：</p>
<table class="attribute-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>指定图片的URL（必需属性）</td>
<td><code>src="image.jpg"</code></td>
</tr>
<tr>
<td>alt</td>
<td>指定图片无法显示时的替代文本（必需属性）</td>
<td><code>alt="风景照片"</code></td>
</tr>
<tr>
<td>width/height</td>
<td>指定图片的宽度和高度（像素或百分比）</td>
<td><code>width="300" height="200"</code></td>
</tr>
<tr>
<td>title</td>
<td>提供图片的额外信息（鼠标悬停时显示）</td>
<td><code>title="点击查看大图"</code></td>
</tr>
<tr>
<td>loading</td>
<td>指定图片的加载方式（HTML5新增）</td>
<td><code>loading="lazy"</code>（延迟加载）</code></td>
</tr>
</tbody>
</table>
<div class="example">
<h4><i class="fas fa-desktop"></i> 综合示例</h4>
<pre><code><img src="landscape.jpg"
alt="美丽的山景照片"
width="600"
height="400"
title="点击查看大图"
loading="lazy"></code></pre>
<h4><i class="fas fa-eye"></i> 效果演示</h4>
<div class="demo-image-container">
<img src="https://picsum.photos/600/400?random=3"
alt="美丽的山景照片"
width="400"
height="267"
title="点击查看大图（演示）"
style="cursor: pointer;"
onclick="alert('在实际应用中，这里会打开大图或跳转到详情页')">
<p>尝试将鼠标悬停在图片上查看title提示</p>
</div>
</div>
</section>
<section id="combined" class="section">
<h2><i class="fas fa-object-group"></i> 组合使用：图片链接</h2>
<p>将图片放入超链接中，可以创建可点击的图片链接：</p>
<div class="example">
<h4><i class="fas fa-code"></i> 基本语法</h4>
<pre><code><a href="目标URL">
<img src="图片路径" alt="描述">
</a></code></pre>
</div>
<h3>示例：</h3>
<div class="example">
<h4><i class="fas fa-desktop"></i> 代码示例</h4>
<pre><code><a href="gallery.html" title="查看图库">
<img src="thumbnail.jpg"
alt="风景缩略图"
width="200"
height="150">
</a>
<a href="https://www.example.com" target="_blank">
<img src="logo.png" alt="示例网站Logo">
</a></code></pre>
<h4><i class="fas fa-eye"></i> 效果演示</h4>
<div class="demo-image-container">
<p>点击图片可以跳转：</p>
<a href="#combined" onclick="alert('在实际应用中，这里会跳转到图库页面');return false;">
<img src="https://picsum.photos/200/150?random=4" alt="风景缩略图" width="200" height="150">
</a>
<p>带边框的图片链接：</p>
<a href="#combined" onclick="alert('在实际应用中，这里会跳转到外部网站');return false;"
style="display: inline-block; border: 2px solid #4a6fa5; padding: 5px; border-radius: 8px;">
<img src="https://picsum.photos/150/100?random=5" alt="示例网站Logo" width="150" height="100">
</a>
</div>
</div>
</section>
</main>
<!-- 右侧代码编辑器 -->
<aside class="code-editor">
<h2><i class="fas fa-code"></i> 实时代码编辑器</h2>
<div class="editor-header">
<h3>尝试编辑下面的代码</h3>
<button id="run-btn">运行代码</button>
</div>
<textarea id="code-input" placeholder="在此输入HTML代码...">
<a href="https://www.example.com" target="_blank" title="访问示例网站">
<img src="https://picsum.photos/300/200" alt="示例图片" width="300" height="200">
</a>
<p>点击上面的图片将跳转到示例网站</p>
</textarea>
<h3>预览结果：</h3>
<div id="preview">
<!-- 这里会显示代码运行结果 -->
</div>
<h3 style="margin-top: 20px;">常用代码片段：</h3>
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;">
<button class="snippet-btn" data-code='<a href="https://www.example.com" target="_blank">外部链接</a>'>外部链接</button>
<button class="snippet-btn" data-code='<a href="#section">页面锚点</a>'>页面锚点</button>
<button class="snippet-btn" data-code='<a href="mailto:test@example.com">发送邮件</a>'>邮件链接</button>
<button class="snippet-btn" data-code='<img src="https://picsum.photos/200/150" alt="示例图片">'>基本图片</button>
<button class="snippet-btn" data-code='<a href="#"><img src="https://picsum.photos/200/150" alt="可点击图片"></a>'>图片链接</button>
</div>
</aside>
<!-- 练习区域 -->
<section id="practice" class="practice-section">
<h2><i class="fas fa-code"></i> 交互练习</h2>
<p>通过以下练习巩固所学知识：</p>
<div class="practice-task">
<h3>练习1：创建外部链接</h3>
<p>创建一个链接，文本为"访问MDN Web文档"，指向"https://developer.mozilla.org"，并在新标签页打开。</p>
<input type="text" class="task-input" id="task1-input" placeholder='在此输入HTML代码，如：<a href="...">文本</a>'>
<button class="check-btn" onclick="checkTask1()">检查答案</button>
<div id="task1-result" class="result"></div>
</div>
<div class="practice-task">
<h3>练习2：添加图片</h3>
<p>添加一张图片，图片地址为"https://picsum.photos/300/200"，替代文本为"示例图片"，宽度300像素，高度200像素。</p>
<input type="text" class="task-input" id="task2-input" placeholder='在此输入HTML代码，如：<img src="..." alt="...">'>
<button class="check-btn" onclick="checkTask2()">检查答案</button>
<div id="task2-result" class="result"></div>
</div>
<div class="practice-task">
<h3>练习3：创建图片链接</h3>
<p>创建一个图片链接，图片地址为"https://picsum.photos/250/150"，点击后跳转到"https://www.example.com"。</p>
<input type="text" class="task-input" id="task3-input" placeholder='在此输入HTML代码'>
<button class="check-btn" onclick="checkTask3()">检查答案</button>
<div id="task3-result" class="result"></div>
</div>
</section>
<footer>
<p>© 2023 HTML5教程 | 超链接与图片基础用法详解</p>
<p>本教程仅供学习使用，图片来自 <a href="https://picsum.photos" target="_blank">Lorem Picsum</a></p>
</footer>
</div>
<script>
// 导航交互
document.addEventListener('DOMContentLoaded', function() {
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
// 更新活动状态
navLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
// 平滑滚动到目标
const targetId = this.getAttribute('href');
if (targetId.startsWith('#')) {
e.preventDefault();
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 20,
behavior: 'smooth'
});
}
}
});
});
// 初始化代码编辑器
const codeInput = document.getElementById('code-input');
const preview = document.getElementById('preview');
const runBtn = document.getElementById('run-btn');
const snippetBtns = document.querySelectorAll('.snippet-btn');
// 运行代码
function runCode() {
const code = codeInput.value;
preview.innerHTML = code;
}
runBtn.addEventListener('click', runCode);
// 初始运行一次
runCode();
// 代码片段按钮
snippetBtns.forEach(btn => {
btn.addEventListener('click', function() {
const code = this.getAttribute('data-code');
codeInput.value = code;
runCode();
});
});
// 更新活动导航项基于滚动位置
function updateActiveNav() {
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('.nav-link');
let currentSectionId = '';
sections.forEach(section => {
const rect = section.getBoundingClientRect();
if (rect.top <= 100 && rect.bottom >= 100) {
currentSectionId = '#' + section.id;
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === currentSectionId) {
link.classList.add('active');
}
});
}
window.addEventListener('scroll', updateActiveNav);
});
// 练习检查函数
function checkTask1() {
const input = document.getElementById('task1-input').value.trim();
const result = document.getElementById('task1-result');
// 检查是否包含必要的部分
const hasHref = input.includes('href="https://developer.mozilla.org"');
const hasTarget = input.includes('target="_blank"');
const hasText = input.includes('>访问MDN Web文档<');
if (hasHref && hasTarget && hasText) {
result.textContent = "✓ 正确！你成功创建了一个指向MDN并在新标签页打开的链接。";
result.className = "result success";
} else {
result.textContent = "✗ 请检查你的代码。确保包含正确的href、target属性和链接文本。";
result.className = "result error";
}
result.style.display = "block";
}
function checkTask2() {
const input = document.getElementById('task2-input').value.trim();
const result = document.getElementById('task2-result');
// 检查是否包含必要的部分
const hasSrc = input.includes('src="https://picsum.photos/300/200"');
const hasAlt = input.includes('alt="示例图片"');
const hasWidth = input.includes('width="300"') || input.includes('width="300"') || input.includes('width=300');
const hasHeight = input.includes('height="200"') || input.includes('height="200"') || input.includes('height=200');
if (hasSrc && hasAlt && hasWidth && hasHeight) {
result.textContent = "✓ 正确！你成功添加了一张带有正确属性和尺寸的图片。";
result.className = "result success";
} else {
result.textContent = "✗ 请检查你的代码。确保包含正确的src、alt、width和height属性。";
result.className = "result error";
}
result.style.display = "block";
}
function checkTask3() {
const input = document.getElementById('task3-input').value.trim();
const result = document.getElementById('task3-result');
// 检查是否包含必要的部分
const hasLink = input.includes('<a') && input.includes('</a>');
const hasHref = input.includes('href="https://www.example.com"');
const hasImg = input.includes('<img');
const hasImgSrc = input.includes('src="https://picsum.photos/250/150"');
if (hasLink && hasHref && hasImg && hasImgSrc) {
result.textContent = "✓ 正确！你成功创建了一个可点击的图片链接。";
result.className = "result success";
} else {
result.textContent = "✗ 请检查你的代码。确保创建一个包含正确href的<a>标签，里面包含正确的<img>标签。";
result.className = "result error";
}
result.style.display = "block";
}
// 为示例链接添加点击事件（防止实际跳转）
document.querySelectorAll('.demo-link').forEach(link => {
if (link.getAttribute('href') === 'https://www.example.com') {
link.addEventListener('click', function(e) {
e.preventDefault();
alert('在实际网站中，这个链接会跳转到 example.com。\n\n在教程中，我们仅演示功能。');
});
}
});
</script>
</body>
</html>
功能说明
左侧导航：点击可以跳转到对应章节，并高亮显示当前章节
主内容区：包含超链接和图片的详细讲解，包括：
- 基础语法和示例
- 属性详解
- 不同类型链接的用法
- 代码示例和效果演示
右侧编辑器：提供实时代码编辑和预览功能
- 可以编辑HTML代码并立即查看效果
- 提供常用代码片段快速插入
练习区域：包含三个交互式练习
响应式设计：适配不同屏幕尺寸
这个教程页面既适合初学者学习HTML5超链接和图片的基础用法，也适合有经验的开发者作为快速参考。所有示例代码都可以在页面内直接运行和修改，提供了很好的交互学习体验。
