MEMZGBL的博客

1430 字

4 分钟

HTML 开发指南：从零开始构建网页

2026-03-23

MEMZGBL

html

/

web-development

/

前端

/

教程

/

ubuntu

HTML 开发完全指南：从零开始构建网页#

HTML（超文本标记语言）是 Web 的基石。无论你未来想成为前端开发者、后端工程师，还是只是想搭建个人网站，HTML 都是必须掌握的第一门语言。它就像建筑的骨架，决定了页面的结构和内容。

本文将带你从零开始学习 HTML，涵盖基础语法、常用标签、语义化元素、表单、多媒体、CSS 入门及响应式设计，通过实战案例助你快速上手。

1. HTML 是什么？#

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它通过标签来定义页面的结构和内容，浏览器负责将这些标签渲染成可视化的页面。

1.1 HTML 文档结构#

一个最简单的 HTML 文档如下：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>我的第一个网页</title>
6
</head>
7
<body>
8
    <h1>欢迎来到我的网站</h1>
9
    <p>这是第一个段落。</p>
10
</body>
11
</html>

<!DOCTYPE html>：声明文档类型，告诉浏览器使用 HTML5 标准。
<html>：根元素，包裹整个页面内容。
<head>：包含页面的元数据（标题、字符集、样式等），不直接显示。
<meta charset="UTF-8">：定义字符编码，防止乱码。
<title>：浏览器标签栏显示的标题。
<body>：可见内容的容器。

1.2 HTML 标签语法#

标签通常成对出现：<标签名>内容</标签名>。
空标签（无内容）：<img>、<br>、<hr> 等。
属性：为标签提供附加信息，如 <a href="https://example.com">链接</a>。

2. 开发环境搭建#

任何文本编辑器都可以编写 HTML。推荐工具：

VS Code：免费、强大，支持插件（如 Live Server）。
Sublime Text：轻量快速。
WebStorm：功能全面，适合大型项目。

在 Ubuntu 上安装 VS Code：

1
sudo snap install code --classic

安装 Live Server 插件后，右键 HTML 文件选择“Open with Live Server”，即可实时预览。

3. 常用 HTML 标签#

3.1 标题与段落#

1
<h1>一级标题</h1>
2
<h2>二级标题</h2>
3
...
4
<h6>六级标题</h6>
5

6
<p>这是一个段落。浏览器会自动换行，并添加外边距。</p>

3.2 文本格式化#

1
<strong>加粗（重要）</strong>
2
<em>斜体（强调）</em>
3
<mark>高亮</mark>
4
<del>删除线</del>
5
<ins>下划线</ins>
6
<br>   <!-- 换行 -->
7
<hr>   <!-- 水平线 -->

3.3 超链接#

1
<!-- 绝对链接 -->
2
<a href="https://www.example.com">访问示例网站</a>
3

4
<!-- 相对链接 -->
5
<a href="about.html">关于我们</a>
6

7
<!-- 锚点跳转 -->
8
<a href="#section1">跳转到第一节</a>
9
...
10
<h2 id="section1">第一节</h2>

3.4 图片#

1
<img src="images/photo.jpg" alt="描述文字" width="300" height="200">

src：图片路径（相对或绝对）
alt：图片无法显示时的替代文本，对 SEO 和无障碍访问很重要
width / height：建议使用 CSS 控制

3.5 列表#

无序列表（项目符号）：

1
<ul>
2
    <li>苹果</li>
3
    <li>香蕉</li>
4
    <li>橙子</li>
5
</ul>

有序列表（数字）：

1
<ol>
2
    <li>第一步</li>
3
    <li>第二步</li>
4
    <li>第三步</li>
5
</ol>

定义列表：

1
<dl>
2
    <dt>HTML</dt>
3
    <dd>超文本标记语言</dd>
4
    <dt>CSS</dt>
5
    <dd>层叠样式表</dd>
6
</dl>

3.6 表格#

1
<table border="1">
2
    <thead>
3
        <tr>
4
            <th>姓名</th>
5
            <th>年龄</th>
6
        </tr>
7
    </thead>
8
    <tbody>
9
        <tr>
10
            <td>张三</td>
11
            <td>25</td>
12
        </tr>
13
        <tr>
14
            <td>李四</td>
15
            <td>30</td>
16
        </tr>
17
    </tbody>
18
</table>

<table>：表格容器
<tr>：行
<th>：表头单元格（加粗居中）
<td>：普通单元格
<thead>、<tbody>、<tfoot>：语义分组

3.7 容器与布局#

<div>：块级容器，无语义，用于布局。
<span>：内联容器，包裹小范围文本。

1
<div class="header">
2
    <h1>网站标题</h1>
3
</div>
4
<div class="content">
5
    <p>这是一段<span class="highlight">高亮</span>文本。</p>
