HTML 入门教程

HTML 超全入门教程

一、HTML 到底是什么？

HTML 的全称是超文本标记语言（HyperText Markup Language） ，它不是编程语言 （没有变量、循环、判断这些逻辑能力），而是一种专门用来描述网页结构的标记语言。

你可以把网页想象成一本书：

HTML 就是书的骨架和目录，规定了哪里是标题、哪里是正文、哪里是插图、哪里是链接
CSS 是书的排版和美化，负责字体、颜色、间距、布局
JavaScript 是书的互动功能，负责翻页、点击按钮、弹出提示等动态效果

简单说：HTML 负责"有什么"，CSS 负责"长什么样"，JS 负责"能做什么"，三者共同构成了我们看到的所有网页。

补充：HTML 的发展简史

1991 年：Tim Berners-Lee 发明了第一个版本的 HTML，只有 18 个标签
1999 年：HTML 4.01 发布，成为当时最广泛使用的版本
2014 年：HTML5 正式发布，新增了语义化标签、多媒体、Canvas 等大量特性，成为现代网页的标准
现在：我们说的 HTML 一般都指 HTML5，它是所有前端开发的基础

二、HTML 的标准基本结构

不管网页多复杂，它的基础结构都是固定的。现代网页必须包含 DOCTYPE 声明，否则浏览器会进入"怪异模式"，导致页面显示异常。

完整的 HTML5 标准结构

html 复制代码

<!-- 声明文档类型：告诉浏览器这是一个 HTML5 文档 -->
<!DOCTYPE html>

<!-- 根标签：所有网页内容都必须包裹在里面 -->
<html lang="zh-CN">
  <!-- 头部标签：存放网页的配置信息，不会直接显示在页面上 -->
  <head>
    <!-- 字符编码：必须设置为 UTF-8，否则中文会乱码 -->
    <meta charset="UTF-8">
    <!-- 视口设置：移动端适配必备，让网页在手机上正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题：显示在浏览器标签页上 -->
    <title>我的第一个网页</title>
    <!-- 可以在这里引入 CSS 文件、JS 文件 -->
  </head>

  <!-- 主体标签：所有能看到的内容都放在这里 -->
  <body>
    这里是网页的正文内容！
  </body>
</html>

每个标签的详细解释

<!DOCTYPE html>
- 必须写在文档的第一行，前面不能有任何内容（包括空格和注释）
- 它不是 HTML 标签，只是一个给浏览器的"指令"
- HTML5 的声明非常简单，不像 HTML4 那样需要写很长的 DTD 引用
<html lang="zh-CN">
- lang 属性：声明网页的语言，zh-CN 表示简体中文，en 表示英文
- 作用：帮助搜索引擎识别网页语言，也方便屏幕阅读器为视障用户提供服务
<head> 标签
- 除了上面提到的 <meta> 和 <title>，还可以包含：
  - <link>：引入外部 CSS 文件
  - <script>：引入 JavaScript 文件（建议放在 <body> 末尾，避免阻塞页面加载）
  - <style>：写内部 CSS 样式

<meta> 标签的常用配置

html 复制代码

<!-- 网页描述：搜索引擎结果中显示的简介 -->
<meta name="description" content="这是一个 HTML 入门教程">
<!-- 网页关键词：帮助搜索引擎收录 -->
<meta name="keywords" content="HTML, 前端, 入门">
<!-- 作者信息 -->
<meta name="author" content="豆包">

三、最常用的 HTML 标签（按功能分类）

1. 文本类标签（排版必备）

