HTML上手最快方式是直接写代码而非照路线图学，因核心在于语义与结构，边写边查、边改边记最有效；常用标签仅约20个，冷门标签及新属性按需查阅文档即可。
HTML 不是编程语言，学它不靠“路线图”，靠用——边写边查、边改边记，才是最快上手的方式。
为什么直接写 HTML 比照着路线图学更有效
HTML 的核心是语义和结构，不是语法树或执行流程。你花两小时背完所有标签，不如用 15 分钟写一个带 <header>、<nav>、<article> 的页面，再打开浏览器开发者工具看 DOM 树怎么展开。
- 绝大多数项目只用到约 20 个常用标签：
<div>、<span>、<p>、<a>、<img>、<ul>、<ol>、<li>、<form>、<input>、<button>、<table>、<thead>、<tbody>、<tr>、<td>、<th>、<section>、<aside>、<footer> - 冷门标签（如
<meter>、<progress>）遇到再查，文档比教程准得多 - HTML5 之后新增的属性（如
required、autofocus、loading="lazy"）都是按需添加，不是必须一次性掌握
新手最容易卡住的三个地方
不是不会写，而是不知道“为什么这么写”或“为什么没效果”。这些问题往往藏在细节里：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<img src="photo.jpg">显示空白？先检查路径是否相对当前 HTML 文件，不是相对于服务器根目录；再确认文件名大小写是否一致（Linux 服务器敏感） -
<a href="#section2">跳转</a>点击没反应？目标元素必须有id="section2"，不能只靠class或name - 表单提交后页面刷新或跳转？默认行为就是如此；要阻止它，得用 JavaScript 的
event.preventDefault()，纯 HTML 做不到
什么时候该学语义化、ARIA 和可访问性
不是入门第一天，也不是“进阶阶段”的标志，而是当你开始写真实项目时自然会碰到的问题：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器读不出你的
<div class="card">？那就换成<article role="region" aria-labelledby="card-title">，并补上<h3 id="card-title"> -
<button>和<div onclick="...">都能点，但前者自带键盘焦点、空格/回车触发、禁用状态样式，后者什么都没有 - 用
<nav>包裹导航链接，比用<div class="nav">更容易被辅助技术识别——这不是“加分项”，是基础可用性门槛
真正难的不是记住标签，是判断什么时候该用 <time datetime="2024-06-15">6月15日</time> 而不是普通文本，或者为什么 <figure> + <figcaption> 比 <div> + <p> 更合适。这些判断来自实际协作、测试和反馈，不是路线图能教的。