6
</div>

4. 语义化 HTML#

HTML5 引入了一系列语义化标签，让页面结构更清晰，便于搜索引擎和辅助技术理解。

标签	含义
`<header>`	页面或区域的头部
`<nav>`	导航链接
`<main>`	页面主要内容
`<article>`	独立、可复用的内容（如博客文章）
`<section>`	文档的一个区块
`<aside>`	侧边栏，与主要内容相关但不必要的内容
`<footer>`	页面或区域的底部

示例：

1
<header>
2
    <h1>我的博客</h1>
3
    <nav>
4
        <a href="/">首页</a>
5
        <a href="/about">关于</a>
6
    </nav>
7
</header>
8
<main>
9
    <article>
10
        <h2>文章标题</h2>
11
        <p>文章内容...</p>
12
    </article>
13
    <aside>
14
        <h3>相关链接</h3>
15
        <ul>...</ul>
16
    </aside>
17
</main>
18
<footer>
19
    <p>© 2026 我的博客</p>
20
</footer>

5. 表单#

表单用于收集用户输入，是交互的核心。

5.1 基础表单结构#

1
<form action="/submit" method="post">
2
    <label for="name">姓名：</label>
3
    <input type="text" id="name" name="name" required>
4

5
    <label for="email">邮箱：</label>
6
    <input type="email" id="email" name="email">
7

8
    <label for="password">密码：</label>
9
    <input type="password" id="password" name="password">
10

11
    <label>性别：</label>
12
    <input type="radio" name="gender" value="male"> 男
13
    <input type="radio" name="gender" value="female"> 女
14

15
    <label>爱好：</label>
16
    <input type="checkbox" name="hobby" value="reading"> 阅读
17
    <input type="checkbox" name="hobby" value="music"> 音乐
18

19
    <label for="country">国家：</label>
20
    <select id="country" name="country">
21
        <option value="cn">中国</option>
22
        <option value="us">美国</option>
23
    </select>
24

25
    <label for="message">留言：</label>
26
    <textarea id="message" name="message" rows="4"></textarea>
27

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

5.2 常用 input 类型#

type	说明
text	单行文本
password	密码字段
email	邮箱（内置验证）
number	数字
tel	电话号码
url	网址
date	日期选择器
file	文件上传
checkbox	复选框
radio	单选框
submit	提交按钮

5.3 表单属性#

action：提交数据的 URL
method：GET 或 POST
target：提交后在哪里显示响应（_blank 等）
autocomplete：是否自动补全

6. 多媒体嵌入#

6.1 视频#

1
<video controls width="600">
2
    <source src="video.mp4" type="video/mp4">
3
    <source src="video.webm" type="video/webm">
4
    您的浏览器不支持视频播放。
5
</video>

controls：显示播放控件
autoplay：自动播放（需谨慎）
loop：循环播放
poster：封面图片

6.2 音频#

1
<audio controls>
2
    <source src="audio.mp3" type="audio/mpeg">
3
    <source src="audio.ogg" type="audio/ogg">
4
    您的浏览器不支持音频播放。
5
</audio>

6.3 嵌入其他内容#

1
<!-- 嵌入 PDF 或外部页面 -->
2
<iframe src="https://example.com" width="800" height="600"></iframe>
3

4
<!-- 嵌入 SVG 图形 -->
5
<svg width="100" height="100">
6
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
7
</svg>

7. CSS 入门#

HTML 定义结构，CSS 定义样式。有三种方式使用 CSS：

7.1 内联样式#

1
<p style="color: red; font-size: 20px;">红色文本</p>

7.2 内部样式表#

在 <head> 中添加 <style>：

1
<style>
2
    body {
3
        font-family: Arial, sans-serif;
4
        background-color: #f0f0f0;
5
    }
6
    h1 {
7
        color: #333;
8
    }
9
</style>

7.3 外部样式表#

创建 style.css 文件，然后在 HTML 中链接：

1
<link rel="stylesheet" href="style.css">

7.4 选择器基础#

1
/* 元素选择器 */
2
p { color: blue; }
3

4
/* 类选择器 */
5
.highlight { background-color: yellow; }
6

7
/* ID 选择器（唯一） */
8
#header { font-size: 24px; }
9

10
/* 后代选择器 */
11
nav ul li { display: inline; }

8. 响应式设计#

让网页在不同设备上都有良好表现。

8.1 视口设置#

在 <head> 中添加：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

8.2 媒体查询#

根据屏幕宽度应用不同样式：

1
/* 默认样式（移动优先） */
2
.container {
3
    width: 100%;
4
    padding: 10px;
5
}
6

7
/* 平板 */
8
@media (min-width: 768px) {
9
    .container {
10
        width: 750px;
11
        margin: 0 auto;
12
    }
13
}
14

