HTML 是标记语言而非编程语言，应聚焦文档结构；需手写基础标签、用 Live Server 预览、厘清 class/id 用途差异、阻止表单默认提交，并通过 DevTools 实时调试。

HTML 不是编程语言，别从“写程序”角度学

它只是标记文档结构的规则，学 HTML 就像学怎么用 Word 的标题、段落、加粗按钮——但得亲手写标签，而不是点鼠标。

• 别一上来就啃 或 ，先确保能手写出一个有
  、
  、
  和 的静态页面
• 浏览器右键“查看网页源代码”看到的那些
  、，就是你下一步要模仿写的对象，不是黑箱
• 别被“语义化”吓住：
  和
  确实重要，但初期用
  不报错、不崩，只是后期改起来费劲

  本地预览 HTML 文件必须绕开 file:// 协议限制

  双击打开 .html 文件看似方便，但一旦加了 fetch()、用了 且 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" 才是复用逻辑的载体。

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

  • id 值在整页中必须唯一，但浏览器不会校验，重复了 JS document.getElementById() 只返回第一个，CSS 选择器 #header 仍会生效，隐患极隐蔽
  • class 支持空格分隔多个值，class="card card--large js-toggle" 是常态，对应三类关注点：样式、响应式、行为
  • 别为每个元素都加 id，除非你明确需要 location.hash 跳转、或要用 aria-labelledby 关联表单控件

  form 表单提交失败？先关掉默认行为再查 JS

  点按钮没反应、页面刷新、地址栏多了一堆 ?name=xxx&email=yyy —— 这不是 JS 报错，是 form 默认提交机制在运行。

  • 最直接验证法：删掉所有 JS，只留
    和 ，点一下，看是否跳转或刷新；如果是，说明还没阻止默认行为
  • 关键代码只有两行：event.preventDefault() 必须在 submit 事件回调里调用，且不能漏掉 event 参数声明
  • 别在 button onclick="handle()" 里写逻辑， 才不触发 submit，type="submit"（默认值）一定走表单流

  真实项目里，HTML 很少孤立存在；它和 CSS 选择器、JS 的 DOM API、甚至后端模板语法（如 {{ title }}）混写。盯住一个标签看半天，不如打开 DevTools 的 Elements 面板，右键“Edit as HTML”，实时删改，看页面怎么变——手感比理论快。