直接写一个能打开的index.html文件并用浏览器双击运行是唯一有效的起点，只需三行代码：<!DOCTYPE html><html><body>Hello, world!</body></html>。
别从“HTML 是什么”开始学，直接写一个能打开的 index.html 文件，用浏览器双击打开——这是唯一有效的起点。
怎么写出第一个能运行的 HTML 文件
新手常卡在“不知道该写什么”或“写了打不开”，其实只要三行就足够启动：
- 新建文本文件，改名为
index.html（后缀必须是.html，不能是.txt） - 用记事本、VS Code 或任意纯文本编辑器打开，粘贴以下内容：
<!DOCTYPE html> <html> <body>Hello, world!</body> </html>
保存 → 双击文件 → 浏览器自动打开显示文字。这比任何理论都重要：你已经进入了真实环境。
常见错误：Cannot open file（没改后缀）、显示源码不渲染（用 Word 编辑、或保存为 UTF-8 with BOM）、空白页（漏了 <body> 或标签没闭合）。
立即学习“前端免费学习笔记（深入）”；
哪些标签必须立刻记住，哪些可以先放着
初学阶段只盯 5 个核心标签，覆盖 90% 的静态页面需求：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<h1>到<h6>：标题层级，不是“加粗”，是语义结构 -
<p>：段落，别用多个<br>换行代替 -
<a href="xxx">：链接，href值必须带引号，相对路径如"about.html"，绝对路径如"https://example.com" -
<img src="xxx" alt="xxx">：图片，src是路径，alt不是可选——没写会触发无障碍警告，且图片加载失败时显示文字 -
<div>和<span>：容器，前者块级（独占一行），后者内联（不换行），别一上来就套嵌套十层
先别碰 <table>、<form>、<canvas> —— 它们各自有独立使用逻辑和易错点，等你能稳定写出带标题、段落、链接、图片的页面再说。
为什么用 VS Code 而不是记事本或在线编辑器
记事本没有语法高亮、自动闭合标签、错误提示；在线编辑器（如 JSFiddle）隐藏了“文件如何组织”这个关键环节——而真实项目永远是本地一堆 .html、.css、.js 文件互相引用。
- VS Code 免费、轻量，装好后开箱即用
- 必装插件：
Auto Close Tag（自动补闭合标签）、Live Server（右键“Open with Live Server”，自动刷新，避免手动双击） - 路径引用出错时，Live Server 控制台会报
404 Not Found，比双击打开后空白更早暴露问题
性能影响几乎为零，但省下的调试时间远超安装成本。别信“先用简单工具培养手感”——手感来自写对，不是敲得慢。
下一步不是学 CSS，而是让 HTML “动起来”
当你能熟练写出含标题、段落、链接、图片的页面，并确保所有路径正确、所有标签闭合、所有属性带引号，下一步是加交互，而不是急着学样式：
- 给
<a>加target="_blank"看新窗口行为 - 在
<img>上加width和height属性，观察浏览器渲染变化（注意：这不是响应式写法，但能帮你理解属性作用） - 把两个
index.html放同一文件夹，用<a href="page2.html">实现跳转——这是真实网站最基础的导航模型
复杂点在于：HTML 不是孤立存在的，它和文件系统路径强绑定，而路径又分相对/绝对、大小写敏感（尤其部署到 Linux 服务器时）、斜杠方向（Windows 用 \，但 HTML 中一律用 /）。这些细节没人提醒，但错一个字符就 404。
