HTML教程

面向秋招与真实 Web 开发的 HTML 教程体系，覆盖 Web 与浏览器基础、语义化文档、媒体、表格、表单、可访问性、资源加载、SEO、安全边界与企业工程实践。

HTML 学习路线、课程边界与企业开发定位

本章覆盖：HTML 在 Web 前端三层中的职责：结构与语义；HTML、CSS、JavaScript 的职责边界；HTML 与 DOM、浏览器、HTTP、服务器的关系；HTML 与 Vue / React / Thymeleaf 等模板或框架的关系；秋招常见要求中的 HTML 基础、页面结构、语义、表单与浏览器知识；学习方法：写页面、查看 DOM、验证结构、排查 Network、做可访问性检查；课程路径：基础 → 语义 → 媒体 → 表格 → 表单 → 可访问性 → 加载性能 → 企业实践。

HTML 的定位、发展与 WHATWG Living Standard

本章覆盖：HTML 是标记语言而不是编程语言；HTML、HyperText、Markup Language 的含义；HTML 与 Web 平台的关系；HTML4、XHTML、HTML5 的历史定位；WHATWG HTML Living Standard；“HTML5”在现代开发中的实际含义与边界；浏览器实现与 HTML 标准的区别。

head 元数据、页面标题与 viewport

本章覆盖：`<head>` 的职责；`<title>`；`meta name="description"`；`meta name="viewport"`；`meta name="author"` 的边界；`meta name="theme-color"` 的定位；`<link>` 元数据关系；head 中“文档元数据”与 body 中“页面内容”的区别。

img 图片元素与替代文本

本章覆盖：`<img>`；`src`；`alt`；`width` / `height`；intrinsic size；空 `alt=""` 与装饰性图片；有意义图片的替代文本；图片加载失败时的页面语义；图片尺寸声明与页面布局稳定性。

table 数据表格的基本结构

本章覆盖：`<table>`；`<caption>`；`<thead>`；`<tbody>`；`<tfoot>`；`<tr>`；`<th>`；`<td>`；表格用于二维数据而不是页面布局；企业后台列表、报表与统计表的典型场景。

form 元素、提交目标与请求方式

本章覆盖：`<form>`；`action`；`method`；GET；POST；`enctype`；`target`；form 与服务端接口的关系；HTML 原生提交与 JavaScript AJAX / Fetch 提交的区别；HTTP 细节留给网络与 JavaScript 课程。

Semantic HTML：用正确元素表达正确含义

本章覆盖：semantic HTML；native semantics；div / span 的无语义定位；button、a、input 等原生控件提供的默认能力；语义对浏览器、搜索引擎和辅助技术的价值；“看起来一样”不等于“语义一样”；企业组件库也应尽量保留原生语义。

HTML Parser、DOM Tree 与浏览器容错

本章覆盖：tokenization 高层概念；tree construction 高层概念；DOM Tree；源码结构与最终 DOM 可能不同；parser error recovery；非法嵌套造成节点重排；DevTools Elements 查看最终 DOM；HTML parser 与 XML parser 思路差异。

HTML 语义与基础 SEO

本章覆盖：title；meta description；h1～h6；semantic sections；link text；image alt；可抓取文本；robots 能否访问与 HTML SEO 的边界；语义正确优先于“堆 SEO 标签”；HTML 负责提供可理解的文档结构。

HTML、CSS、JavaScript 的职责分离与渐进增强

本章覆盖：HTML 负责结构与语义；CSS 负责表现与布局；JavaScript 负责行为与状态；separation of concerns；progressive enhancement；页面无 JS 时仍应尽可能保留基础内容与关键流程；不使用 HTML 属性承载大量业务逻辑；不用 CSS / JS 修补本应由语义元素解决的问题。

语义化个人技术文章页

本章覆盖：header / nav / main / article / aside / footer；标题层级；段落与文本语义；code / pre；figure / figcaption；时间与作者信息；页面内目录锚点；SEO 基础元数据；可访问性检查。

