HTML5 基础入门教程 2026 | 零基础小白学网页

HTML5 基础入门教程

如果你想学做网页，HTML 是你迈出的第一步。HTML 不需要编程基础，它就是一种「给内容贴标签」的语言。这篇教程会用最通俗的大白话，带你从零开始搞懂 HTML。

一、HTML 是什么？

1.1 通俗理解

想象你在写一篇 Word 文档：

你选中一段文字，点「标题」→ 它就变大了
你选中一段文字，点「加粗」→ 它就变粗了
你插入一张图片 → 图片就显示出来了

HTML 做的事一模一样，只不过你不是用鼠标点按钮，而是用「标签」来告诉浏览器：「这段是标题」「这段是段落」「这里放一张图片」。

一句话总结：HTML 就是给网页内容「贴标签」的语言。

1.2 HTML 长什么样？

html

<h1>这是一个标题</h1>
<p>这是一个段落</p>
<img src="photo.jpg" alt="一张照片">

<h1> 叫「开始标签」
</h1> 叫「结束标签」
中间的内容就是被标记的文字
标签都是用尖括号 < > 包起来的

1.3 写第一个网页

你只需要一个文本编辑器（甚至记事本都行），新建一个 .html 文件，写入以下内容：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这是我做的第一个网页。</p>
</body>
</html>

保存后双击打开，你就能在浏览器里看到你的第一个网页了！

1.4 网页骨架解释

把网页想象成一封「信」：

<!DOCTYPE html>     ← 信的格式声明（告诉浏览器这是 HTML5）
<html>              ← 信封（整个网页）
  <head>            ← 信封背面（看不见的信息）
    <title>         ← 信的标题（显示在浏览器标签页上）
  </head>
  <body>            ← 信的内容（用户看到的所有东西）
    <h1>            ← 大标题
    <p>             ← 段落
  </body>
</html>

💡 记忆技巧：
<head> 是「幕后工作」，用户看不到
<body> 是「台前表演」，用户能看到

二、常用文本标签

2.1 标题标签 h1 ~ h6

HTML 提供了 6 级标题，数字越大，字体越小：

html

<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

效果大概是：

# 一级标题（最大）
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题（最小）

💡 注意事项：
一个页面只用一个 <h1>（通常是主标题）
标签要按层级使用，不要为了字体大小而用标题标签

2.2 段落和换行

html

<p>这是一个段落。段落之间会自动有空隙。</p>
<p>这是另一个段落。</p>

<p>这是一段文字，<br>这里换行了。</p>

💡 区别：
<p> 是段落，段落之间有间距
<br> 是换行，只是简单换一行，没有间距
<br> 是自闭合标签，没有结束标签

2.3 文本格式化

html

<strong>加粗文字（表示重要）</strong>
<b>也是加粗（纯样式）</b>

<em>斜体文字（表示强调）</em>
<i>也是斜体（纯样式）</i>

<u>下划线文字</u>
<s>删除线文字</s>
<mark>高亮标记文字</mark>

<small>小号文字</small>

💡 实际开发建议：优先用 <strong> 和 <em>，因为它们有「语义」（表示重要和强调），对搜索引擎和屏幕阅读器更友好。

2.4 水平分割线

html

<p>上面的内容</p>
<hr>
<p>下面的内容</p>

<hr> 会在两个段落之间画一条水平线，用来分隔内容。

三、链接和图片

3.1 超链接 a

链接是网页最重要的功能之一——点击跳转到另一个页面：

html

<!-- 基本链接 -->
<a href="https://www.google.com">点击去谷歌</a>

<!-- 在新窗口打开 -->
<a href="https://www.google.com" target="_blank">在新窗口打开谷歌</a>

<!-- 链接到本站的其他页面 -->
<a href="/about.html">关于我们</a>

<!-- 链接到邮箱（点击打开邮件应用） -->
<a href="mailto:hello@example.com">发邮件给我</a>

<!-- 链接到电话（手机上点击拨号） -->
<a href="tel:10086">拨打 10086</a>

💡 target 属性：
target="_self"：在当前窗口打开（默认）
target="_blank"：在新窗口打开
用 _blank 时建议加上 rel="noopener noreferrer" 更安全

3.2 图片 img

html

