零基础HTML入门：从0搭建你的第一个网页

关注

原创 2025-11-13 23:20:21 1.8k 阅读 AI 写同款· GEO 优化 ›

制作一个简单HTML静态网页（HTML+CSS） 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒... 阅读详情

HTML 入门保姆级指南：从 0 到 1 搭建你的第一个网页

大家好！今天分享一份超全面的 HTML 入门教程。作为 Web 开发的基石，HTML 是构建网页结构的核心 —— 它就像搭建房子的 “砖块”，没有它，CSS 的样式美化和 JavaScript 的交互效果都无从谈起。这份内容基于教学视频整理（原视频链接：https://www.bilibili.com/video/BV1jf4y1J7Ms/），结合实操细节和避坑技巧，零基础也能轻松上手。

一、先搞懂：HTML 到底是什么？

1. 核心定义

HTML（Hyper Text Markup Language）即超文本标记语言，是用于构建网页元素的标记语言，并非编程语言。

编程语言（如 JavaScript）核心是逻辑控制，负责页面交互、接口调用等；
HTML 仅负责定义网页结构，比如哪里是标题、哪里是段落、哪里是图片。

2. Web 开发的 “铁三角” 关系

HTML、CSS、JavaScript 共同组成 Web 开发的基石，三者分工明确：

HTML：网页的 “结构骨架”（类似房子的墙体、梁柱）；
CSS：网页的 “外观布局”（类似房子的装修、家具摆放）；
JavaScript：网页的 “行为动作”（类似房子的电器、智能系统）。

简单理解：HTML 搭建 “方块”，CSS 美化 “方块”，JavaScript 让 “方块” 动起来。

二、前置准备：2 个工具搞定 HTML 开发

学习 HTML 无需复杂环境，只需准备以下 2 个工具，即刻开工：

浏览器：用于查看 HTML 的最终效果，推荐 Google Chrome（兼容性好、调试功能强）；
编译器：用于编写 HTML 代码，推荐 VSCode（轻量、插件丰富，新手友好）。

三、实操第一步：创建你的第一个 HTML 文件

HTML 的优势在于 “即写即看”，无需额外运行环境，本地即可调试，步骤超简单：

1. 新建文件

新建一个文件夹（比如命名为 “HTML 入门”）；
在文件夹内新建文件，命名为index.html（首页文件默认用index.html，部署后根域名会直接显示该文件内容）。

2. 编写 “Hello World”

用 VSCode 打开index.html，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>Hello World！这是我的第一个HTML网页</h1>
</body>
</html>

3. 查看效果

保存文件后，右键点击文件，选择 “用 Google Chrome 打开”，即可在浏览器中看到标题效果 —— 是不是超有成就感！

补充说明

若需创建 “关于页面”，可新建about.html，访问时通过xxx.com/about（部署后）查看；
文件名和路径建议用英文（如about.html），避免中文导致浏览器解析错误。

四、核心语法：HTML 标签怎么用？

标签是 HTML 的基本构建单元，掌握以下语法规则，就能灵活使用各类标签。

1. 标签的基本格式

标签用尖括号<>包裹，通常成对出现：开始标签<tagname> + 内容 + 结束标签</tagname>，例如<h1>标题内容</h1>；
无内容的标签可使用自闭合形式：HTML5 中可省略斜杠，直接写<tagname>，例如换行<br>、横线<hr>、图片<img>。

2. 行级元素 vs 块级元素（关键区别）

不同标签的布局行为不同，主要分为两类：

类型	核心特点	常见标签
行级元素	不新起一行，所占空间与内容大小一致	`<span>`、`<img>`、`<a>`、`<strong>`
块级元素	自动新起一行，默认占据整行宽度	`<div>`、`<h1-h6>`、`<p>`、`<form>`

3. 标签属性：给元素添加额外信息

属性写在开始标签中，以 “键值对” 形式存在，可添加多个属性，例如：

<img src="图片地址" alt="图片加载失败时的提示" width="300" height="200">