从 URL 到页面：浏览器获取 HTML 的基本链路

本章覆盖：用户输入 URL 到页面展示的高层流程；浏览器、Web 服务器与 HTML 文档的关系；HTTP 响应体中的 HTML；`Content-Type: text/html`；浏览器收到 HTML 后开始解析；HTML → DOM 的基本关系；CSS、JavaScript、图片等外部资源如何由 HTML 引用；网络协议细节留给计算机网络 / HTTP 专项课程。

全局属性：id、class、data-* 与通用页面标识

本章覆盖：`id`；`class`；`data-*`；`title`；`hidden`；`lang`；`dir`；`tabindex` 只建立入口认知，详细规则放入可访问性分组；`style` 与内联事件属性的工程边界；id 唯一性与 class 可复用性。

响应式图片：srcset、sizes 与 picture

本章覆盖：`srcset`；width descriptor；pixel density descriptor；`sizes`；`<picture>`；`<source>`；art direction；不同格式资源选择；浏览器如何选择候选图片；响应式图片与 CSS 响应式布局的职责边界。

表头关系、scope 与可访问表格

本章覆盖：row header；column header；`<th>`；`scope="row"`；`scope="col"`；多层表头；caption；表头关系对屏幕阅读器的重要性；复杂表格的结构边界。

label、input 与表单控件基本模型

本章覆盖：`<label>`；`<input>`；`id`；`name`；`value`；label `for`；包裹式 label；name 才决定原生提交字段名；id 与 name 的职责区别；表单控件与可访问名称。

Landmark、标题层级与源码顺序

本章覆盖：main / nav / header / footer / aside；heading hierarchy；页面主区域；source order；视觉顺序与 DOM 顺序；屏幕阅读器按 DOM / 语义导航；不依赖 CSS 视觉位置掩盖错误文档结构。

HTML 解析过程中的外部资源发现

本章覆盖：parser 遇到外部资源声明；stylesheet；script；image；iframe；preload scanner 的高层认知；HTML 文档与子资源请求；Network waterfall；资源加载顺序与页面体验。

canonical、robots、hreflang 与页面关系

本章覆盖：`link rel="canonical"`；duplicate URL；`meta name="robots"`；index / noindex；follow / nofollow 的基本区别；`hreflang`；多语言 / 多地区页面关系；robots.txt 不属于 HTML 文档本身；sitemap 不属于 HTML 文档本身。

Source HTML、DOM 与框架生成页面的区别

本章覆盖：View Source；DOM；JavaScript 修改 DOM；SPA 初始 HTML；运行时渲染；SSR 输出 HTML；hydration 的高层概念；“页面里看到的元素”不一定存在于最初响应 HTML；调试时区分服务端输出问题与客户端渲染问题。

企业登录、注册与账户信息表单

本章覆盖：form；label；用户名 / 密码 / email；autocomplete；required；原生校验；checkbox；button；错误提示区域语义；客户端校验与服务端校验边界；登录安全边界认知。

HTML 最小文档、DOCTYPE 与页面骨架

本章覆盖：`<!doctype html>`；`<html>`；`<head>`；`<body>`；`lang`；`<meta charset="UTF-8">`；`<title>`；最小可用 HTML 页面；DOCTYPE 与 standards mode 的关系。

HTML 内容模型、合法嵌套与交互元素边界

本章覆盖：flow content；phrasing content；interactive content；sectioning content 的高层认识；元素允许的父子关系；为什么不能任意嵌套标签；interactive content 的嵌套风险；浏览器自动纠正非法结构造成 DOM 与源码不一致；用 DevTools 验证最终 DOM。

单元格合并与列结构

本章覆盖：`rowspan`；`colspan`；`<colgroup>`；`<col>`；合并单元格对数据理解的影响；复杂报表结构设计；避免为了视觉效果制造难以维护的表结构。

文本类输入控件

