HTML学习应直接动手写，通过即时反馈掌握结构与规范；亲手敲代码理解标签作用，用浏览器开发者工具反向拆解真实网页，专注超链接和图片练习，重视语义化与无障碍属性。
直接上手写，别等“学完再做”。HTML不是靠背出来的，是靠改出来的——你改一行 <h1>，浏览器立刻反馈；删一个 </p>，段落就塌了。这种即时反馈才是最有效的学习路径。
从双击打开一个 .html 文件开始
别装环境、别配工具链。用记事本（或 VSCode）新建文件，输入以下内容，保存为 index.html，然后双击它在浏览器里打开：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>你好，世界！</h1> <p>这是第一个段落。</p> </body> </html>
关键点在于：你必须亲手敲一遍，不能复制粘贴。因为只有敲的时候，才会注意到 <meta charset="UTF-8"> 漏了会乱码，</body> 忘关会导致样式错位，lang="zh-CN" 缺失会影响屏幕阅读器识别。
- 所有标签必须小写（
<H1>虽然能渲染，但不符合 HTML5 规范） -
<img>、<hr>、<br>是自闭合标签，不用写</img> - 本地双击打开时，URL 是
file:///协议，某些功能（如 AJAX、fetch）会受限，但结构和样式完全正常
用浏览器开发者工具“反向拆解”真实网页
打开任意网站（比如百度首页），右键 → “检查”，看它的 <head> 里有没有 <meta name="viewport">，<body> 里怎么组织导航栏——是用 <nav> 还是堆 <div>？别只看效果，重点看标签选择逻辑。
立即学习“前端免费学习笔记（深入）”；
常见误判：
- 看到居中文字就加
style="text-align:center"→ 其实该用语义化容器（如<header>）配合 CSS 居中 - 想换行就狂打
<br>→ 实际该用多个<p>或列表<ul> - 图片不显示只查路径 → 忘了检查
alt属性是否为空、src是否含中文或空格
把“超链接”和“图片”当练习靶子反复练
这两个元素最常出问题，也最能暴露对 HTML 本质的理解程度。每天花 10 分钟，只练它们：
- 写 3 个不同
href：绝对地址（https://example.com）、相对路径（about.html）、锚点（#contact），分别测试跳转行为 - 给链接加
target="_blank"时，必须同步加rel="noopener"，否则有安全风险 -
<img src="a.jpg" alt="描述文字">中的alt不是可选项，它是无障碍访问和 SEO 的硬性要求；如果图片只是装饰，写alt=""，不是删掉 - 本地图片路径出错？优先检查文件是否真在同级目录，而不是路径写成
./images/a.jpg但实际没建images文件夹
别碰框架，先让原生 HTML “活”起来
很多新手学完 <div> 就急着学 Bootstrap，结果连 <section> 和 <article> 的区别都说不清。语义化不是加分项，是基础能力：
-
<header>不等于“顶部大图”，而是页面或区块的介绍性内容区域 -
<nav>应包裹主导航链接，不是所有链接都塞进去 -
<footer>是归属信息（版权、联系方式），不是页面最底下那条横线
真正容易被忽略的，是 <meta name="description"> 这类看不见的标签——它不渲染，但决定了搜索引擎怎么理解你的页面。写完一个页面，顺手补上这行，比调半天颜色更有长期价值。