<!-- 基本用法 -->
<img src="photo.jpg" alt="描述文字">

<!-- 宽高设置 -->
<img src="logo.png" alt="网站Logo" width="200" height="50">

<!-- 网络图片 -->
<img src="https://example.com/image.jpg" alt="网络图片">

💡 重要属性：
src：图片地址（必须）
alt：图片描述（必须！图片加载失败时显示，也供盲人阅读器使用）
width / height：宽高（建议用 CSS 设置）

3.3 图文链接

把图片放在链接标签里面，就变成了「点击图片跳转」：

html

<a href="https://example.com">
  <img src="banner.jpg" alt="点击跳转">
</a>

四、列表

4.1 无序列表 ul

就是用圆点排列的列表：

html

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

效果：

苹果
香蕉
橘子

4.2 有序列表 ol

自动带编号的列表：

html

<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
</ol>

效果：

打开冰箱门
把大象放进去
关上冰箱门

4.3 嵌套列表

列表可以嵌套，做多级菜单：

html

<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

💡 记忆技巧：
<ul> = Unordered List = 无序列表
<ol> = Ordered List = 有序列表
<li> = List Item = 列表项

五、表格

5.1 基本表格

html

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>22</td>
    <td>上海</td>
  </tr>
</table>

效果：

姓名	年龄	城市
小明	25	北京
小红	22	上海

💡 标签含义：
<table> = 表格
<tr> = Table Row = 一行
<th> = Table Header = 表头（自动加粗居中）
<td> = Table Data = 单元格

5.2 合并单元格

html

<table border="1">
  <tr>
    <td colspan="2">横向合并2列</td>
    <td>第三列</td>
  </tr>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td rowspan="2">纵向合并2行</td>
  </tr>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
</table>

💡 记忆技巧：
colspan = column span = 跨列（横向合并）
rowspan = row span = 跨行（纵向合并）

5.3 完整表格结构

html

<table>
  <caption>员工信息表</caption>  <!-- 表格标题 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>部门</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>技术部</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>1人</td>
    </tr>
  </tfoot>
</table>

💡 thead/tbody/tfoot 不是必须的，但加上后代码更清晰，也方便 CSS 样式控制。

六、表单（用户输入）

6.1 基本表单

表单用来收集用户输入的信息：

html

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

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

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

💡 重要概念：
action：表单数据提交到哪里
method：提交方式（GET 或 POST）
name：提交数据时用的名字（后端靠这个识别）
<label for="id">：点击文字也能选中输入框（无障碍必备）

6.2 各种输入类型

html

<!-- 文本 -->
<input type="text" placeholder="普通文本">

<!-- 密码（输入显示为圆点） -->
<input type="password" placeholder="密码">

<!-- 邮箱（移动端弹出@键盘） -->
<input type="email" placeholder="邮箱">

<!-- 数字 -->
<input type="number" min="0" max="100" value="50">

<!-- 日期 -->
<input type="date">

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

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

<!-- 文件上传 -->
<input type="file">

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

6.3 单选和复选

html

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

<!-- 复选框 -->
<p>兴趣爱好：</p>
<label><input type="checkbox" name="hobby" value="reading"> 读书</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>

💡 关键点：
单选按钮的 name 必须相同，才能实现「多选一」
checked 属性表示默认选中
复选框的 name 可以相同，也可以不同

6.4 下拉选择

html

<select name="city">
  <option value="">请选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangzhou">广州</option>
</select>

💡 selected 表示默认选中某一项。

6.5 文本域

html

<textarea name="message" rows="5" cols="40" placeholder="请输入留言..."></textarea>

💡 <input> 是单行文本，<textarea> 是多行文本。

七、语义化标签

7.1 什么是语义化？

「语义化」就是用有意义的标签代替到处都用 <div>：

html

<!-- 不好：全是 div，看不出结构 -->
<div class="header">导航栏</div>
<div class="main">主内容</div>
<div class="footer">底部</div>

<!-- 好：用语义化标签，一目了然 -->
<header>导航栏</header>
<main>主内容</main>
<footer>底部</footer>

7.2 常用语义化标签

html