标签	作用	代码示例	效果说明	注意事项
`<h1>-<h6>`	标题标签，`<h1>` 最大最重要，`<h6>` 最小	`<h1>一级标题</h1>`	大标题，自带加粗和上下边距	一个页面最好只有一个 `<h1>`，用于 SEO
`<p>`	段落标签	`<p>这是一段文字。</p>`	普通段落，自动换行，自带上下边距	不要用多个 `<p>` 来做间距，应该用 CSS
`<strong>`	加粗强调	`<strong>重要内容</strong>`	文字加粗	语义化标签，表示内容很重要，不要用 `<b>`
`<em>`	斜体强调	`<em>需要强调的内容</em>`	文字斜体	语义化标签，表示语气强调，不要用 `<i>`
`<br>`	强制换行	第一行第二行	两行文字	单标签，不需要闭合；不要用多个 `<br>` 做间距
`<hr>`	水平分割线	`<hr>`	一条横线	单标签，自带样式，建议用 CSS 美化
`<span>`	行内容器	`<span style="color: red;">红色文字</span>`	包裹行内元素，用于局部样式	本身没有任何样式，纯容器
`<div>`	块级容器	`<div>这是一个区块</div>`	包裹块级元素，用于布局	本身没有任何样式，是最常用的布局容器

2. 链接标签 `<a>`（超链接）

链接是 HTML 的核心，让网页之间可以互相跳转。

基本用法

html 复制代码

<!-- 跳转到外部网站 -->
<a href="https://www.baidu.com" target="_blank" title="点击打开百度">去百度搜索</a>

<!-- 跳转到当前网站的其他页面 -->
<a href="about.html">关于我们</a>

<!-- 跳转到页面内的某个位置（锚点） -->
<a href="#section1">跳转到第一部分</a>
<h2 id="section1">第一部分内容</h2>

<!-- 空链接（点击后不跳转，用于占位） -->
<a href="#">空链接</a>

<!-- 打电话、发邮件 -->
<a href="tel:13800138000">拨打 13800138000</a>
<a href="mailto:example@qq.com">发送邮件</a>

重要属性

href：必填属性，指定跳转的目标地址
target：指定打开方式
- _self：默认值，在当前窗口打开
- _blank：在新窗口打开（最常用）
title：鼠标悬停时显示的提示文字

3. 图片标签 `<img>`

用于在网页中插入图片，是单标签，不需要闭合。

基本用法

html 复制代码

<!-- 插入网络图片 -->
<img src="https://via.placeholder.com/300x200" alt="示例图片" width="300" height="200">

<!-- 插入本地图片（相对路径） -->
<img src="images/photo.jpg" alt="我的照片" loading="lazy">

重要属性

src：必填属性，指定图片的地址（网络地址或本地路径）
alt：必填属性 ，图片加载失败时显示的替代文字
- 作用：① 图片加载失败时提示用户；② 帮助屏幕阅读器识别图片内容；③ 有利于 SEO
width/height：设置图片的宽度和高度（单位：像素）
- 只设置一个时，另一个会自动按比例缩放
loading="lazy"：开启图片懒加载，只有当图片滚动到可视区域时才加载，提升页面速度

对应你提供的报错信息：当 src 指向的图片无法解析（如 https://via.placeholder.com/300x200 加载失败）时，浏览器会显示 alt 属性中的文字"示例图片"，这就是 alt 属性的重要作用。

4. 列表标签

用于展示一组相关的内容，分为无序列表、有序列表和自定义列表。

无序列表 `<ul>`（默认显示圆点）

html 复制代码

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

有序列表 `<ol>`（默认显示数字）

html 复制代码

<ol type="A" start="3">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

type 属性：指定序号类型（1 数字、A 大写字母、a 小写字母、I 罗马数字）
start 属性：指定起始序号

自定义列表 `<dl>`（用于术语解释）

html 复制代码

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于搭建网页结构</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于美化网页</dd>
</dl>

<dt>：定义术语（标题）
<dd>：定义术语的描述（内容）

5. 表格标签 `<table>`

用于展示结构化的数据，比如成绩单、商品列表。

html 复制代码

<table border="1" cellpadding="5" cellspacing="0">
  <!-- 表头 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <!-- 表体 -->
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>21</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

常用标签和属性

<tr>：表格的一行
<th>：表头单元格（自带加粗和居中）
<td>：普通单元格
border：表格边框宽度
cellpadding：单元格内边距
cellspacing：单元格间距
colspan：单元格跨列
rowspan：单元格跨行

