HTML 基础教程

建议学习 60 分钟更新于 2023/2/16

HTML 是网页的骨架。它负责描述页面中有哪些内容、这些内容之间是什么关系，以及浏览器、搜索引擎、辅助技术应该如何理解这些内容。

学习前端时，很多人会先被 CSS 动画、JavaScript 交互或框架吸引，但真正稳定的网页体验，通常从一份清晰、语义正确的 HTML 开始。

HTML 是什么

HTML 全称是 HyperText Markup Language，中文通常叫超文本标记语言。

它不是编程语言，因为它不负责计算逻辑，也没有变量、循环、条件判断这些能力。HTML 更像是一套“内容标记规则”：你用不同标签告诉浏览器，这是一段标题、这是一段正文、这是一个链接、这是一个表单、这是一个导航区域。

比如：

<h1>HTML 基础教程</h1>
<p>这是一段介绍 HTML 的正文。</p>
<a href="https://developer.mozilla.org/">查看 MDN 文档</a>

浏览器读取这些标签后，会把它们渲染成用户看到的页面。

一个最小 HTML 页面

最小但完整的 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>
    <h1>你好，HTML</h1>
    <p>这是我的第一个网页。</p>
  </body>
</html>

这段代码里每一部分都有作用。

<!doctype html>：告诉浏览器使用现代 HTML 标准解析页面。
<html>：页面根元素，所有内容都在里面。
lang="zh-CN"：声明页面主要语言，有利于搜索引擎和屏幕阅读器理解页面。
<head>：放页面元信息，比如编码、标题、SEO 信息、样式引用。
<body>：放用户真正能看到的页面内容。
<meta charset="UTF-8">：指定字符编码，避免中文乱码。
<meta name="viewport">：让页面在移动端按设备宽度显示。
<title>：浏览器标签页标题，也会影响搜索结果展示。

标签、元素和属性

HTML 由标签组成。一个完整结构通常叫元素。

<a href="https://example.com" target="_blank">访问示例网站</a>

这里：

<a> 是开始标签。
</a> 是结束标签。
访问示例网站 是元素内容。
href 和 target 是属性。
https://example.com 和 _blank 是属性值。

有些标签没有结束标签，常见的有：

<img src="/avatar.png" alt="头像" />
<input type="text" name="username" />
<br />
<hr />

这类标签通常用来插入资源、输入控件或分隔内容。

标题与段落

标题使用 h1 到 h6，数字越小层级越高。

<h1>前端学习路线</h1>

<h2>HTML</h2>
<p>HTML 负责页面结构。</p>

<h2>CSS</h2>
<p>CSS 负责视觉样式。</p>

<h2>JavaScript</h2>
<p>JavaScript 负责交互逻辑。</p>

写标题时要注意：

一个页面通常只放一个 h1。
不要为了字体大小乱用标题层级。
标题层级应该表达内容结构，而不是视觉样式。
如果只是想让文字变大，应该交给 CSS，而不是滥用 h1。

段落使用 <p>：

<p>HTML 是前端开发的基础，它决定了网页内容的结构。</p>

不要用很多 <br> 来制造段落间距。段落应该用 <p>，间距交给 CSS。

文本语义标签

HTML 里有一些标签用来表达文本含义。

<p>
  学习 HTML 时，<strong>语义化</strong> 比单纯记标签更重要。
</p>

<p>
  <em>语义化</em> 的意思是：用合适的标签表达合适的内容。
</p>

<p>
  可以使用 <code>&lt;code&gt;</code> 标签展示代码片段。
</p>

常见文本标签：

<strong>：重要内容，通常显示为加粗。
<em>：强调内容，通常显示为斜体。
<code>：代码片段。
<mark>：标记或高亮内容。
<small>：补充说明、小字信息。

不要只从“长什么样”理解标签。比如 <strong> 不只是加粗，它表示内容重要；如果只是想加粗，应该用 CSS。

链接

链接使用 <a> 标签。

<a href="https://developer.mozilla.org/zh-CN/">MDN Web 文档</a>

打开新窗口：

<a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer">
  在新窗口打开 MDN
</a>

target="_blank" 会在新标签页打开链接。为了安全，建议同时加上：

rel="noopener noreferrer"

页面内跳转也可以使用链接：

<a href="#form">跳到表单部分</a>

<h2 id="form">表单部分</h2>

链接文字应该具体，不建议写成：

<a href="/article">点击这里</a>

更好的写法是：

<a href="/article">阅读 HTML 语义化教程</a>

图片

图片使用 <img> 标签。

<img src="/assets/images/logo.png" alt="站点 Logo" />

src 是图片地址，alt 是替代文本。

alt 很重要：

图片加载失败时会显示。
屏幕阅读器会读出它。
搜索引擎也会参考它理解图片内容。

如果图片只是装饰，没有实际含义，可以写空 alt：

<img src="/assets/images/decorative-line.png" alt="" />

常见图片写法：