本章覆盖：`type="text"`；`password`；`email`；`tel`；`url`；`search`；`placeholder`；`maxlength`；`minlength`；placeholder 不能替代 label；不同 input type 对浏览器、移动键盘和验证的影响。

键盘访问、焦点与 tabindex

本章覆盖：默认可聚焦元素；Tab 导航；Enter / Space 的默认交互；`tabindex="0"`；`tabindex="-1"`；正数 tabindex 的维护问题；focus order；键盘陷阱；焦点管理与 JavaScript 的边界。

script 元素、经典脚本与 ES Module

本章覆盖：`<script>`；`src`；inline script 的工程边界；classic script；`type="module"`；module 默认 defer-like 行为的高层认知；`nomodule` 的历史兼容定位；JavaScript 语言本身留给 JavaScript 教程。

Open Graph、社交分享与结构化数据

本章覆盖：Open Graph metadata；title / description / image；社交平台预览；Twitter / X Card 的同类概念；Schema.org 的定位；JSON-LD 的定位；structured data 与普通 HTML 语义的区别；业务需要驱动，不为“标签齐全”而堆砌。

HTML 与 Vue / React 组件系统的关系

本章覆盖：Vue template 最终生成 DOM；JSX 不是 HTML，但表达相似 UI 结构；DOM property 与 HTML attribute；class / className 等差异只建立概念；组件封装不能破坏语义；UI 组件库底层仍需要正确 HTML；表单控件、button、a、table 等原生语义仍有效；具体框架语法进入 Vue / React 专项。

后台管理系统查询与数据表格页面

本章覆盖：页面主区域；查询表单；筛选控件；操作按钮；table / thead / tbody；th / scope；批量选择；行操作；分页区域；空数据状态；权限与可访问性边界。

元素、标签、属性、文本与 HTML 基本语法

本章覆盖：element、tag、attribute 的区别；开始标签与结束标签；void elements；属性名与属性值；布尔属性；属性引号；元素嵌套；文本节点；HTML 注释；HTML 大小写约定。

标题层级与页面信息架构

本章覆盖：`<h1>` ～ `<h6>`；标题表达内容层级而不是字体大小；页面主标题与章节标题；标题层级连续性；标题与 SEO、可访问性的关系；SPA / 组件页面中的标题组织问题；不使用 `<div>` 模拟标题语义。

audio、video 与媒体资源

本章覆盖：`<audio>`；`<video>`；`controls`；`autoplay`；`muted`；`loop`；`preload`；`poster`；`<source>`；多媒体格式兼容性；自动播放策略只建立工程认知。

企业级表格页面的 HTML 语义设计

本章覆盖：数据表格与布局网格的区别；表格上方搜索条件区域；分页区域语义；批量操作控件；行操作入口；空数据状态；加载状态与 HTML / JavaScript 职责边界；后台管理系统中的表格可访问性。

数字、范围、日期时间与颜色输入

本章覆盖：`number`；`range`；`date`；`time`；`datetime-local`；`month`；`week`；`color`；`min`；`max`；`step`；浏览器 UI 差异；业务数据格式仍需后端校验。

Accessible Name、label 与控件说明

本章覆盖：accessible name 的基本概念；label；`aria-label`；`aria-labelledby`；`aria-describedby`；placeholder 不能替代 label；图标按钮必须有可理解名称；表单错误信息的关联；优先使用可见文本与原生 label。

defer、async 与脚本执行时序

本章覆盖：普通外部 script 的解析阻塞；`defer`；`async`；DOM 解析与脚本执行顺序；defer 脚本的相对顺序；async 的独立下载 / 执行特征；模块脚本与经典脚本差异；第三方统计脚本的典型 async 场景；业务脚本错误选型导致 DOM 未就绪等问题。

HTML 资源属性中的安全与隐私

本章覆盖：`rel="noopener"`；`rel="noreferrer"`；`referrerpolicy`；`crossorigin`；Subresource Integrity `integrity`；iframe `sandbox`；iframe `allow`；外部资源供应链风险；第三方 iframe / script 的最小权限意识。

