html 是标记语言而非编程语言，应聚焦文档结构；需手写基础标签、用 live server 预览、厘清 class/id 用途差异、阻止表单默认提交，并通过 devtools 实时调试。
HTML 不是编程语言，别从“写程序”角度学
它只是标记文档结构的规则，学 HTML 就像学怎么用 Word 的标题、段落、加粗按钮——但得亲手写标签，而不是点鼠标。
- 别一上来就啃
<canvas></canvas>或<svg></svg>，先确保能手写出一个有<h1></h1>、<p></p>、<ul></ul>和<a></a>的静态页面 - 浏览器右键“查看网页源代码”看到的那些
<div>、<code><span></span>，就是你下一步要模仿写的对象，不是黑箱 - 别被“语义化”吓住：
<article></article>和<section></section>确实重要，但初期用<div> 不报错、不崩，只是后期改起来费劲 <h3>本地预览 HTML 文件必须绕开 file:// 协议限制</h3> <p>双击打开 .<a style="color:#f60; text-decoration:underline;" title="html" href="https://www.php.cn/zt/15763.html" target="_blank">html</a> 文件看似方便，但一旦加了 <code>fetch()、用了<link rel="stylesheet">且 CSS 里含@import，或引入本地 JSON，大概率白屏+控制台报Cross origin requests are only supported for protocol schemes。- 最简方案：用 VS Code 装插件
Live Server，右键“Open with Live Server”，自动起http://127.0.0.1:5500/xxx.html - 命令行党可用
npx http-server（需提前装 Node.js），进目录后执行，比 Python 的python -m http.server更少编码问题 - 别信“改浏览器启动参数就能放开 file://”，Chrome 94+ 已彻底移除该开关，硬刚只会浪费两小时
class 和 id 的区别不是“一个能重复一个不能”，而是用途根本不同
初学者常以为
id="header"是为了“给头部起个名字”，其实它的真实作用是锚点跳转、JS 单例操作、CSS 唯一覆盖——而class="btn primary"才是复用逻辑的载体。-
id值在整页中必须唯一，但浏览器不会校验，重复了 JSdocument.getElementById()只返回第一个，CSS 选择器#header仍会生效，隐患极隐蔽 -
class支持空格分隔多个值，class="card card--large js-toggle"是常态，对应三类关注点：样式、响应式、行为 - 别为每个元素都加
id，除非你明确需要location.hash跳转、或要用aria-labelledby关联表单控件
form 表单提交失败？先关掉默认行为再查 JS
点按钮没反应、页面刷新、地址栏多了一堆
?name=xxx&email=yyy—— 这不是 JS 报错，是 form 默认提交机制在运行。立即学习“前端免费学习笔记（深入）”；
- 最直接验证法：删掉所有 JS，只留
<form></form>和<input type="submit">，点一下，看是否跳转或刷新；如果是，说明还没阻止默认行为 - 关键代码只有两行：
event.preventDefault()必须在submit事件回调里调用，且不能漏掉event参数声明 - 别在
button onclick="handle()"里写逻辑，<button type="button"></button>才不触发 submit，type="submit"（默认值）一定走表单流
真实项目里，HTML 很少孤立存在；它和 CSS 选择器、JS 的 DOM API、甚至后端模板语法（如
{{ title }}）混写。盯住一个标签看半天，不如打开 DevTools 的 Elements 面板，右键“Edit as HTML”，实时删改，看页面怎么变——手感比理论快。 - 最简方案：用 VS Code 装插件
