版本: 3.1.0 文档中心

前端基石：HTML5 语义化架构

HTML（HyperText Markup Language，超文本标记语言）是构建所有网页的基础语言。它决定了网页的结构和内容。

超文本：超越了纯文本的限制。网页不仅包含文字，还能嵌入图片、音频、视频、超链接等丰富的内容。
标记语言：由一系列“标签”（Tag）组成的语言。浏览器通过解析这些预定义的标签，将内容渲染成我们看到的网页。

💡 行业最佳实践（W3C 标准） 现代 Web 开发提倡关注点分离，一个标准的网页由三部分组成：

结构（HTML）：定义网页的内容和骨架（如标题、段落、图片）。

表现（CSS）：负责网页的视觉样式（如颜色、布局、动画）。

行为（JavaScript）：控制网页的交互逻辑（如点击响应、数据请求）。

1. Hello World：第一个 HTML 页面

让我们从一个标准的 HTML5 模板开始：

<!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>欢迎来到 Web 的世界</h1>
    <p>Hello, World!</p>
  </body>
</html>

结构解析：

<!DOCTYPE html>：声明文档类型为 HTML5。这是必须的，它告诉浏览器以标准模式渲染页面。
<html>：根元素，lang="zh-CN" 有助于浏览器、输入法和屏幕阅读器正确识别页面语言。
<head>：页面的元数据（Meta Data），包含字符集、标题、引入的 CSS/JS 等，对用户不可见，但对浏览器解析和页面配置非常重要。
<body>：页面的主体内容，所有展示给用户的可见元素都写在这里。

⚠️ 注意：HTML 语法较为松散，标签不区分大小写，且某些标签不闭合浏览器也能容错渲染。但作为专业开发者，应始终保持标签小写并严格闭合，以确保代码的健壮性和可维护性。

2. 标签、元素与属性

标签（Tag）：由尖括号包围的关键词，通常成对出现，如 <p>（开始标签）和 </p>（结束标签）。部分标签是单标签（空元素），如 <br>、<img>。
元素（Element）：从开始标签到结束标签的所有代码，包含标签本身及其内容。例如 <p>这是一个段落。</p> 就是一个完整的段落元素。
属性（Attribute）：提供关于元素的附加信息，写在开始标签中，如 <img src="logo.png" alt="Logo">。推荐使用双引号包裹属性值。

2.1 HTML 注释

注释不会在浏览器中显示，主要用于向开发者解释代码逻辑，或在调试时暂时屏蔽部分代码。

<!-- 这是一个单行注释 -->

<!--
  这是一个多行注释
  浏览器解析时会自动忽略这些内容
-->

2.2 全局属性 (Global Attributes)

有一些属性几乎可以应用于所有的 HTML 标签，它们在前端开发中扮演着极其重要的角色：

class：类名。这是实际开发中最常用的属性，用于 CSS 批量应用样式或 JS 获取节点。与 id 的唯一性不同，多个元素可以共享同一个 class，一个元素也可以有多个 class（用空格隔开，如 class="btn btn-primary"）。
style：行内样式。直接在标签上写 CSS（如 <p style="color: red;">）。但在实际企业开发中不推荐，应尽量做到结构与表现分离。
title：提示文本。当鼠标悬停在元素上时，会弹出一个提示框显示文本。
hidden：隐藏元素。添加此属性后，元素将在页面上不可见（布尔属性，写上即生效）。

3. 核心 HTML 标签

3.1 文本与排版标签

标题：<h1> 到 <h6>。

🔍 SEO 提示：<h1> 代表页面主标题，一个页面最好只有一个 <h1>，这对于搜索引擎抓取非常重要。
段落：<p>
换行：<br>
水平线：<hr>

在 HTML 中，多个连续的空格或换行会被浏览器合并为一个空格。如果需要显示特殊字符（如 <、>、空格），需要使用HTML 实体（转义字符）：

空格： 
<：<
>：>

3.2 多媒体标签：图片、音频、视频

<!-- 图片标签：alt 属性对 SEO 和无障碍访问（a11y）极其重要 -->
<img src="images/logo.png" alt="网站Logo" width="200" height="100">

<!-- 音频标签 -->
<audio src="audio/music.mp3" controls></audio>

<!-- 视频标签 -->
<video src="video/movie.mp4" controls width="500"></video>

关键属性：

src：资源的 URL 路径（绝对路径或相对路径）。
alt：图片无法显示时的替代文本。专业站长必写，能大幅提升图片搜索的 SEO 排名。
controls：显示浏览器原生的播放控件。