<figure>
  <img src="/assets/images/html-page.png" alt="HTML 页面结构示意图" />
  <figcaption>一个典型 HTML 页面由 head 和 body 组成。</figcaption>
</figure>

figure 和 figcaption 适合图片、图表、代码结果这类带说明的内容。

列表

无序列表使用 <ul>，适合没有先后顺序的内容。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

有序列表使用 <ol>，适合步骤、排名、流程。

<ol>
  <li>创建 index.html</li>
  <li>编写页面结构</li>
  <li>在浏览器中打开页面</li>
</ol>

列表可以嵌套：

<ul>
  <li>
    前端基础
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    前端框架
    <ul>
      <li>React</li>
      <li>Vue</li>
    </ul>
  </li>
</ul>

表格

表格适合展示二维数据，不适合用来做页面布局。

<table>
  <caption>
    前端技术职责
  </caption>
  <thead>
    <tr>
      <th>技术</th>
      <th>职责</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>描述页面结构</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>控制页面样式</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>实现页面交互</td>
    </tr>
  </tbody>
</table>

表格常见标签：

<table>：表格。
<caption>：表格标题。
<thead>：表头区域。
<tbody>：主体区域。
<tr>：一行。
<th>：表头单元格。
<td>：普通单元格。

语义化布局

早期网页经常用大量 <div> 搭结构。现在更推荐语义化标签。

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

<main>
  <article>
    <h2>HTML 基础教程</h2>
    <p>这是一篇介绍 HTML 的文章。</p>
  </article>
</main>

<footer>
  <p>© 2026 veyliss</p>
</footer>

常见语义化标签：

<header>：页面或区块头部。
<nav>：导航区域。
<main>：页面主体，一个页面通常只有一个。
<article>：独立文章、博客、评论等内容。
<section>：页面中的一个主题区块。
<aside>：侧边栏、补充信息、推荐内容。
<footer>：页面或区块底部。

语义化的好处：

代码更容易读。
搜索引擎更容易理解页面结构。
屏幕阅读器更容易导航。
后期维护更清晰。

div 和 span

div 和 span 没有特殊语义，主要用于结构包裹和样式控制。

div 是块级容器：

<div class="card">
  <h2>文章标题</h2>
  <p>文章摘要内容。</p>
</div>

span 是行内容器：

<p>当前状态：<span class="status">已发布</span></p>

建议优先考虑有没有更合适的语义标签。如果没有，再使用 div 或 span。

表单基础

表单用于收集用户输入。

<form action="/submit" method="post">
  <div>
    <label for="username">用户名</label>
    <input id="username" name="username" type="text" required />
  </div>

  <div>
    <label for="email">邮箱</label>
    <input id="email" name="email" type="email" required />
  </div>

  <div>
    <label for="message">留言</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>

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

表单里最重要的是 label 和输入控件之间的关系：

<label for="email">邮箱</label>
<input id="email" name="email" type="email" />

for 对应 input 的 id。这样用户点击“邮箱”文字时，也能聚焦输入框；屏幕阅读器也能知道这个输入框的含义。

常见输入类型：

<input type="text" />
<input type="email" />
<input type="password" />
<input type="number" />
<input type="date" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />

下拉选择：

<label for="category">分类</label>
<select id="category" name="category">
  <option value="frontend">前端</option>
  <option value="backend">后端</option>
  <option value="database">数据库</option>
</select>

按钮类型也要写清楚：

<button type="submit">提交</button>
<button type="button">普通按钮</button>
<button type="reset">重置</button>

在表单中，如果按钮没有写 type，默认可能会被当成提交按钮，容易造成误提交。

音频和视频

HTML 支持直接嵌入音频和视频。

<audio controls src="/assets/audio/intro.mp3">
  当前浏览器不支持音频播放。
</audio>

视频：

<video controls width="640" poster="/assets/images/video-cover.jpg">
  <source src="/assets/videos/demo.mp4" type="video/mp4" />
  当前浏览器不支持视频播放。
</video>

常见属性：

controls：显示播放控件。
autoplay：自动播放。
muted：静音。
loop：循环播放。
poster：视频封面。

实际项目里不要轻易自动播放有声音的视频，这会打扰用户。

head 中的常用配置

head 里放的是页面元信息。一个常见写法如下：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="系统学习 HTML 页面结构、常用标签和语义化写法。" />
  <title>HTML 基础教程</title>

  <link rel="icon" href="/favicon.svg" />
  <link rel="stylesheet" href="/assets/styles/style.css" />
</head>

常见配置：

charset：字符编码。
viewport：移动端适配。
description：页面描述，影响搜索结果摘要。
title：页面标题。
icon：站点图标。
stylesheet：外部 CSS 文件。

SEO 基础

HTML 写得好，会让搜索引擎更容易理解页面。

基础 SEO 可以先关注这些：

<title>HTML 基础教程 | veyliss</title>
<meta name="description" content="从页面结构、常用标签、语义化、表单到 SEO，系统学习 HTML 基础。" />

