HTML 基础教程 | This is Sylas's blog

HTML 全称 HyperText Markup Language（超文本标记语言），它通过一套”内容标记规则”，用不同的标签告诉浏览器：这是一段标题、一个段落、一张图片或一个链接。

一个完整 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"> — 页面根元素，lang 指定语言
<head> — 页面元信息（编码、标题、SEO 信息、样式设置）
<body> — 用户可见的页面内容
<meta charset="UTF-8"> — 指定字符编码，防止乱码
<meta name="viewport"> — 让页面在移动设备正常显示

常用标签

标题与段落

使用 h1 到 h6 表示标题层级：

<h1>前端学习路线</h1>
<h2>HTML</h2>
<p>HTML 是网页的结构。</p>

一个页面通常只有一个 h1，标题层级应该反映内容结构而非视觉效果。

文本格式化

<p><strong>重要内容</strong>（加粗），<em>强调内容</em>（斜体），<code>&lt;code&gt;</code>（代码片段），<mark>高亮</mark>，<small>小号文字</small></p>

链接

<a href="https://developer.mozilla.org/zh-CN/">普通链接</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">新窗口打开</a>
<a href="#form">页内锚点跳转</a>

target="_blank" 需要配合 rel="noopener noreferrer" 以确保安全。

图片

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

alt 属性在图片加载失败时显示，屏幕阅读器会朗读，搜索引擎也会参考。纯装饰图片使用 alt=""。

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

列表

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

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

表格

<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>

语义化标签

语义化是用合适的标签表达内容的含义，而不是只用 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>&copy; 2026</p>
</footer>

常用语义化标签：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。

好处是：代码可读性更强、搜索引擎更容易理解页面结构、屏幕阅读器更易导航、维护更方便。

表单

<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> 的 for 对应 <input> 的 id，点击标签可聚焦输入框。按钮务必写 type，否则默认为 submit。

SEO 与可访问性

SEO 基础关注点：

<title> 和 <meta name="description"> 直接影响搜索展示
h1 包含页面主题，标题层级不跳跃
链接文本有实际含义（不要写”点击这里”）
图片写有意义的 alt

可访问性基础：

图片写 alt、表单控件加 <label>
按钮用 <button>，链接用 <a>
不要只用颜色表示状态

常见错误

<!-- 错误：缺少 alt -->
<img src="/avatar.png" />

<!-- 错误：标题层级跳跃 -->
<h1>标题</h1>
<h4>子标题</h4>

<!-- 错误：用 div 代替语义标签 -->
<div class="header">
  <div class="nav">导航</div>
</div>

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>

总结

HTML 的核心不是”记住所有标签”，而是”用合适的结构表达内容”。学习 CSS 和 JavaScript 时，HTML 始终是基础——结构越扎实，样式越好写，交互越好维护。