3.3 超链接标签

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

href：指定要跳转的 URL。
target="_blank"：在新标签页中打开链接。

🛡️ 安全提示：使用 target="_blank" 时，建议加上 rel="noopener noreferrer" 以防止安全漏洞（钓鱼攻击）和性能问题。

3.4 列表标签

列表非常适合用于展示导航菜单或结构化数据。

<!-- 无序列表 (Unordered List) -->
<ul>
  <li>前端开发</li>
  <li>后端开发</li>
</ul>

<!-- 有序列表 (Ordered List) -->
<ol>
  <li>第一步：需求分析</li>
  <li>第二步：代码编写</li>
</ol>

🎨 设计师提示：现代网页设计中，列表默认的小圆点或数字通常会被 CSS 清除（list-style: none;），然后通过 CSS 自定义样式。在实际开发中尽量避免使用过时的 type 属性。

3.5 表格标签

表格应仅用于展示结构化的数据，绝对不要用于页面排版布局（那是 CSS Flexbox 和 Grid 的工作）。

<table border="1">
  <!-- 表头 -->
  <thead>
    <tr>
      <th>排名</th>
      <th>品牌</th>
    </tr>
  </thead>
  <!-- 表体 -->
  <tbody>
    <tr>
      <td>1</td>
      <td>Apple</td>
    </tr>
    <tr>
      <!-- colspan 用于跨列合并，rowspan 用于跨行合并 -->
      <td colspan="2" style="text-align: center;">暂无数据</td>
    </tr>
  </tbody>
</table>

3.6 布局标签与 HTML5 语义化

传统的网页布局大量使用 <div>（块级元素，独占一行）和 <span>（行内元素，不独占一行），它们本身没有特定的含义。

HTML5 引入了语义化标签，使得代码结构更清晰，对机器（搜索引擎、屏幕阅读器）更友好：

<header>：页眉
<nav>：导航链接
<main>：页面主要内容
<article>：独立的、完整的文章内容
<section>：文档中的区段
<footer>：页脚

3.7 块级元素与行内元素（核心排版概念）

在学习 CSS 布局之前，必须深刻理解 HTML 元素默认的显示行为，这是所有前端页面排版的物理基础：

块级元素（Block-level）：独占一行，宽度默认撑满父元素，可以设置宽高、内外边距。
- 常见标签：<div>, <p>, <h1>~<h6>, <ul>, <table>, <form>, <header>。
行内元素（Inline）：不会独占一行，宽度由内容撑开，直接设置宽高无效。
- 常见标签：<span>, <a>, <strong>, <em>。
行内块元素（Inline-block）：结合了两者的特点，不独占一行（可以和其他元素并排），但可以设置宽高。
- 常见标签：<img>, <input>, <button>, <select>。

3.8 内联框架（iframe）

用于在当前网页中嵌入另一个完全独立的网页。在企业级开发中，常用于嵌入第三方地图、第三方视频（如 B 站）、独立授权组件等。

<iframe src="https://www.bing.com/maps" width="600" height="400" frameborder="0" allowfullscreen></iframe>

⚠️ 安全提示：滥用 iframe 可能导致点击劫持（Clickjacking）等安全隐患，现代开发中常通过 sandbox 属性限制 iframe 内网页的权限。

3.9 表单标签

表单 <form> 是网页与用户交互、收集数据的核心。

<form action="/submit-api" method="post">
  <!-- label 的 for 属性与 input 的 id 绑定，点击文字也能聚焦输入框，提升了用户体验 -->
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  <br>

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

  <label>性别：</label>
  <input type="radio" id="male" name="gender" value="1">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="2">
  <label for="female">女</label>
  <br>

  <label for="city">城市：</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>
  <br>

  <label for="desc">自我介绍：</label>
  <textarea id="desc" name="desc" rows="4"></textarea>
  <br>

  <!-- 注意 button 的 type 属性 -->
  <button type="submit">提交注册</button>
  <button type="button">仅触发点击事件的普通按钮</button>
</form>

关键属性：

action：表单数据提交的目的地 URL。
method：提交方式。
- GET：参数拼接在 URL 后，不安全，有长度限制，常用于查询搜索。
- POST：数据放在 HTTP 请求体中，安全，无长度限制，常用于提交敏感或大量数据。
name：核心属性。表单数据提交到服务器端时，必须有 name 属性作为数据的键（Key）。
<button> 的 type（极易踩坑点）：在 <form> 内的 <button> 默认 type="submit"，点击会触发表单提交并刷新页面。如果只是想绑定 JS 点击事件，必须显式声明为 type="button"。