HTML 与 Java 服务端模板的关系

本章覆盖：server-side rendering；Thymeleaf / JSP 的高层定位；模板变量最终输出 HTML；服务端条件渲染；循环生成列表 / 表格；form 与 Java Controller / DTO 的字段契约；HTML escaping；模板注入 / XSS 风险边界；不在 HTML 课程展开 Spring MVC 模板 API。

字符实体、空白、转义与文本表示

本章覆盖：HTML 空白折叠；`&lt;`、`&gt;`、`&amp;`、`&quot;`；named character reference；HTML 源码文本与浏览器渲染文本的区别；特殊字符何时需要转义；不可信数据直接拼入 HTML 的风险初步认识。

track、字幕与媒体可访问性

本章覆盖：`<track>`；WebVTT 基本定位；`kind`；`srclang`；`label`；`default`；captions 与 subtitles；视频字幕与听障可访问性；音视频替代内容与文本说明。

checkbox、radio、fieldset 与 legend

本章覆盖：checkbox；radio；`checked`；同 name radio group；checkbox 多值提交；`<fieldset>`；`<legend>`；一组控件的语义组织；单选、多选业务场景；“是否选中”与 value 的提交语义。

link、button 与交互控件的正确选择

本章覆盖：链接用于导航；按钮用于执行操作；不用 `<div onclick>` 模拟按钮；原生键盘行为；disabled button；link `href` 的意义；空链接和伪链接问题；组件库封装后仍需保持底层正确元素。

link、stylesheet 与资源关系声明

本章覆盖：`<link>`；`rel="stylesheet"`；`rel="icon"`；`rel="canonical"`；`rel="preload"`；`rel="modulepreload"`；`rel="preconnect"`；`rel="dns-prefetch"`；`as`；`crossorigin`；浏览器如何依据关系类型处理资源。

HTML Injection、XSS 与 CSP 的边界认知

本章覆盖：HTML 把输入解释成 markup 时的风险；文本内容与 HTML 内容不是一回事；不可信字符串不能直接拼接为 HTML；escaping / sanitization 的基本概念；DOM XSS 属于 JavaScript 安全专项；模板输出需要默认转义；CSP 的作用只建立高层认知；CSP 优先通过 HTTP Header 配置；meta CSP 的能力边界；前端隐藏字段、disabled、客户端校验都不是安全边界。

B 端 / 中后台页面的语义骨架设计

本章覆盖：应用主导航；页面标题区；breadcrumb 的语义组织；查询表单；操作工具栏；数据表格；分页；modal / dialog 的语义边界；空状态；加载状态；权限控制不应只靠隐藏按钮；与产品、设计、后端接口协作时的页面结构契约。

可访问的导航、表单与媒体综合页

本章覆盖：landmark；headings；keyboard navigation；focus order；accessible name；form label；fieldset / legend；image alt；media captions；table headers；ARIA 只在原生语义不足时使用；Lighthouse / axe + 人工键盘验收。

URL、相对路径、绝对路径与片段定位

本章覆盖：absolute URL；relative URL；根相对路径与文档相对路径；`.` 与 `..`；URL fragment；页面内锚点；`<base>` 的作用与风险；本地文件路径与 Web URL 的区别；部署后路径变化导致资源 404 的常见原因。

段落、通用容器与块级结构组织

本章覆盖：`<p>`；`<div>`；`<span>`；`<hr>`；`<br>`；div / span 的无语义容器定位；`<br>` 不是布局工具；段落不能随意包裹块级内容的结构问题；优先语义元素，必要时才使用通用容器。

iframe 与第三方页面嵌入

本章覆盖：`<iframe>`；`src`；`title`；`loading`；`sandbox`；`allow`；`referrerpolicy`；iframe 与主文档是不同 browsing context；嵌入地图、视频、第三方应用的典型场景；第三方内容的性能、隐私与安全风险。