6. 表单标签（用户交互核心）

表单是网页收集用户输入的主要方式，比如登录、注册、搜索框。

html 复制代码

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

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

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

  <!-- 复选框 -->
  <div>
    <label>爱好：</label>
    <input type="checkbox" id="read" name="hobby" value="read">
    <label for="read">读书</label>
    <input type="checkbox" id="music" name="hobby" value="music">
    <label for="music">音乐</label>
  </div>

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

  <!-- 文本域（多行输入） -->
  <div>
    <label for="intro">简介：</label>
    <textarea id="intro" name="intro" rows="3" cols="30" placeholder="请介绍一下自己"></textarea>
  </div>

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

核心说明

<form>：表单容器，action 指定提交地址，method 指定提交方式（get 或 post）
<label>：关联表单元素，点击文字时会自动选中对应的输入框
<input>：最常用的表单元素，通过 type 属性改变类型
- text：文本输入框
- password：密码输入框（内容隐藏）
- radio：单选按钮（同一组 name 必须相同）
- checkbox：复选框（同一组 name 必须相同）
- submit：提交按钮
- reset：重置按钮
required：必填属性，提交时如果为空会提示用户
placeholder：输入框的提示文字

四、HTML 标签的属性

属性是写在标签尖括号里的额外信息，用来调整标签的行为或样式。

1. 全局属性（所有标签都能用）

属性	作用	示例
`id`	给标签起一个唯一的名字，用于锚点跳转、CSS/JS 操作	`<div id="header">头部</div>`
`class`	给标签起一个类名，用于给多个标签设置相同的 CSS 样式	`<p class="red">红色文字</p>`
`title`	鼠标悬停时显示的提示文字	`<a href="#" title="点击查看">详情</a>`
`style`	内联样式，直接给标签设置 CSS 样式	`<p style="color: blue;">蓝色文字</p>`
`hidden`	隐藏标签	`<div hidden>这个内容会被隐藏</div>`

2. 私有属性

只有特定标签才能使用的属性，比如 <a> 的 href、<img> 的 src、<input> 的 type 等。

五、HTML5 核心新特性

HTML5 相比之前的版本，最大的改进是语义化 和原生支持多媒体，让网页结构更清晰，功能更强大。

1. 语义化标签（最重要）

语义化标签就是"见名知意"的标签，代替了原来大量的 <div>，让代码更易读，也有利于 SEO 和屏幕阅读器。

标签	作用
`<header>`	页面或区块的头部
`<nav>`	导航栏
`<main>`	页面的主要内容（一个页面只有一个）
`<article>`	独立的文章内容
`<section>`	页面的一个区块
`<aside>`	侧边栏
`<footer>`	页面或区块的底部

语义化页面结构示例

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>网站头部</header>
  <nav>导航栏</nav>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容...</p>
    </article>
    <aside>侧边栏</aside>
  </main>
  <footer>网站底部</footer>
</body>
</html>

2. 多媒体标签（无需插件）

HTML5 原生支持音频和视频，不需要再安装 Flash 插件。

html 复制代码

<!-- 音频 -->
<audio src="music.mp3" controls loop autoplay>

<!-- 视频 -->
<video src="video.mp4" controls width="600" poster="cover.jpg"></video>

controls：显示播放控件（播放/暂停、音量等）
loop：循环播放
autoplay：自动播放（大多数浏览器会禁用，需要用户交互后才能播放）
poster：视频封面图

3. 其他重要新特性

<canvas>：用于绘制图形、动画、游戏
本地存储：localStorage 和 sessionStorage，可以在浏览器中存储数据
地理定位：获取用户的地理位置
WebSocket：实现浏览器与服务器的实时通信

六、HTML 开发最佳实践与常见错误

1. 必须遵守的规范