<header>   <!-- 页面或区块的头部 -->
<nav>      <!-- 导航栏 -->
<main>     <!-- 主要内容 -->
<article>  <!-- 一篇独立文章 -->
<section>  <!-- 一个区块 -->
<aside>    <!-- 侧边栏 -->
<footer>   <!-- 底部 -->
<figure>   <!-- 图片+说明 -->
<figcaption> <!-- 图片标题 -->
<time>     <!-- 时间 -->

7.3 完整页面结构示例

html

<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
      <a href="/contact">联系</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>文章标题</h2>
      <time datetime="2026-08-01">2026年8月1日</time>
      <p>文章内容...</p>
    </article>

    <aside>
      <h3>热门文章</h3>
      <ul>
        <li>文章1</li>
        <li>文章2</li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 我的博客. 保留所有权利。</p>
  </footer>
</body>

💡 语义化的好处：
代码更易读（开发者看了就懂）
搜索引擎更好理解（SEO 更友好）
屏幕阅读器更好支持（无障碍访问）

八、div 和 span

8.1 块级元素 div

<div> 是一个「盒子」，用来把内容分组，独占一行：

html

<div class="card">
  <h3>卡片标题</h3>
  <p>卡片内容</p>
</div>

<div class="card">
  <h3>另一个卡片</h3>
  <p>另一个内容</p>
</div>

💡 <div> 没有任何语义，纯粹用来分组和布局。它是块级元素，独占一行。

8.2 行内元素 span

<span> 也是无语义的，但它不换行，只包裹一小段文字：

html

<p>今天天气<span style="color: red;">非常热</span>，注意防暑。</p>

💡 <span> 是行内元素，不会换行，适合给一小段文字加样式。

8.3 块级 vs 行内

特性	块级元素	行内元素
是否换行	独占一行	不会换行
宽高	可以设置	不能设置
代表标签	div, p, h1, ul	span, a, strong, em

九、多媒体标签

9.1 视频 video

html

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  你的浏览器不支持视频播放。
</video>

💡 属性：
controls：显示播放控制条
autoplay：自动播放（浏览器可能阻止）
loop：循环播放
muted：静音
poster="cover.jpg"：封面图

9.2 音频 audio

html

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  你的浏览器不支持音频播放。
</audio>

9.3 iframe 嵌入

html

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

<!-- 嵌入地图 -->
<iframe
  src="https://maps.google.com/maps?q=Beijing&output=embed"
  width="600"
  height="450">
</iframe>

十、HTML 属性详解

10.1 通用属性

所有标签都可以用的属性：

html

<div
  id="main-content"          <!-- 唯一标识 -->
  class="container card"     <!-- 类名（可以多个） -->
  style="color: red;"        <!-- 行内样式 -->
  title="鼠标悬停提示文字"    <!-- 悬停提示 -->
  data-user-id="123"         <!-- 自定义数据属性 -->
  hidden                     <!-- 隐藏元素 -->
>
  内容
</div>

10.2 id vs class

特性	id	class
唯一性	页面中唯一	可以重复
数量	一个元素只能一个	可以多个
分隔符	直接用	空格分隔
CSS 选择器	`#main`	`.card`
JS 获取	`getElementById`	`getElementsByClassName`

💡 经验法则：默认用 class，需要唯一标识时才用 id。

十一、实战练习

11.1 练习一：个人简历页

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的简历</title>
</head>
<body>
  <header>
    <h1>张三的简历</h1>
    <nav>
      <a href="#info">基本信息</a>
      <a href="#skills">技能</a>
      <a href="#experience">经历</a>
    </nav>
  </header>

  <main>
    <section id="info">
      <h2>基本信息</h2>
      <p>姓名：张三</p>
      <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
      <p>电话：<a href="tel:13800138000">13800138000</a></p>
      <img src="avatar.jpg" alt="头像" width="150">
    </section>

    <section id="skills">
      <h2>技能清单</h2>
      <ul>
        <li>HTML5 / CSS3</li>
        <li>JavaScript / TypeScript</li>
        <li>Vue 3 / React</li>
        <li>Node.js</li>
      </ul>
    </section>

    <section id="experience">
      <h2>工作经历</h2>
      <article>
        <h3>前端工程师 - ABC公司</h3>
        <time>2024.07 - 至今</time>
        <p>负责公司官网和后台管理系统的开发。</p>
      </article>
    </section>
  </main>

  <footer>
    <p>© 2026 张三. 保留所有权利。</p>
  </footer>
