什么是 HTML？

HTML 的全称是 HyperText Markup Language（超文本标记语言）。 它不是编程语言，而是一种标记语言——通过"标签"告诉浏览器如何展示内容。

• 超文本：可以包含文字、图片、视频、链接等
• 标记：用 <tag> 这样的标签给内容做标记
• 语言：有自己的一套规则和语法

HTML 文档结构 必知

每个 HTML 页面都有固定的骨架结构。这是一个最小可用的 HTML 文件：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是我的第一个页面。</p>
</body>
</html>

基本语法

标签的两种形式

属性

标签可以通过属性来配置更多行为，写在开始标签里：

<a href="https://example.com" target="_blank">点我打开新窗口</a>

其中 href 和 target 就是属性，格式是 属性名="属性值"。

标签的嵌套

标签可以嵌套，但必须正确闭合——先开的后关：

<!-- ✅ 正确 -->
<div>
    <p>文字</p>
</div>

<!-- ❌ 错误：交叉嵌套 -->
<div>
    <p>文字</div>
</p>

注释

注释不会显示在页面上，仅供开发者自己查看：

<!-- 这是注释，用户看不到我 -->
<!--
    多行注释也是可以的
    可以写很多行
-->

标题标签 h1 ~ h6

HTML 提供了 6 级标题，<h1> 最大，<h6> 最小：

文本标签

示例

<p>这是普通段落文字。</p>
<p>这是重要文字，这是强调文字。</p>
<blockquote>
    这是引用的内容，通常会缩进显示。
</blockquote>

列表

无序列表 <ul>

项目符号为圆点：

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

有序列表 <ol>

带数字编号：

自定义列表 <dl>

用于术语-描述的场景：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，网页的骨架</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，负责网页的样式</dd>
</dl>

超链接 <a>

超链接是互联网的基石，用 <a> 标签创建：

<!-- 链接到外部网站 -->
<a href="https://www.baidu.com">去百度</a>

<!-- 新窗口打开 -->
<a href="https://example.com" target="_blank">新窗口打开</a>

<!-- 页面内锚点跳转 -->
<a href="#intro">跳到"什么是HTML"章节</a>

<!-- 发邮件 -->
<a href="mailto:hello@example.com">给我发邮件</a>

<!-- 打电话（手机端） -->
<a href="tel:13800138000">打电话</a>

图片 <img>

<img> 是单标签，用来显示图片：

<img
    src="images/photo.jpg"
    alt="一张风景照片"
    width="400"
    height="300"
>

表单 <form>

表单用于收集用户输入，是前后端交互的核心：

<form action="/submit" method="post">

    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>

    <label for="pwd">密码：</label>
    <input type="password" id="pwd" name="pwd">

    <label for="gender">性别：</label>
    <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
    </select>

    <button type="submit">注册</button>
</form>

常用输入类型

实际演示

表格 <table>

表格由行（<tr>）和单元格（<td> / <th>）组成：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>32</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>

合并单元格用 colspan（跨列）和 rowspan（跨行）：

<td colspan="2">合并两列</td>

多媒体

视频 <video>

<video src="movie.mp4" controls width="560">
    您的浏览器不支持视频播放。
</video>

音频 <audio>

<audio src="music.mp3" controls>
    您的浏览器不支持音频播放。
</audio>

嵌入页面 <iframe>

<iframe
    src="https://www.bilibili.com"
    width="560"
    height="315"
    allowfullscreen
></iframe>

HTML5 语义化标签

语义化标签让代码"见名知意"，对开发者、浏览器、搜索引擎都更友好：

<header>   页面头部 / 文章头部
<nav>       导航栏
<main>     页面主体内容（每页只有一个）
<article>  独立文章 / 内容块
<section>  文档中的章节
<aside>    侧边栏 / 补充内容
<footer>   页面底部（版权、联系方式等）
<figure>   配图区域
<figcaption> 配图的说明文字

实际页面结构示例

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

    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
        <aside>
            <h3>关于作者</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 我的博客</p>
    </footer>
</body>

常用字符实体

有些字符在 HTML 中有特殊含义（如 <、>），需要写成"实体"形式才能正常显示：

推荐学习资源

• MDN Web 文档 — 最权威的 HTML/CSS/JS 参考手册，developer.mozilla.org
• W3Schools — 适合初学者的交互式教程，w3schools.com
• 菜鸟教程 — 中文入门教程，runoob.com
• HTML Validator — W3C 官方 HTML 校验工具，validator.w3.org

给初学者的建议

1. 多动手写——打开记事本/VSCode，跟着教程敲代码，不要复制粘贴
2. 用开发者工具——在浏览器按 F12 查看任何网页的 HTML 结构
3. 先学 HTML 再学 CSS——骨架搭好再装修
4. 不要死记硬背——记住常用标签即可，生僻的随时查 MDN
5. 保持好奇——看到喜欢的网页，就用"查看源代码"研究它是怎么做的