直接用记事本写html，保存为index.htm，双击浏览器运行；只练7个标签；查“不生效”先看是否保存、路径是否正确、浏览器是否缓存。

直接上手写，别从“HTML是什么”开始学——你不是在考编译原理，是在做能跑的页面。

用记事本+浏览器双开，跳过所有编辑器和框架

初学阶段装 VS Code、配 Live Server、搭 Webpack，等于给自行车加涡轮增压。真实需求只是让文字变大、图片显示、按钮能点——这些 <h1></h1>、<img>、<button></button> 在记事本里敲完，保存为 index.htm，双击就能在浏览器里看到效果。

• 不要用 .html 后缀，Windows 双击时可能被系统关联成其他程序；用 .htm 更稳妥
• 路径别写相对 URL（比如 ./images/logo.png），先全用绝对路径 file://C:/myproject/logo.png，排除路径解析干扰
• 遇到乱码？在 里加一行：<meta charset="utf-8">，不是 gbk，不是 utf8（少横线就错）

只练 7 个标签，覆盖 90% 页面结构

别背《HTML5 全部标签手册》。新手卡住，90% 是因为试图用 <section></section> <article></article> 做布局，结果样式全崩。语义化是优化项，不是入门门槛。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• <div>：容器，没语义，但好使，先无脑套三层也比纠结用不用 <code><main></main> 强
• <p></p>：段落，别用它塞标题或按钮，也别用 <br> 换行代替它
• <h1></h1> 到 <h6></h6>：只按层级用，<h1></h1> 全页只能一个，不是“字号最大就用它”
• <a href="..."></a>：链接必须带 href，哪怕只是 href="#"，空值会触发默认跳转行为
• <img src="..." alt="...">：alt 属性不能空，哪怕写 alt=""，否则读屏工具报错
• <ul></ul>/<ol></ol> + <li>：列表内容必须包在 <li> 里，<ul>item1</ul> 是无效 HTML
• <button></button>：比 <input type="button"> 更可控，事件绑定更直觉，新手优先选它

遇到“不生效”先查这三件事

95% 的“写完没反应”，和 HTML 本身无关，是环境或基础规则被忽略。

• 浏览器地址栏显示的是 file:/// 开头？说明没走服务器，fetch()、XMLHttpRequest、本地 JSON 文件读取会因跨域被拦——这不是你代码错，是浏览器策略
• 右键 → “查看网页源代码”，看到的是你刚保存的内容？如果还是旧内容，说明没保存，或者保存到了别的路径（常见于记事本“另存为”时路径被悄悄改掉）
• 打开开发者工具（F12），切到 Console 标签页，有红色错误？比如 Uncaught SyntaxError: Unexpected token '，大概率是 JS 文件路径错，返回了 HTML 页面本身

真正卡住的地方，往往不是标签怎么写，而是“为什么我改了却没变”——盯住保存动作、文件路径、浏览器缓存这三个点，比查 MDN 更快解决问题。