格式：<tagname key="value">内容</tagname>；
每个标签的可用属性不同，可通过 HTML 教程网站查询详细说明。 HTML 教程https://www.w3school.com.cn/html/index.asp

五、常用标签实操：直接复制就能用

以下是开发中高频使用的标签，附带语法示例和使用场景，新手可直接套用：

1. 基础文本标签

注释标签：（用于备注代码，方便维护）；

标题标签：<h1>-<h6>（h1 最大，h6 最小，自动换行）：

<h1>一级标题（页面主标题）</h1>
<h2>二级标题（章节标题）</h2>

段落标签：<p>（自动换行，段落间有默认间距）：

<p>这是一个段落。输入Lorem + Tab键，可快速生成占位文本，方便测试布局。</p>

换行与横线：<br>（强制换行）、<hr>（插入水平分割线）。

2. 链接与图片标签

链接标签：<a>（行级元素，可跳转至其他页面或网站）：
```
<a href="https://baidu.com" target="_blank">点击跳转到百度（新窗口打开）</a>
```
- href：指定跳转地址；target="_blank"：新窗口打开（默认在当前窗口打开）。

图片标签：<img>（自闭合行级元素）：
```
<img src="local-image.jpg" alt="风景图" width="500">
```
- src：图片路径（本地图片写相对路径，网络图片写完整 URL）；
- alt：图片加载失败时的备用文本（提升 accessibility）。

3. 列表标签（有序 / 无序）

无序列表：<ul> + <li>（默认带圆点标记）：

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

有序列表：<ol> + <li>（默认带数字标记）：

<ol>
  <li>第一步：新建HTML文件</li>
  <li>第二步：编写代码</li>
  <li>第三步：浏览器预览</li>
</ol>

4. 表格标签

用于展示结构化数据，核心标签：<table> + <thead>（表头） + <tbody>（表体） + <tr>（行） + <th>（表头单元格） + <td>（数据单元格）：

表格标签(标签名<table>)

表头标签<thead> 行<tr> 列名<th>

表体标签<tbody> 行<tr> 值<td>

<table border="1"> <!-- border="1" 显示边框（方便测试） -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>前端开发</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>28</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

5. 表单标签（登录 / 注册常用）

用于收集用户输入，核心标签：<form> + <input> + <select> + <textarea> + <button>：

<form action="" method="get">
  <!-- 文本输入框 -->
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名"><br><br>
  
  <!-- 密码输入框 -->
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="请输入密码"><br><br>
  
  <!-- 下拉列表 -->
  <label for="city">所在城市：</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select><br><br>
  
  <!-- 多行文本框 -->
  <label for="intro">个人简介：</label><br>
  <textarea id="intro" name="intro" rows="5" cols="30" placeholder="请输入个人简介"></textarea><br><br>
  
  <!-- 按钮 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

type属性：控制<input>的样式（如text文本、password密码、radio单选等）；
现代前端框架中，表单数据提交多通过 JavaScript 处理，action属性可留空。

六、HTML 页面结构：规范写法（VSCode 快捷键）

一个标准的 HTML5 页面有固定结构，用 VSCode 可快速生成：

打开 VSCode，新建index.html；
输入英文感叹号!，按下Tab键，自动生成以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容写在这里 -->
</body>
</html>

各部分说明

<!DOCTYPE html>：声明文档类型为 HTML5（告诉浏览器如何解析）；
<html lang="en">：根标签，lang="en"表示页面语言为英文（中文可改为lang="zh-CN"）；
<head>：头部区域，存放页面元数据（如编码、标题），内容不会显示在页面上；
- <meta charset="UTF-8">：指定字符编码（避免中文乱码）；
- <meta name="viewport">：适配移动端（关键配置，避免页面缩放异常）；
- <title>：页面标题（显示在浏览器标签栏）；
<body>：主体区域，所有需要显示在页面上的内容（标题、图片、表单等）都写在这里。