所有标签都要正确闭合（单标签除外）
标签名和属性名全部小写（HTML 不区分大小写，但小写是行业规范）
属性值必须加引号（单引号或双引号都可以，推荐双引号）
不要嵌套错误（比如 <p> 里面不能放 <div>）

2. 常见错误

❌ 忘记写 <!DOCTYPE html>，导致浏览器进入怪异模式
❌ 不设置 charset="UTF-8"，导致中文乱码
❌ 图片不写 alt 属性
❌ 用 <div> 代替所有标签，不使用语义化标签
❌ 用 <br> 做间距，用 <b>/<i> 做加粗/斜体
❌ 多个标签使用相同的 id（id 必须唯一）

3. 实用技巧

写代码时注意缩进，让代码更易读
给重要的内容加上语义化标签，提升 SEO 排名
图片使用合适的格式（JPG 用于照片，PNG 用于透明图，SVG 用于图标）
移动端页面必须设置 viewport 标签

七、完整的实战示例：个人介绍页面

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>
  <style>
    /* 简单的 CSS 美化 */
    body {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    header {
      text-align: center;
      margin-bottom: 30px;
    }
    .avatar {
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
    section {
      margin-bottom: 30px;
    }
    h2 {
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>
  <header>
    <img src="https://via.placeholder.com/150x150" alt="我的头像" class="avatar">
    <h1>张三</h1>
    <p>前端开发工程师 | 热爱技术与分享</p>
  </header>

  <section>
    <h2>个人简介</h2>
    <p>我是一名前端开发工程师，有 3 年的开发经验，熟悉 HTML、CSS、JavaScript 以及 Vue 框架。喜欢研究新技术，乐于分享自己的学习心得。</p>
  </section>

  <section>
    <h2>技能清单</h2>
    <ul>
      <li>HTML5 / CSS3 / JavaScript</li>
      <li>Vue.js / React</li>
      <li>Git / Webpack</li>
      <li>响应式布局 / 移动端开发</li>
    </ul>
  </section>

  <section>
    <h2>联系方式</h2>
    <ul>
      <li>邮箱：zhangsan@example.com</li>
      <li>GitHub：<a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></li>
      <li>博客：<a href="https://zhangsan.com" target="_blank">zhangsan.com</a></li>
    </ul>
  </section>

  <footer>
    <p>&copy; 2026 张三 版权所有</p>
  </footer>
</body>
</html>

八、下一步学习建议

把上面的实战示例复制到记事本中，保存为 .html 文件，用浏览器打开查看效果
尝试修改代码，添加自己的信息和内容
学习 CSS，给页面添加更丰富的样式
学习 JavaScript，让页面拥有交互功能

HTML 超全入门教程

一、HTML 到底是什么？

补充：HTML 的发展简史

二、HTML 的标准基本结构

完整的 HTML5 标准结构

每个标签的详细解释

三、最常用的 HTML 标签（按功能分类）

1. 文本类标签（排版必备）

2. 链接标签 <a>（超链接）

基本用法

重要属性

3. 图片标签 <img>

基本用法

重要属性

4. 列表标签

无序列表 <ul>（默认显示圆点）

有序列表 <ol>（默认显示数字）

自定义列表 <dl>（用于术语解释）

5. 表格标签 <table>

常用标签和属性

6. 表单标签（用户交互核心）

核心说明

四、HTML 标签的属性

1. 全局属性（所有标签都能用）

2. 私有属性

五、HTML5 核心新特性

1. 语义化标签（最重要）

语义化页面结构示例

2. 多媒体标签（无需插件）

3. 其他重要新特性

六、HTML 开发最佳实践与常见错误

1. 必须遵守的规范

2. 常见错误

3. 实用技巧

七、完整的实战示例：个人介绍页面

八、下一步学习建议

2. 链接标签 `<a>`（超链接）

3. 图片标签 `<img>`

无序列表 `<ul>`（默认显示圆点）

有序列表 `<ol>`（默认显示数字）

自定义列表 `<dl>`（用于术语解释）

5. 表格标签 `<table>`