select、option、optgroup 与 datalist

本章覆盖：`<select>`；`<option>`；`<optgroup>`；`selected`；`multiple`；`<datalist>`；input `list`；下拉单选与多选；datalist 与 select 的差异；大数据量选择器为何通常交给 JavaScript 组件。

图片、媒体、表格与表单的可访问性

本章覆盖：img alt；figure / figcaption；video captions；track；table caption / th / scope；label；fieldset / legend；输入错误提示；必填字段说明；不仅依赖颜色表达状态。

Resource Hints 与预加载策略

本章覆盖：preload；preconnect；dns-prefetch；modulepreload；preload 不是“越多越好”；错误优先级可能争抢关键带宽；字体、首屏图片、核心模块等典型候选；通过 Network / Performance 验证，而不是凭感觉添加 hint。

浏览器兼容性、Baseline 与渐进式采用新特性

本章覆盖：browser compatibility；MDN compatibility data；Web Platform Baseline；progressive enhancement；fallback；feature support；不根据“HTML5”标签粗暴判断兼容性；企业项目的目标浏览器范围；新特性进入生产前先看兼容性和业务收益。

Java 全栈前后端协作 HTML 原型

本章覆盖：REST / MVC 页面中的 HTML 位置；查询表单字段与后端参数；创建 / 修改表单字段与 DTO 的对应；GET / POST 原生表单；JSON / AJAX 提交属于 JavaScript 扩展；后端返回 HTML 与返回 JSON 的两种协作方式；列表、详情、新增、修改页面的语义骨架；服务端模板输出转义；权限不能依赖前端隐藏；使用 DevTools 完成一次端到端排错；为后续 CSS、JavaScript、Vue 与 Spring Boot 课程建立接口认知。

字符编码、语言、MIME 类型与页面国际化基础

本章覆盖：UTF-8；`meta charset`；服务端响应头 charset 与 HTML 声明；`lang`；`dir`；`text/html`；文件扩展名与 MIME Type 不是同一概念；中文页面乱码的常见原因；多语言页面的基本语义边界。

文本级语义元素

本章覆盖：`<strong>` 与重要性；`<em>` 与强调；`<mark>`；`<small>`；`<abbr>`；`<time>`；`<code>`；`<pre>`；`<kbd>`；`<samp>`；`<var>`；`<sub>` / `<sup>`；`<q>` / `<blockquote>`；`<cite>`；“视觉效果”与“语义意义”的区别。

SVG、canvas 与其他嵌入内容的 HTML 边界

本章覆盖：inline SVG；`<svg>` 与 HTML 的组合；`<canvas>` 元素的定位；canvas 绘制逻辑属于 JavaScript API；SVG 适合矢量结构内容；canvas 适合脚本绘制像素图形；`<object>` / `<embed>` 只建立兼容旧内容认知；HTML 课程不展开 SVG / Canvas 绘图 API。

textarea 与 button

本章覆盖：`<textarea>`；`rows`；`cols`；textarea 初始值；`<button>`；`type="submit"`；`type="button"`；`type="reset"`；button 默认 type 的风险；button 内容可以包含文本和部分富内容；button 与 input button 的选择。

WAI-ARIA 基础与使用边界

本章覆盖：role；state；property；`aria-*`；ARIA 不会自动增加行为；原生元素优先于重新实现角色；不覆盖正确原生语义；`aria-hidden`；`aria-expanded`；`aria-controls`；常见组件状态的最低认知；复杂 ARIA Widget 留给组件 / JavaScript 专项。

图片 / iframe 懒加载与布局稳定性

本章覆盖：`loading="lazy"`；img lazy loading；iframe lazy loading；`decoding`；width / height；aspect ratio 与 intrinsic size 的高层关系；防止图片加载造成布局跳动；首屏关键图片不应机械 lazy load；HTML 属性与 Core Web Vitals 的关联认知。