页面内容里也要注意：

h1 清晰表达页面主题。
标题层级不要跳。
链接文字要具体。
图片要写合适的 alt。
文章内容结构要清楚。
不要用图片代替重要文字。

对于博客文章，一个简单结构可以是：

<article>
  <header>
    <h1>HTML 基础教程</h1>
    <p>学习 HTML 页面结构、常用标签和语义化写法。</p>
  </header>

  <section>
    <h2>HTML 是什么</h2>
    <p>HTML 是用于描述网页内容结构的标记语言。</p>
  </section>
</article>

可访问性基础

可访问性是让更多人可以顺利使用你的页面，包括使用屏幕阅读器、键盘导航、放大显示、弱视模式的用户。

刚开始可以先做到这些：

图片写好 alt。
表单控件配套 label。
按钮就用 <button>，链接就用 <a>。
不要只靠颜色表达状态。
页面标题结构清晰。
交互元素可以用键盘访问。

错误示例：

<div onclick="submitForm()">提交</div>

更好的写法：

<button type="button" onclick="submitForm()">提交</button>

如果是跳转页面，应该使用链接：

<a href="/blog/">进入博客</a>

不要用 div 假装按钮或链接。原生标签自带很多浏览器能力，能少踩很多坑。

常见错误

忘记写 alt

<img src="/avatar.png" />

更好的写法：

<img src="/avatar.png" alt="用户头像" />

标题层级混乱

<h1>文章标题</h1>
<h4>第一部分</h4>
<h2>第二部分</h2>

更好的写法：

<h1>文章标题</h1>
<h2>第一部分</h2>
<h2>第二部分</h2>

使用 div 代替所有标签

<div class="header">
  <div class="nav">导航</div>
</div>

更好的写法：

<header>
  <nav>导航</nav>
</header>

表单没有 label

<input type="email" placeholder="请输入邮箱" />

更好的写法：

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

placeholder 不是 label 的替代品。用户输入后，placeholder 会消失，而 label 会一直说明字段含义。

完整页面示例

下面是一个简单但结构完整的 HTML 页面。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="一个使用语义化 HTML 编写的个人主页示例。" />
    <title>个人主页示例</title>
  </head>
  <body>
    <header>
      <h1>veyliss</h1>
      <nav aria-label="主导航">
        <a href="/">首页</a>
        <a href="/blog/">博客</a>
        <a href="/knowledge/">知识库</a>
        <a href="/about/">关于</a>
      </nav>
    </header>

    <main>
      <article>
        <header>
          <h2>构建、记录、分享</h2>
          <p>探索技术，记录成长，分享所学。</p>
        </header>

        <section>
          <h3>最近文章</h3>
          <ul>
            <li>
              <a href="/blog/redis/">Redis 基础知识整理</a>
            </li>
            <li>
              <a href="/python/python_basics_01/">Python 基础教程</a>
            </li>
          </ul>
        </section>

        <section>
          <h3>联系我</h3>
          <form action="/contact" method="post">
            <div>
              <label for="name">昵称</label>
              <input id="name" name="name" type="text" required />
            </div>

            <div>
              <label for="message">留言</label>
              <textarea id="message" name="message" rows="4"></textarea>
            </div>

            <button type="submit">发送</button>
          </form>
        </section>
      </article>
    </main>

    <footer>
      <p>写给现在的自己，也留给未来某个刚好需要的人。</p>
    </footer>
  </body>
</html>

这个示例里包含了：

完整文档结构。
页面元信息。
语义化布局标签。
导航链接。
文章内容。
列表。
表单。
页脚。

它不追求视觉效果，但结构是健康的。后续加 CSS 和 JavaScript 时，就可以在这个基础上继续扩展。

学习建议

学习 HTML 时，不要只背标签。更重要的是建立判断：

这块内容是不是页面主体？
这块内容是不是独立文章？
这组链接是不是导航？
这个输入框有没有对应的说明？
这个图片有没有表达含义？
这个标题层级是否合理？

如果你能回答这些问题，HTML 就不再是一堆标签，而是一种组织信息的方式。

小结

HTML 的核心不是“记住所有标签”，而是“用合适的结构表达内容”。

刚入门时，优先掌握这些内容：

基础页面结构。
标题、段落、链接、图片、列表。
表格和表单。
语义化布局。
head 元信息。
SEO 与可访问性基础。

后续学习 CSS 和 JavaScript 时，HTML 仍然是基础。结构越清楚，样式越容易写，交互也越容易维护。

HTML 基础教程

HTML 是什么

一个最小 HTML 页面

推荐的学习文件结构

标签、元素和属性

标题与段落

文本语义标签

链接

图片

列表

表格

语义化布局

div 和 span

表单基础

音频和视频

head 中的常用配置

SEO 基础

可访问性基础

常见错误

忘记写 alt

标题层级混乱

使用 div 代替所有标签

表单没有 label

完整页面示例

学习建议

小结