15
/* 桌面 */
16
@media (min-width: 1024px) {
17
    .container {
18
        width: 960px;
19
    }
20
}

8.3 弹性布局（Flexbox）#

1
.nav {
2
    display: flex;
3
    justify-content: space-between;
4
    align-items: center;
5
}

8.4 网格布局（Grid）#

1
.grid {
2
    display: grid;
3
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4
    gap: 20px;
5
}

9. 实战：个人简介页面#

我们将综合运用所学知识，创建一个简单的个人简介页面。

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>张三 - 个人简介</title>
7
    <style>
8
        * {
9
            margin: 0;
10
            padding: 0;
11
            box-sizing: border-box;
12
        }
13
        body {
14
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15
            line-height: 1.6;
16
            color: #333;
17
            background-color: #f9f9f9;
18
        }
19
        .container {
20
            max-width: 800px;
21
            margin: 0 auto;
22
            padding: 20px;
23
        }
24
        header {
25
            text-align: center;
26
            padding: 2rem 0;
27
            background-color: #2c3e50;
28
            color: white;
29
            border-radius: 8px 8px 0 0;
30
        }
31
        .avatar {
32
            width: 150px;
33
            height: 150px;
34
            border-radius: 50%;
35
            object-fit: cover;
36
            margin-bottom: 1rem;
37
            border: 3px solid #fff;
38
        }
39
        .section {
40
            background: white;
41
            margin: 20px 0;
42
            padding: 20px;
43
            border-radius: 8px;
44
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
45
        }
46
        .section h2 {
47
            border-left: 4px solid #3498db;
48
            padding-left: 10px;
49
            margin-bottom: 15px;
50
            color: #2c3e50;
51
        }
52
        .skills ul {
53
            display: flex;
54
            flex-wrap: wrap;
55
            list-style: none;
56
            gap: 10px;
57
        }
58
        .skills li {
59
            background: #3498db;
60
            color: white;
61
            padding: 5px 10px;
62
            border-radius: 20px;
63
        }
64
        .projects {
65
            display: grid;
66
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
67
            gap: 15px;
68
        }
69
        .project-card {
70
            border: 1px solid #ddd;
71
            padding: 15px;
72
            border-radius: 8px;
73
            transition: transform 0.2s;
74
        }
75
        .project-card:hover {
76
            transform: translateY(-5px);
77
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
78
        }
79
        footer {
80
            text-align: center;
81
            padding: 20px;
82
            color: #777;
83
            border-top: 1px solid #eee;
84
            margin-top: 20px;
85
        }
86
        @media (max-width: 600px) {
87
            .container {
88
                padding: 10px;
89
            }
90
            .projects {
91
                grid-template-columns: 1fr;
92
            }
93
        }
94
    </style>
95
</head>
96
<body>
97
    <div class="container">
98
        <header>
99
            <img src="https://via.placeholder.com/150" alt="头像" class="avatar">
100
            <h1>张三</h1>
101
            <p>全栈开发者 | 技术爱好者</p>
102
        </header>
103

104
        <div class="section">
105
            <h2>关于我</h2>
106
            <p>5年互联网开发经验，热爱开源与新技术。擅长构建高性能、响应式的Web应用。喜欢分享知识，相信技术能改变世界。</p>
107
        </div>
108

109
        <div class="section skills">
110
            <h2>技术栈</h2>
111
            <ul>
112
                <li>HTML5/CSS3</li>
113
                <li>JavaScript</li>
114
                <li>React</li>
115
                <li>Node.js</li>
116
                <li>Python</li>
117
                <li>Docker</li>
118
            </ul>
119
        </div>
120

121
        <div class="section">
122
            <h2>项目经验</h2>
123
            <div class="projects">
124
                <div class="project-card">
125
                    <h3>个人博客系统</h3>
126
                    <p>基于React和Node.js，支持Markdown编辑和响应式布局。</p>
127
                </div>
128
                <div class="project-card">
129
                    <h3>在线商城前端</h3>
130
                    <p>Vue3 + Pinia实现，包含购物车、订单管理等模块。</p>
131
                </div>
132
                <div class="project-card">
133
                    <h3>天气预报小程序</h3>
134
                    <p>微信小程序，调用高德API获取实时天气。</p>
135
                </div>
136
            </div>
137
        </div>
138

139
        <div class="section">
140
            <h2>联系我</h2>
141
            <p>邮箱：zhangsan@example.com</p>
142
            <p>GitHub：<a href="#">github.com/zhangsan</a></p>
143
        </div>
144

145
        <footer>
146
            <p>&copy; 2026 张三. 保留所有权利。</p>
147
        </footer>
148
    </div>
149
</body>
150
</html>