前言

HTML（HyperText Markup Language）是网页的骨架。每一个网页都是由 HTML 标签搭建起来的结构。无论你学前端还是后端，理解 HTML 都是必备基础。

本文从零开始，带你掌握 HTML 的核心知识。

一、HTML 文档结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="七月小站 - 个人技术博客">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    
    <main>
        <p>这是主要内容区域</p>
    </main>
    
    <footer>
        <p>&copy; 2026 七月小站</p>
    </footer>
    
    <script src="main.js"></script>
</body>
</html>

结构说明：

部分 作用
<!DOCTYPE html> 声明为 HTML5 文档
<html> 根元素，lang 指定语言
<head> 元数据：编码、标题、样式、SEO 信息
<body> 页面可见内容
<meta charset> 字符编码
<meta viewport> 移动端视口适配
<title> 浏览器标签页标题

网页 DOM 树状节点层级拓扑

二、文本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- 标题 h1~h6 -->
<h1>一级标题（页面主标题，一个页面建议只有一个）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<!-- 段落 -->
<p>这是一个段落。多个空格和换行在浏览器中会被合并。</p>
<p>这是另一个段落。</p>

<!-- 换行 -->
第一行<br>第二行

<!-- 文本格式 -->
<strong>加粗（有语义）</strong>
<b>加粗（无语义）</b>
<em>斜体（有语义，强调）</em>
<i>斜体（无语义）</i>
<mark>高亮文字</mark>
<del>删除文字</del>
<u>下划线</u>
<small>小号文字</small>
H<sub>2</sub>O  <!-- 下标 -->
x<sup>2</sup>   <!-- 上标 -->

<!-- 水平线 -->
<hr>

<!-- 引用 -->
<blockquote cite="https://example.com">
    这是一个块级引用
</blockquote>
<q>行内引用</q>

三、链接与图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 超链接 -->
<a href="https://blog.iot2045.cn">七月小站</a>
<a href="/about.html">关于页面（相对路径）</a>
<a href="mailto:july@example.com">发送邮件</a>
<a href="tel:+8613800138000">拨打电话</a>
<a href="#section1">跳转到页面内锚点</a>

<!-- 新窗口打开 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    新窗口打开（安全写法）
</a>

<!-- 图片 -->
<img src="photo.jpg" alt="照片描述" width="400" height="300">
<img src="https://example.com/image.jpg" alt="外部图片">

<!-- 图片链接 -->
<a href="https://example.com">
    <img src="banner.jpg" alt="点击图片跳转">
</a>

⚠️ alt 属性很重要：图片加载失败时显示替代文字，也有助于 SEO 和无障碍访问。

四、列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 无序列表 -->
<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>

五、表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table border="1">
    <caption>用户列表</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>注册时间</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>July</td>
            <td>july@example.com</td>
            <td>2026-05-01</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>zhangsan@example.com</td>
            <td>2026-05-15</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">共 2 条记录</td>
        </tr>
    </tfoot>
</table>

表格标签说明：

标签 作用
<table> 表格容器
<caption> 表格标题
<thead> 表头区域
<tbody> 表体数据
<tfoot> 表尾（汇总行）
<tr> 一行
<th> 表头单元格（加粗居中）
<td> 数据单元格
colspan 跨列合并
rowspan 跨行合并

六、表单（最重要的交互元素）⭐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<form action="/submit" method="POST">
    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"
           placeholder="请输入用户名" required>
    <br><br>

    <!-- 密码 -->
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"
           minlength="6" maxlength="20" required>
    <br><br>

    <!-- 邮箱 -->
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    <br><br>

    <!-- 数字 -->
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="1" max="150">
    <br><br>

    <!-- 单选按钮 -->
    <p>性别：</p>
    <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>
    <br><br>

    <!-- 多选 -->
    <p>爱好：</p>
    <input type="checkbox" id="coding" name="hobbies" value="coding">
    <label for="coding">编程</label>
    <input type="checkbox" id="reading" name="hobbies" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" id="sports" name="hobbies" value="sports">
    <label for="sports">运动</label>
    <br><br>

    <!-- 下拉选择 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
    </select>
    <br><br>

    <!-- 文本域 -->
    <label for="bio">个人简介：</label><br>
    <textarea id="bio" name="bio" rows="4" cols="50"
              placeholder="介绍一下自己..."></textarea>
    <br><br>

    <!-- 文件上传 -->
    <label for="avatar">头像：</label>
    <input type="file" id="avatar" name="avatar" accept="image/*">
    <br><br>

    <!-- 日期 -->
    <label for="birthday">生日：</label>
    <input type="date" id="birthday" name="birthday">
    <br><br>

    <!-- 按钮 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button" onclick="alert('你好!')">普通按钮</button>
</form>

常用 input 类型：

type 说明
text 文本
password 密码
email 邮箱（自动校验）
number 数字
tel 电话
url 网址
date 日期
file 文件上传
checkbox 复选框
radio 单选框
color 颜色选择器
range 滑块
search 搜索框

七、语义化标签（HTML5）

用有意义的标签代替 <div>，让页面结构更清晰：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <header>
        <nav>
            <a href="/">首页</a>
            <a href="/articles">文章</a>
            <a href="/about">关于</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
            <section>
                <h3>小标题</h3>
                <p>段落内容</p>
            </section>
        </article>

        <aside>
            <h3>侧边栏</h3>
            <p>推荐文章、标签云等</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 七月小站</p>
    </footer>
</body>

语义标签速查：

标签 含义
<header> 页头
<nav> 导航栏
<main> 主体内容（一个页面一个）
<article> 独立文章
<section> 章节/区块
<aside> 侧边栏（相关内容）
<footer> 页脚
<time> 日期时间
<figure> 插图/配图
<figcaption> 插图说明

八、多媒体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 视频 -->
<video width="640" height="360" controls poster="cover.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持 video 标签
</video>

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

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

九、SEO 基础

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
    <meta charset="UTF-8">
    <!-- 页面描述（搜索结果显示） -->
    <meta name="description" content="七月小站 - 个人技术博客">
    <!-- 关键词 -->
    <meta name="keywords" content="编程,技术博客,入门教程">
    <!-- 作者 -->
    <meta name="author" content="July">
    <!-- 禁止搜索引擎索引 -->
    <!-- <meta name="robots" content="noindex, nofollow"> -->
    
    <!-- Open Graph（社交分享卡片） -->
    <meta property="og:title" content="文章标题">
    <meta property="og:description" content="文章简介">
    <meta property="og:image" content="https://example.com/cover.jpg">
    <meta property="og:url" content="https://blog.iot2045.cn">
</head>

十、HTML 常用实体

字符 实体 说明
< &lt; 小于号
> &gt; 大于号
& &amp; 与号
" &quot; 双引号
空格 &nbsp; 不换行空格
© &copy; 版权符号
• &bull; 圆点
→ &rarr; 右箭头

结语

HTML 是最容易入门的语言之一，但想写出结构清晰、语义正确、SEO 友好的页面需要实践。

学习建议：

  1. 打开浏览器 F12，看看你常访问的网站的 HTML 结构
  2. 尝试用 HTML 手写一个完整的个人主页
  3. 配合 CSS 和 JavaScript 逐步完善

HTML 是网页世界的骨架——骨架稳了，房子才漂亮。🏗️