</body>
</html>

11.2 练习二：注册表单

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册账号</title>
</head>
<body>
  <main style="max-width: 400px; margin: 40px auto;">
    <h1>注册账号</h1>

    <form action="/register" method="POST">
      <div>
        <label for="name">昵称：</label><br>
        <input type="text" id="name" name="name" placeholder="2-20个字符" required>
      </div>

      <div>
        <label for="email">邮箱：</label><br>
        <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
      </div>

      <div>
        <label for="pwd">密码：</label><br>
        <input type="password" id="pwd" name="password" placeholder="至少6位" required>
      </div>

      <div>
        <label>性别：</label>
        <label><input type="radio" name="gender" value="m"> 男</label>
        <label><input type="radio" name="gender" value="f"> 女</label>
        <label><input type="radio" name="gender" value="o" checked> 保密</label>
      </div>

      <div>
        <label>兴趣：</label>
        <label><input type="checkbox" name="hobby" value="code"> 编程</label>
        <label><input type="checkbox" name="hobby" value="music"> 音乐</label>
        <label><input type="checkbox" name="hobby" value="game"> 游戏</label>
      </div>

      <div>
        <label for="city">城市：</label>
        <select id="city" name="city">
          <option value="">请选择</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="gz">广州</option>
        </select>
      </div>

      <div>
        <label for="bio">个人简介：</label><br>
        <textarea id="bio" name="bio" rows="3" placeholder="简单介绍一下自己..."></textarea>
      </div>

      <div>
        <label>
          <input type="checkbox" name="agree" required>
          我已阅读并同意<a href="/terms">用户协议</a>
        </label>
      </div>

      <button type="submit">注册</button>
    </form>
  </main>
</body>
</html>

十二、常见问题

12.1 标签必须小写吗？

HTML 不区分大小写，<DIV> 和 <div> 效果一样。但约定俗成用小写，这是行业规范。

12.2 标签必须闭合吗？

大部分标签需要闭合 <p></p>，但有些是自闭合的：<br>、<hr>、<img>、<input>。

12.3 HTML 文件必须有什么？

html

<!DOCTYPE html>      <!-- 必须有，声明文档类型 -->
<html>               <!-- 必须有，根元素 -->
<head>               <!-- 必须有，头部信息 -->
  <meta charset="UTF-8">  <!-- 必须有，字符编码 -->
  <title>标题</title>     <!-- 必须有，页面标题 -->
</head>
<body>               <!-- 必须有，页面内容 -->
</body>
</html>

12.4 `<!DOCTYPE html>` 是什么？

它不是 HTML 标签，而是一个「声明」，告诉浏览器用 HTML5 标准来解析页面。每个 HTML 文件第一行都必须有它。

十三、HTML 速查表

13.1 常用标签速查

标签	用途	示例
`<h1>~<h6>`	标题	`<h1>大标题</h1>`
`<p>`	段落	`<p>一段文字</p>`
`<br>`	换行	`第一行<br>第二行`
`<hr>`	分割线	`<hr>`
`<strong>`	加粗	`<strong>重要</strong>`
`<em>`	斜体	`<em>强调</em>`
`<a>`	链接	`<a href="url">链接</a>`
`<img>`	图片	`<img src="x.jpg" alt="图">`
`<ul>`	无序列表	`<ul><li>项</li></ul>`
`<ol>`	有序列表	`<ol><li>项</li></ol>`
`<table>`	表格	`<table><tr><td>格</td></tr></table>`
`<form>`	表单	`<form action="/x">...</form>`
`<input>`	输入框	`<input type="text">`
`<button>`	按钮	`<button>点击</button>`
`<div>`	块容器	`<div class="box">...</div>`
`<span>`	行内容器	`<span style="color:red">红字</span>`

13.2 语义化标签速查

标签	用途
`<header>`	页头/区头
`<nav>`	导航栏
`<main>`	主内容区
`<article>`	独立文章
`<section>`	内容区块
`<aside>`	侧边栏
`<footer>`	页脚/区脚

十四、总结

回顾本教程的要点：

