HTML 教程¶

HTML（HyperText Markup Language）是构建网页的基础语言。本教程将带你从零开始学习 HTML 的核心概念和标签。

第一章：HTML 基础¶

（一）HTML 简介¶

什么是 HTML？ HTML 是一种标记语言，用于创建网页的结构和内容。它使用标签来定义网页的各个部分。

HTML 的特点： - 超文本：支持链接到其他页面或资源 - 标记语言：使用标签来描述内容 - 平台无关：可在任何浏览器中运行 - 与 CSS 和 JavaScript 配合使用

HTML 的版本： - HTML 4.01（旧版本） - XHTML（严格版本） - HTML5（当前标准，推荐使用）

（二）HTML 文档结构¶

基本 HTML 文档结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个 HTML 网页。</p>
</body>
</html>

文档结构解析： - <!DOCTYPE html>：声明文档类型为 HTML5 - <html>：根元素，包含整个网页 - <head>：包含网页的元信息（不可见） - <body>：包含网页的可见内容

第二章：HTML 标签¶

（一）文本标签¶

标题标签：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落和换行：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

<br>  <!-- 换行 -->
<hr>  <!-- 水平线 -->

文本格式化：

<strong>加粗文本（重要）</strong>
<em>斜体文本（强调）</em>
<mark>标记文本</mark>
<del>删除线文本</del>
<ins>下划线文本</ins>
<sub>下标</sub>
<sup>上标</sup>
<small>小号文本</small>

（二）列表标签¶

无序列表：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表：

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

自定义列表：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

（三）链接和图片¶

链接：

<!-- 文本链接 -->
<a href="https://www.example.com">访问示例网站</a>

<!-- 邮件链接 -->
<a href="mailto:example@email.com">发送邮件</a>

<!-- 锚点链接 -->
<a href="#section">跳转到锚点</a>

<!-- 新窗口打开链接 -->
<a href="https://www.example.com" target="_blank">在新窗口打开</a>

图片：

<!-- 基本图片 -->
<img src="image.jpg" alt="图片描述">

<!-- 带尺寸的图片 -->
<img src="image.jpg" alt="图片描述" width="300" height="200">

<!-- 响应式图片 -->
<img src="image.jpg" alt="图片描述" style="max-width: 100%; height: auto;">

（四）表格标签¶

基本表格：

id=__span-9-1><table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>25</td> <td>上海</td> </tr> </tbody> class=p></table>

表格属性：

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <td colspan="2">跨两列</td>
        <td rowspan="2">跨两行</td>
    </tr>
    <tr>
        <td>普通单元格</td>
        <td>普通单元格</td>
    </tr>
</table>

（五）表单标签¶

表单元素：

<form action="/submit" method="post">
    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>

    <!-- 密码输入 -->
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>

    <!-- 单选按钮 -->
    <label>性别：</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <!-- 复选框 -->
    <label>兴趣爱好：</label>
    <input type="checkbox" id="reading" name="hobbies" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" id="music" name="hobbies" value="music">
    <label for="music">音乐</label>

    <!-- 下拉列表 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select>

    <!-- 文本域 -->
    <label for="message">留言：</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
</form>

第三章：HTML5 新特性¶

（一）语义化标签¶

HTML5 语义化标签：

<header>
    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于</a>
        <a href="#contact">联系</a>
    </nav>
</header>

<main>
    <article>
        <h1>文章标题</h1>
        <p>文章内容...</p>
    </article>

    <aside>
        <h2>侧边栏</h2>
        <p>侧边栏内容...</p>
    </aside>
</main>

<footer>
    <p>&copy; 2024 我的网站</p>
</footer>

语义化标签的优势：

标签	作用	语义
`<header>`	页头区域	页面或区块的头部
`<nav>`	导航链接	主要导航区域
`<main>`	主要内容	页面的核心内容
`<article>`	独立内容	可独立分发的内容
`<section>`	内容分区	文档中的节或区块
`<aside>`	侧边栏	与主要内容相关但独立的内容
`<footer>`	页脚区域	页面或区块的底部
`<figure>`	媒体内容	图表、图片等独立内容
`<figcaption>`	图表标题	`<figure>` 元素的标题
`<details>`	详情展开	可展开/折叠的内容块
`<summary>`	摘要	`<details>` 元素的标题

（二）多媒体标签¶

视频标签：

<!-- 基本视频播放 -->
<video width="640" height="360" controls autoplay muted>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持视频标签。
</video>

<!-- 视频属性说明 -->
<video 
    controls           <!-- 显示控制条 -->
    autoplay           <!-- 自动播放 -->
    muted              <!-- 静音 -->
    loop               <!-- 循环播放 -->
    poster="cover.jpg" <!-- 封面图片 -->
    preload="auto"     <!-- 预加载 -->
    width="640"        <!-- 宽度 -->
    height="360"       <!-- 高度 -->
>
    <source src="movie.mp4" type="video/mp4">
</video>

