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