【HTML Living Standard 01】HTML基础概述

📗 前端交给AI写就行了，但为了写代码时随心所欲、游刃有余，故再次学习一下。

🔎 本文的图片内容是Nano Banana Pro画的。

文章目录

一、HTML概述
二、HTML发展历史
三、学习资源
[四、HTML 的组成](#四、HTML 的组成)
- [4.1 核心概念与文档结构](#4.1 核心概念与文档结构)
- - [4.11 基础骨架 (Boilerplate)](#4.11 基础骨架 (Boilerplate))
- [4.2 标签全集 (按功能分类)](#4.2 标签全集 (按功能分类))
- - [4.21 文档元数据 (Metadata)](#4.21 文档元数据 (Metadata))
  - [4.22 区块与语义结构 (Sectioning & Structure)](#4.22 区块与语义结构 (Sectioning & Structure))
  - [4.23 文本内容 (Text Content)](#4.23 文本内容 (Text Content))
  - [4.24 行内语义 (Inline Text Semantics)](#4.24 行内语义 (Inline Text Semantics))
  - [4.25 图片与多媒体 (Image & Multimedia)](#4.25 图片与多媒体 (Image & Multimedia))
  - [4.26 表格 (Table)](#4.26 表格 (Table))
  - [4.27 表单 (Forms)](#4.27 表单 (Forms))
  - [4.28 脚本与嵌入 (Scripting)](#4.28 脚本与嵌入 (Scripting))
  - [4.29 交互元素 (Interactive Elements)](#4.29 交互元素 (Interactive Elements))
- [4.3 必备的现代特性 (Modern APIs)](#4.3 必备的现代特性 (Modern APIs))
- - [4.31 Popover API (弹出层)](#4.31 Popover API (弹出层))
  - [4.32 Native Lazy Loading (原生懒加载)](#4.32 Native Lazy Loading (原生懒加载))
  - [4.33 `<dialog>` 对话框](#4.33 <dialog> 对话框)
- [4.4 全局属性 (Global Attributes)](#4.4 全局属性 (Global Attributes))
- [4.5 已废弃标签 (Obsolete - 千万别用)](#4.5 已废弃标签 (Obsolete - 千万别用))

一、HTML概述

HTML（超文本标记语言------HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页①内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的②表现与展示效果（如 CSS），或③功能与行为（如 JavaScript）。

超文本指的是能够通过链接跳转到其他内容的文本，它让信息之间建立关联，使阅读不再是线性的，而是可以自由导航的。

标记语言是一类用特定符号或标签来描述内容结构和语义的语言，它本身不负责展示效果，而是告诉系统"这些内容是什么"。如我写本文使用的markdown就是一种轻量的标记语言（但它最终也是转为html，你们才能再网页上看到本文）。

二、HTML发展历史

与过去的 "HTML5" 版本号概念不同，现在的 HTML 是一个 "活的标准"（Living Standard ，由 WHATWG 持续维护和更新。这意味着没有 "HTML6"，只有不断演进的 HTML。本文涵盖了最新的现代特性（如 popover、<search>、<dialog>）以及所有标准标签。

年份	阶段	关键事件	关键词
1991	诞生期	Tim Berners-Lee 发布 HTML Tags	CERN, 纯文本, 18个标签
1995	标准化初期	IETF 发布 HTML 2.0	RFC 1866, 第一个正式标准
1997	浏览器大战	HTML 3.2 & 4.0 发布	Netscape vs IE, 混乱, 表格布局
2000	XHTML 歧途	W3C 转向 XHTML	严格, XML, 不兼容, 停滞
2004	起义	WHATWG 成立	Opera/Mozilla/Apple 联合, 反抗 W3C
2014	HTML5 时代	W3C 正式推荐 HTML5	语义化, 多媒体, Web Apps
2019	大一统	`HTML Living Standard`	W3C 放弃控制权, `WHATWG` 掌舵

早期的就不展开了，看看比较重要的。

🟢 革命：WHATWG 与 HTML5 的诞生 (2004 - 2014)
背景：浏览器厂商的反击，这是 HTML 历史上最精彩的一页。

2004年：W3C 闭门造车搞 XHTML 2.0，忽略了 Web 需要更多应用程序功能（如视频、音频、绘图）的需求。
WHATWG 成立 ：Opera 、Mozilla (Firefox) 和 Apple (Safari) 联合成立了 WHATWG (Web Hypertext Application Technology Working Group)。他们的理念是："Web 应该是应用程序平台，且必须向后兼容"。
分裂：W3C 继续搞 XHTML 2.0，WHATWG 则开发名为 "Web Applications 1.0" 的规范（后来改名为 HTML5）。
胜负已分：Google 后来也加入了 WHATWG。由于浏览器厂商不支持，W3C 的 XHTML 2.0 无人问津。
2009年：W3C 承认失败，宣布停止 XHTML 2.0 开发，转而采纳 WHATWG 的标准。
2014年 ：W3C 正式发布 HTML5 推荐标准。HTML 进入了黄金时代，Flash 开始退出历史舞台，Canvas、Video、Local Storage 等特性让 Web 变得无比强大。

🟢 现代：HTML Living Standard (2019 - 至今)

背景：两个标准的终结 ，虽然 W3C 采纳了 HTML5，但随后的几年里，世界上存在两个 HTML 标准：

W3C 标准：倾向于发布"快照"版本（如 HTML 5.1, HTML 5.2），更新慢，流程繁琐。
WHATWG 标准 ：实行 "Living Standard"（活的标准），只要浏览器厂商达成一致，随时更新标准，没有版本号。

这导致了开发者的困惑：到底听谁的？

2019年 5月：W3C 和 WHATWG 签署了《谅解备忘录》。
结果：W3C 正式放弃发布独立的 HTML 和 DOM 标准。
现状：WHATWG 的 HTML Living Standard 成为唯一的官方版本。

这意味着：

不再有 HTML6：以后不会有 HTML6、HTML7。HTML 将像 Chrome 浏览器一样，处于不断的小幅更新和迭代中。
新特性持续加入 ：如 <dialog> (对话框)、popover (弹出层)、<search> 等新标签都是直接加入 Living Standard 中的。

三、学习资源

🟢 HTML Living Standard（WHATWG 官方），这是唯一的官方文档，但它是规范，不是教学：https://html.spec.whatwg.org/

中文版本：https://whatwg-cn.github.io/html/

🟢MDN Web Docs（最权威的教学文档），Mozilla 维护，内容跟随最新标准实时更新：https://developer.mozilla.org/zh-CN/，css和js也有的。

🟢AI

📗我的这个专栏😆

四、HTML 的组成

这里只写了HTML的部分，不包含CSS和JS。

😆本文会大概把每部分都简单写一下，但不能展开，太多了，每部分的具体内容见本文的后续文章。

4.1 核心概念与文档结构

4.11 基础骨架 (Boilerplate)

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Living Standard 示例</title>
    
    <link rel="preload" href="style.css" as="style">
    <link rel="stylesheet" href="style.css">
    
    <script src="app.js" defer></script>
</head>

<body>
    <header>
        <h1>网站标题</h1>
    </header>
    
    <main>
        </main>

    <footer>
        </footer>
</body>
</html>

4.2 标签全集 (按功能分类)

以下是 HTML Living Standard 中定义的几乎所有的标准标签。

4.21 文档元数据 (Metadata)

这些标签通常位于 <head> 中，用于设置页面属性。

标签	描述	备注
`<html>`	根元素	必须包含 `lang` 属性。
`<head>`	元数据容器	包含不在页面显示的机器可读信息。
`<title>`	页面标题	浏览器标签页上显示的文字。
`<base>`	基准 URL	指定页面所有相对链接的基准路径。
`<link>`	外部资源	连接 CSS、Favicon、预加载资源等。
`<meta>`	元信息	字符集、视口设置、SEO 描述、CSP 安全策略。
`<style>`	内部样式	包含 CSS 代码。

4.22 区块与语义结构 (Sectioning & Structure)

用于构建页面的"骨架"和布局。推荐使用语义化标签，而非全部用 div。

标签	描述	备注
`<body>`	文档主体	包含所有可见内容。
`<article>`	独立文章	可独立分发的结构（如博客文章、新闻）。
`<section>`	通用章节	具有主题性的内容分组，通常带有一个标题。
`<nav>`	导航	包含主要导航链接。
`<aside>`	侧边栏	与周围内容间接相关的内容（广告、侧栏）。
`<h1>` - `<h6>`	标题	h1 等级最高，h6 最低。h1 一个页面通常建议只用一次。
`<hgroup>`	标题组	组合标题和副标题（在最新标准中已回归）。
`<header>`	头部	介绍性内容或导航链接组。
`<footer>`	页脚	版权信息、相关链接等。
`<address>`	联系信息	作者或文章的联系方式（通常斜体显示）。
`<main>`	主要内容	每个页面应只有一个，且不可包含在 header/footer 中。
`<search>`	搜索 (新)	2024/2025 标准化。专门用于包裹搜索表单的语义容器。

代码示例：现代语义化布局

html 复制代码

<header>
    <nav>
        <a href="/">首页</a>
    </nav>
</header>

<main>
    <search>
        <form action="/search">
            <input type="search" name="q" placeholder="搜索...">
            <button>搜索</button>
        </form>
    </search>

    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>

4.23 文本内容 (Text Content)

用于组织段落、列表等块级内容。

标签	描述	备注
`<p>`	段落	文本的最基本单位。
`<hr>`	分隔线	语义上表示主题的转换。
`<pre>`	预格式化文本	保留空格和换行（常用于代码块）。
`<blockquote>`	块引用	引用自其他来源的长文本。
`<ol>`	有序列表	1. 2. 3.
`<ul>`	无序列表	• • •
`<li>`	列表项	ol 和 ul 的子元素。
`<dl>`	定义列表	包含术语和描述。
`<dt>`	术语	definition term。
`<dd>`	描述	definition description。
`<figure>`	独立媒体块	通常包含图片、图表或代码，可带标题。
`<figcaption>`	媒体标题	figure 的标题。
`<div>`	通用容器	无语义的块级容器，仅用于布局或样式钩子。

4.24 行内语义 (Inline Text Semantics)

用于修饰文本片段。

标签	描述	2025 最佳实践
`<a>`	超链接	核心标签。
`<em>`	强调	语义上的重读（通常斜体）。
`<strong>`	重要	语义上的重要性（通常加粗）。
`<small>`	小号文本	用于免责声明、版权声明等。
`<s>`	删除线	表示不再准确的内容。
`<cite>`	引用出处	作品标题（书名、电影名）。
`<q>`	短引用	行内引用，浏览器会自动加引号。
`<dfn>`	定义	定义一个术语。
`<abbr>`	缩写	如 `<abbr title="World Health Organization">WHO</abbr>`。
`<ruby>`	注音	包含 `<rt>` (注音文本) 和 `<rp>` (降级括号)。
`<data>`	机器可读数据	`<data value="100">一百</data>`。
`<time>`	时间	`<time datetime="2025-11-30">今天</time>`。
`<code>`	代码片段	计算机代码。
`<var>`	变量	数学或编程变量。
`<samp>`	样本输出	程序输出的示例。
`<kbd>`	键盘输入	用户按键，如 `<kbd>Ctrl</kbd> + <kbd>C</kbd>`。
`<sub>`	下标	H<sub>2</sub>O。
`<sup>`	上标	m<sup>2</sup>。
`<i>`	替代语调	现用于图标（Icon font）或技术术语，不单纯指斜体。
`<b>`	关键词	引起注意（如摘要中的关键词），不单纯指加粗。
`<u>`	下划线	仅用于拼写错误标记或非链接的特殊样式，避免混淆。
`<mark>`	高亮	像用荧光笔标记的文本。
`<span>`	通用行内容器	无语义，用于通过 CSS 设置样式。
`<br>`	换行	仅用于诗歌或地址，不要用来增加段落间距。
`<wbr>`	建议换行点	指示浏览器在此处可以换行。

4.25 图片与多媒体 (Image & Multimedia)

标签	描述	备注
`<img>`	图片	必须加 `alt` 属性。支持 `loading="lazy"`。
`<iframe >`	内嵌框架	嵌入其他网页。
`<embed>`	嵌入点	外部非 HTML 内容。
`<object>`	外部对象	类似 embed，但支持 fallback 内容。
`<video>`	视频	支持 MP4, WebM 等。
`<audio>`	音频	支持 MP3, Ogg 等。
`<source>`	媒体源	为 video/audio 指定多种格式。
`<track>`	字幕/轨道	字幕文件 (.vtt)。
`<map>`	图像映射	定义图片上的点击区域。
`<area>`	区域	map 内部的可点击区域。
`<picture>`	响应式图片	根据屏幕尺寸加载不同图片源。

4.26 表格 (Table)

标签	描述
`<table>`	表格容器
`<caption>`	表格标题
`<colgroup>`	列组
`<col>`	列属性定义
`<thead>`	表头区域
`<tbody>`	表体区域
`<tfoot>`	表尾区域
`<tr>`	表格行
`<th>`	表头单元格 (默认加粗居中)
`<td>`	数据单元格

4.27 表单 (Forms)

标签	描述	备注
`<form>`	表单容器
`<label>`	标签	必须通过 `for` 属性关联控件，提升可访问性。
`<input>`	输入框	极其强大，包含 text, password, checkbox, radio, date, file 等类型。
`<button>`	按钮	推荐用此标签代替 `input type="submit"`。
`<select>`	下拉菜单
`<datalist>`	自动补全	为 input 提供预定义选项。
`<optgroup>`	选项分组	select 内部的分组。
`<option>`	选项
`<textarea>`	多行文本
`<output>`	计算结果
`<progress>`	进度条	确定性的任务进度。
`<meter>`	刻度/度量	标量测量（如磁盘使用率）。
`<fieldset>`	表单分组	加上边框的分组。
`<legend>`	分组标题	fieldset 的标题。

4.28 脚本与嵌入 (Scripting)

标签	描述	备注
`<script>`	脚本	支持 JS, Modules (`type="module"`).
`<noscript>`	无脚本回退	当 JS 被禁用时显示的内容。
`<template>`	模板	内容在加载时隐藏，用于 JS 动态克隆。
`<slot>`	插槽	Web Components 核心，用于占位。
`<canvas>`	绘图画布	配合 JS 进行 2D/3D 绘图。

4.29 交互元素 (Interactive Elements)

🪄🪄值得关注 的部分，原生 HTML 已经具备了许多以前需要 JS 才能实现的功能。

标签	描述	现代特性说明
`<details>`	折叠/展开	原生手风琴效果。
`<summary>`	摘要	details 可见的标题。
`<dialog>`	模态对话框	配合 `.showModal()` 方法使用，自带遮罩层和焦点管理。

4.3 必备的现代特性 (Modern APIs)

这是最近标准化的一个全局属性，不需要复杂的 JavaScript 即可实现提示框、菜单。

html 复制代码

<button popovertarget="my-popup">打开菜单</button>

<div id="my-popup" popover>
    <p>这是一个原生的弹出层！</p>
    <p>2025年，我们不再需要第三方库来实现这个。</p>
</div>

4.32 Native Lazy Loading (原生懒加载)

现在 <img> 和 <iframe> 都支持。

html 复制代码

<img src="large-photo.jpg" loading="lazy" alt="风景图" width="800" height="600">

4.33 `<dialog>` 对话框

取代了传统的 div 模拟模态框。

html 复制代码

<dialog id="confirmDialog">
  <form method="dialog">
    <p>你确定要删除这些数据吗？</p>
    <button value="cancel">取消</button>
    <button value="confirm">确认</button>
  </form>
</dialog>

<script>
    const dialog = document.getElementById('confirmDialog');
    // 显示模态框（带遮罩背景）
    dialog.showModal(); 
</script>

4.4 全局属性 (Global Attributes)

这些属性可以用在任何 HTML 标签上。

class: CSS 类名。
id: 唯一标识符。
style: 行内样式（尽量少用，推荐 CSS 文件）。
title: 咨询性文本（鼠标悬停提示）。
lang: 元素内容的语言。
data-*: 自定义数据属性 。例如 data-user-id="123"，JS 可通过 dataset.userId 访问。
hidden: 隐藏元素（类似 display: none）。
tabindex: 控制 Tab 键的焦点顺序。
contenteditable: 让元素变为可编辑状态。
inert: (新) 禁用元素及其所有子元素的交互（无法点击、无法聚焦），常用于构建无障碍界面。
popover: (新) 将元素标记为弹出式内容。

4.5 已废弃标签 (Obsolete - 千万别用)

HTML Living Standard 明确列出了以下"过时"标签，现代开发中严禁使用，全部应由 CSS 代替：

<center> (用 CSS text-align: center)
<font> (用 CSS font-family, color)
<marquee> (跑马灯，不仅过时而且不仅好用)
<blink> (闪烁文字)
<frameset>, <frame> (用 <iframe> 或服务器端包含)
<big>, <strike>, <tt>

【HTML Living Standard 01】HTML基础概述

文章目录

一、HTML概述

二、HTML发展历史

三、学习资源

四、HTML 的组成

4.1 核心概念与文档结构

4.11 基础骨架 (Boilerplate)

4.2 标签全集 (按功能分类)

4.21 文档元数据 (Metadata)

4.22 区块与语义结构 (Sectioning & Structure)

4.23 文本内容 (Text Content)

4.24 行内语义 (Inline Text Semantics)

4.25 图片与多媒体 (Image & Multimedia)

4.26 表格 (Table)

4.27 表单 (Forms)

4.28 脚本与嵌入 (Scripting)

4.29 交互元素 (Interactive Elements)

4.3 必备的现代特性 (Modern APIs)

4.31 Popover API (弹出层)

4.32 Native Lazy Loading (原生懒加载)

4.33 <dialog> 对话框

4.4 全局属性 (Global Attributes)

4.5 已废弃标签 (Obsolete - 千万别用)

4.33 `<dialog>` 对话框