音频标签：

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频标签。
</audio>

嵌入内容：

<!-- 嵌入 YouTube 视频 -->
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/视频ID" 
    frameborder="0" 
    allowfullscreen>
</iframe>

<!-- 嵌入地图 -->
<iframe 
    width="600" 
    height="450" 
    src="https://www.openstreetmap.org/export/embed.html" 
    frameborder="0">
</iframe>

（三）HTML5 新增元素¶

进度条和量表：

<!-- 进度条 -->
<progress value="70" max="100">70%</progress>

<!-- 量表 -->
<meter value="0.7">70%</meter>

<!-- 详情展开 -->
<details>
    <summary>点击展开详情</summary>
    <p>这里是详细内容...</p>
</details>

<!-- 标记文本 -->
<p>这是一段包含<mark>高亮</mark>文本的段落。</p>

数据列表：

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

（四）表单增强¶

HTML5 新增表单类型：

<!-- 邮箱输入 -->
<input type="email" placeholder="请输入邮箱" required>

<!-- URL 输入 -->
<input type="url" placeholder="请输入 URL">

<!-- 数字输入 -->
<input type="number" min="1" max="100" step="1">

<!-- 日期输入 -->
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="week">

<!-- 时间输入 -->
<input type="time">

<!-- 颜色选择器 -->
<input type="color">

<!-- 范围滑块 -->
<input type="range" min="0" max="100" step="5">

<!-- 搜索框 -->
<input type="search" placeholder="搜索...">

<!-- 电话号码 -->
<input type="tel" pattern="[0-9]{11}">

<!-- 文件上传 -->
<input type="file" accept="image/*" multiple>

表单验证属性：

<form id="registrationForm">
    <!-- 必填字段 -->
    <input type="text" required placeholder="必填">

    <!-- 最小/最大长度 -->
    <input type="text" minlength="3" maxlength="20">

    <!-- 正则表达式验证 -->
    <input type="text" pattern="[A-Za-z]{3}">

    <!-- 自定义验证信息 -->
    <input type="email" id="email">
    <span id="emailError" style="color: red;"></span>

    <button type="submit">提交</button>
</form>

<script>
document.getElementById('registrationForm').addEventListener('submit', function(e) {
    const email = document.getElementById('email');
    if (!email.validity.valid) {
        e.preventDefault();
        document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
    }
});
</script>

（五）HTML5 拖放功能¶

<!-- 可拖动元素 -->
<div 
    draggable="true" 
    ondragstart="handleDrag(event)" 
    id="dragItem"
>
    拖动我
</div>

<!-- 放置区域 -->
<div 
    ondrop="handleDrop(event)" 
    ondragover="allowDrop(event)"
    id="dropZone"
    style="width: 200px; height: 200px; border: 2px dashed #ccc;"
>
    放到这里
</div>

<script>
function handleDrag(e) {
    e.dataTransfer.setData("text/plain", e.target.id);
}

function allowDrop(e) {
    e.preventDefault();
}

function handleDrop(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/plain");
    const element = document.getElementById(data);
    e.target.appendChild(element);
}
</script>

（六）HTML5 本地存储¶

<script>
// localStorage - 永久存储
localStorage.setItem('username', '张三');
const user = localStorage.getItem('username');
localStorage.removeItem('username');

// sessionStorage - 会话存储
sessionStorage.setItem('token', 'abc123');

// 存储复杂数据
const userData = { name: '张三', age: 20 };
localStorage.setItem('user', JSON.stringify(JSON.stringify(userData)));
const savedUser = JSON.parse(localStorage.getItem('user'));
</script>

（七）Web Workers 基础¶

<script>
// 创建 Worker
const worker = new Worker('worker.js');

// 发送消息到 Worker
worker.postMessage({ data: [1, 2, 3, 4, 5] });

// 接收 Worker 消息
worker.onmessage = function(e) {
    console.log('计算结果:', e.data);
};

// 错误处理
worker.onerror = function(e) {
    console.error('Worker 错误:', e.message);
};
</script>

第四章：练习题目¶

基础练习¶

创建个人简介页面
包含姓名、年龄、爱好等信息
使用标题、段落、列表等标签
创建产品展示页面
包含产品图片、描述、价格等
使用表格展示产品信息
创建联系表单
包含姓名、邮箱、留言等字段
使用各种表单元素

进阶练习¶

创建响应式页面
使用语义化标签
添加多媒体元素
创建表单验证
使用 HTML5 表单验证
添加必填字段和格式限制
创建导航菜单
使用链接和锚点
创建多页面导航

综合练习¶

创建个人网站
包含首页、关于、联系方式等页面
使用语义化标签和多媒体元素
创建产品展示网站
包含产品列表和详情页
使用表格和表单
创建简单的博客系统
包含文章列表和详情显示
使用语义化标签

恭喜你完成了 HTML 教程的学习！继续学习 CSS 和 JavaScript，掌握更多前端开发知识！