HTML基础代码大全入门指南

• 常见误操作：把
• 当成可选闭合，实际
  • A
  • B
  中第二个
• 会被自动补全闭合，但语义已模糊
• HTML5 允许省略某些闭合（如
、），但别依赖它——Prettier、VS Code 自动格式化默认仍补全，团队协作时容易引发 diff 污染
• 服务端渲染（如 PHP/Node）若拼接 HTML 字符串，漏闭合会直接导致整页解析失败，错误信息常是 Unexpected end of input

class 和 id 的区别不只是“一个能重复一个不能”

id 是全局唯一标识，浏览器用它做锚点跳转（#header）、CSS 选择器（#nav）、JS 获取节点（document.getElementById('modal')）。一旦页面出现两个相同 id，getElementById 只返回第一个，CSS 里 #btn 也只会命中首个——这比样式失效更隐蔽，因为看起来“好像没出错”。

class 是关系型标记，用于归类、复用样式和行为。一个元素可以有多个 class（class="btn btn-primary loading"），JS 也常用 querySelectorAll('.active') 批量操作。

• 别用 id 做纯样式控制，比如
  —— 后续想加第二个红色文字就得复制ID或改逻辑，违背语义
• Vue/React 组件中动态生成 id 要格外小心，v-for 循环里写死 id="item" 是典型翻车现场
• 无障碍访问（a11y）依赖 id 关联 label for="xxx" 或 aria-labelledby，这里重复 ID 会导致读屏软件静默失败

script 标签放 head 里为什么 JS 经常报错找不到元素

脚本执行时，浏览器按 HTML 解析顺序从上到下构建 DOM。放在 里的 —— 它会并行下载，等 DOM 解析完再执行，且保证顺序

form 表单提交时页面刷新了，怎么阻止

原生