直接上手做项目比死磕语法更有效，html精通在于语义化表达信息结构并为css/js留接口；四类递进项目聚焦高频坑点：静态内容页、表单交互、响应式图文页、多页站点骨架。
从「静态内容页」开始：用语义标签重构纯文本
很多人写 HTML 习惯先套 <div>，再塞内容，结果结构松散、SEO 差、屏幕阅读器难理解。真正的起点是：把一段已有文案（比如公司简介、产品说明）用语义化标签重写。
<ul><li>强制只用 <code><header></header>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer>，禁用 <div>（除必要布局容器外）
<li>标题必须严格嵌套：<code><h1></h1> 只能出现一次，<h2></h2> 下才允许 <h3></h3>，不能跳级
alt 属性；若图仅为装饰，写 alt=""（空字符串），不是删掉该属性练「表单交互逻辑」：不依赖 JS 实现基础验证与反馈
表单是用户输入的第一道门，但多数人只写 <input type="text"> 就完事。HTML5 原生提供了足够强的约束能力，关键在用对属性。
- 用
required、minlength、maxlength、pattern（正则）、type="email"或type="url"替代早期 JS 手动校验 -
<label for="xxx"></label>必须与对应id匹配；点击 label 应能聚焦 input，否则可访问性失败 - 错误提示不要靠 JS 插入
<span class="error"></span>，优先用:valid/:invalid伪类 +title属性触发原生提示 - 避免把多个
<input>塞进同一个<form></form>却无明确业务边界——例如“注册”和“密码找回”应分属不同<form></form>
做「响应式图文页」：用 HTML 控制资源加载优先级
响应式不只是 CSS 媒体查询的事。HTML 层面的路径、尺寸、加载策略，直接影响首屏性能和移动端体验。
- 图片必须用
<picture></picture>+<source></source>+<img>组合，根据media或srcset/sizes提供不同分辨率资源 - 避免在
<img src="large.jpg">后靠 CSS 缩小显示——浏览器仍会下载全尺寸图 - 关键图片加
loading="eager"，折叠区域图片加loading="lazy"（注意 Safari 旧版需 polyfill） - 视频优先用
<video></video>标签而非 iframe 嵌入，且至少提供poster和一个<source></source>（MP4）
搭「多页站点骨架」：验证链接、路径与文档一致性
单页写得再好，一旦变成多页网站，就容易暴露路径混乱、相对/绝对混用、重复 <title></title> 等问题。这时 HTML 就是整个站点的“路由契约”。
- 所有内部链接用相对路径（如
./about.html、../blog/post.html），禁用以/开头的根对路径（除非明确部署在根目录） - 每个页面的
<title></title>必须唯一，且包含核心关键词（如 “关于我们 | XX 公司”） - 复用的头部/底部用
<include></include>？不行——原生 HTML 不支持，要么手动复制（初期可接受），要么引入构建工具（如 Eleventy） - 用本地服务器（如 VS Code Live Server）打开首页，逐个点击导航链接，确认 404 率为 0；右键“查看页面源代码”，检查是否有未闭合标签或嵌套错误