HTML 代码评审、质量门禁与交付检查

本章覆盖：文档结构是否合法；标题层级是否合理；语义元素是否正确；img 是否有合适 alt；form 是否有 label；button / link 是否用对；table 是否有正确表头；是否存在非法嵌套；外部链接 / iframe 是否配置必要安全属性；是否存在废弃元素；HTML Validator；Lighthouse / axe；DevTools 最终 DOM 检查；页面兼容性与资源加载回归。

DevTools、HTML 校验、错误恢复与废弃特性

本章覆盖：Elements 面板查看 DOM；View Source 与 Elements 的区别；Network 查看 HTML 文档与资源请求；浏览器 HTML error recovery；“浏览器能显示”不等于 HTML 合法；HTML Validator / Nu HTML Checker；obsolete / deprecated elements；不继续使用 `font`、`center` 等表现型旧标签；兼容旧代码与编写新代码的区别。

列表：ul、ol、li 与描述列表

本章覆盖：`<ul>`；`<ol>`；`<li>`；ordered / unordered 的语义差异；`start`、`reversed`、`value`；`<dl>`；`<dt>`；`<dd>`；导航菜单、步骤列表、键值说明的语义选择；不用大量 div 模拟真正的列表数据。

文件上传

本章覆盖：`input type="file"`；`accept`；`multiple`；文件选择器；`multipart/form-data`；文件本体与普通文本字段；浏览器不会因为 accept 就保证文件可信；MIME / 扩展名校验仍需服务端完成；上传大小、权限、病毒扫描属于后端 / 基础设施边界。

可访问性检查与真实页面验收

本章覆盖：仅键盘操作页面；浏览器 Accessibility Tree；Lighthouse Accessibility；axe 等自动检查工具；自动工具不能覆盖全部人工检查；标题层级检查；表单 label 检查；图片 alt 检查；焦点顺序检查；企业交付中的基础 a11y 验收清单。

用 DevTools 排查 HTML 与资源加载问题

本章覆盖：Elements；Network；Timing；Initiator；Status Code；MIME Type；请求路径错误；script / stylesheet 未加载；CORS 问题只建立识别能力；console 中 HTML / resource 相关警告；Lighthouse 基础检查；从“页面没显示”定位到 DOM、资源、样式、脚本四层。

超链接、导航与页面间关系

本章覆盖：`<a>`；`href`；absolute / relative URL；fragment link；`target`；`download`；`rel`；`mailto:`；`tel:`；链接文本应描述目标；`<a>` 与 `<button>` 的职责区别；外链打开新窗口的安全与可用性边界。

HTML 原生表单校验

本章覆盖：`required`；`min`；`max`；`step`；`minlength`；`maxlength`；`pattern`；type 自带格式验证；`novalidate`；`formnovalidate`；constraint validation 的定位；客户端校验提升体验但不能替代服务端校验。

disabled、readonly、hidden 与控件状态

本章覆盖：`disabled`；`readonly`；`type="hidden"`；`checked`；`selected`；disabled 控件不参与正常表单提交；readonly 与 disabled 的差异；hidden 字段不是安全机制；前端隐藏不等于权限控制；服务端不能信任客户端状态。

autocomplete、inputmode 与移动端输入体验

本章覆盖：`autocomplete`；常见 autocomplete token；`inputmode`；`enterkeyhint`；浏览器自动填充；用户名 / 密码自动填充语义；OTP 场景的输入提示；不滥用关闭 autocomplete；移动端软键盘与 input type / inputmode 的关系。

表单数据序列化、成功控件与后端接口契约

本章覆盖：successful controls；`name=value`；GET query string；`application/x-www-form-urlencoded`；`multipart/form-data`；checkbox / radio / multiple select 的多值数据；未选中控件的提交行为；disabled 字段的提交行为；表单字段名与 DTO / Request 参数的对应关系；Java Spring Boot 接收表单与 JSON 的概念差异；永远在服务端重新做业务校验和权限校验。