3.10 无障碍（a11y）：语义化的真正落点

很多初学者以为“语义化”主要是为了 SEO，其实它还有一个非常重要的目标：无障碍访问（Accessibility, a11y）。

无障碍的意思是：

让使用屏幕阅读器、键盘操作、低视力辅助功能的用户，也能尽可能顺畅地使用网页。

这件事和 HTML 的关系非常大，因为浏览器和辅助技术首先依赖的就是标签语义。

1. 不要什么都用 `<div>`

下面两段代码，视觉上可能都能做成按钮：

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

但语义完全不同。

<button> 天生可聚焦、可键盘触发、可被屏幕阅读器识别为按钮
<div> 本身没有这些语义，必须额外补很多行为和属性

所以在能用原生语义标签时，优先用原生标签。

2. 图片要写 `alt`

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

alt 不只是“图片加载失败时显示文字”，它还会被屏幕阅读器读出来。

常见写法建议：

纯信息图片：写清楚图片表达的内容
装饰性图片：可以写空字符串 alt=""
不要把文件名当作 alt

3. 表单控件要和 `label` 关联

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

这样做的好处有两个：

点击文字也能聚焦输入框
屏幕阅读器能更准确读出输入框用途

4. 页面标题层级要合理

<h1> 到 <h6> 不只是控制字体大小，更是在表达内容结构。

例如：

页面主标题用一个 <h1>
章节标题用 <h2>
小节标题用 <h3>

这有助于：

搜索引擎理解页面结构
屏幕阅读器快速按标题导航
文档层级更清晰

5. 键盘可访问性也很重要

有些用户并不主要依赖鼠标，而是使用键盘上的 Tab、Enter、方向键来操作页面。

所以前端开发时要特别注意：

可点击元素尽量使用原生按钮、链接、表单控件
不要随意去掉 focus 焦点样式
弹窗、菜单等交互组件要考虑键盘操作顺序

你可以把无障碍先理解成一种开发习惯：

写出“语义正确”的 HTML，往往就已经迈出了无障碍的第一步。

4. 核心概念辨析

4.1 `id` 与 `name` 的区别

id：元素的唯一标识符。在一个 HTML 页面中，id 必须是唯一的。常用于 CSS 样式选择器、JavaScript 获取元素，以及 <label> 的事件绑定。它仅在前端页面中起作用。
name：主要用于表单数据提交。只有设置了 name 属性的表单元素，其数据才会被提交到服务器。多个单选框（radio）或复选框（checkbox）可以通过共享同一个 name 属性来进行分组。

4.2 `URL`、`src` 与 `href` 的区别

URL (Uniform Resource Locator)：统一资源定位符，即我们在浏览器地址栏看到的“网址”，是网络资源的绝对或相对路径规则。
src (Source)：表示资源嵌入。常用于 <img>、<script>、<video> 等标签。当浏览器解析到 src 时，会暂停其他 HTML 代码的解析，优先去下载并执行该资源。这就是为什么我们通常把体积较大的 <script> 放在 <body> 底部的原因，以防阻塞页面渲染。
href (Hypertext Reference)：表示超文本引用。常用于 <a>、<link> 标签。它用于在当前文档和目标资源之间建立链接关系。当浏览器解析到 <link href="style.css"> 时，会并行下载 CSS 文件，不会阻塞 HTML 结构的解析。

5. `<head>` 中的隐藏黑科技

<head> 标签不仅包含网页标题，更是搜索引擎抓取网页信息、浏览器优化渲染的“核心阵地”。在专业的网站开发中，这里会配置大量的 meta 信息：

<head>
  <!-- 1. 字符集与视口（现代移动端网页标配） -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 2. 网页标题（最重要的 SEO 权重因素） -->
  <title>某某官方网站 - 专业的前端开发教程</title>

  <!-- 3. 网站图标 (Favicon)，展示在浏览器标签页上的小图标 -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">

  <!-- 4. SEO 关键词与描述 (TDK优化：Title, Description, Keywords) -->
  <meta name="keywords" content="HTML, 前端, Web开发, 教程, 新手入门">
  <meta name="description" content="这是一篇为初学者准备的专业 HTML 基础教程，涵盖标签使用、SEO 优化与企业级开发规范。">

  <!-- 5. 引入外部 CSS 样式表 -->
  <link rel="stylesheet" href="styles.css">
</head>