HTML 就是给内容贴标签，告诉浏览器每个内容是什么
网页骨架：<!DOCTYPE> → <html> → <head> + <body>
文本标签：<h1> 标题、<p> 段落、<strong> 加粗、<em> 斜体
链接用 <a href>，图片用 <img src alt>
列表分无序 <ul> 和有序 <ol>，每项用 <li>
表格：<table> → <tr> 行 → <th> 表头 / <td> 单元格
表单：<form> 包含各种 <input> 输入框
语义化标签让代码更清晰、SEO 更友好
<div> 是块级容器，<span> 是行内容器
每个标签都可以有 id、class、style 等属性

学会了 HTML，你就能搭建网页的「骨架」。接下来学习 CSS 来美化它，再用 JavaScript 让它动起来！

相关阅读：

HTML5 基础入门教程 2026 | 零基础小白学网页 ​

一、HTML 是什么？ ​

1.1 通俗理解 ​

1.2 HTML 长什么样？ ​

1.3 写第一个网页 ​

1.4 网页骨架解释 ​

二、常用文本标签 ​

2.1 标题标签 h1 ~ h6 ​

2.2 段落和换行 ​

2.3 文本格式化 ​

2.4 水平分割线 ​

三、链接和图片 ​

3.1 超链接 a ​

3.2 图片 img ​

3.3 图文链接 ​

四、列表 ​

4.1 无序列表 ul ​

4.2 有序列表 ol ​

4.3 嵌套列表 ​

五、表格 ​

5.1 基本表格 ​

5.2 合并单元格 ​

5.3 完整表格结构 ​

六、表单（用户输入） ​

6.1 基本表单 ​

6.2 各种输入类型 ​

6.3 单选和复选 ​

6.4 下拉选择 ​

6.5 文本域 ​

七、语义化标签 ​

7.1 什么是语义化？ ​

7.2 常用语义化标签 ​

7.3 完整页面结构示例 ​

八、div 和 span ​

8.1 块级元素 div ​

8.2 行内元素 span ​

8.3 块级 vs 行内 ​

九、多媒体标签 ​

9.1 视频 video ​

9.2 音频 audio ​

9.3 iframe 嵌入 ​

十、HTML 属性详解 ​

10.1 通用属性 ​

10.2 id vs class ​

十一、实战练习 ​

11.1 练习一：个人简历页 ​

11.2 练习二：注册表单 ​

十二、常见问题 ​

12.1 标签必须小写吗？ ​

12.2 标签必须闭合吗？ ​

12.3 HTML 文件必须有什么？ ​

12.4 <!DOCTYPE html> 是什么？ ​

十三、HTML 速查表 ​

13.1 常用标签速查 ​

13.2 语义化标签速查 ​

十四、总结 ​

HTML5 基础入门教程 2026 | 零基础小白学网页

一、HTML 是什么？

1.1 通俗理解

1.2 HTML 长什么样？

1.3 写第一个网页

1.4 网页骨架解释

二、常用文本标签

2.1 标题标签 h1 ~ h6

2.2 段落和换行

2.3 文本格式化

2.4 水平分割线

三、链接和图片

3.1 超链接 a

3.2 图片 img

3.3 图文链接

四、列表

4.1 无序列表 ul

4.2 有序列表 ol

4.3 嵌套列表

五、表格

5.1 基本表格

5.2 合并单元格

5.3 完整表格结构

六、表单（用户输入）

6.1 基本表单

6.2 各种输入类型

6.3 单选和复选

6.4 下拉选择

6.5 文本域

七、语义化标签

7.1 什么是语义化？

7.2 常用语义化标签

7.3 完整页面结构示例

八、div 和 span

8.1 块级元素 div

8.2 行内元素 span

8.3 块级 vs 行内

九、多媒体标签

9.1 视频 video

9.2 音频 audio

9.3 iframe 嵌入

十、HTML 属性详解

10.1 通用属性

10.2 id vs class

十一、实战练习

11.1 练习一：个人简历页

11.2 练习二：注册表单

十二、常见问题

12.1 标签必须小写吗？

12.2 标签必须闭合吗？

12.3 HTML 文件必须有什么？

12.4 `<!DOCTYPE html>` 是什么？

十三、HTML 速查表

13.1 常用标签速查

13.2 语义化标签速查

十四、总结