这是一份极简高效的HTML入门指南，直击新手最常卡壳的痛点——不讲抽象概念，不堆砌术语，而是用“三行代码+双击运行”这一可立即上手的动作，带你5分钟写出第一个真正能显示的index.html文件；它拆解了文件保存、UTF-8编码（尤其BOM陷阱）、路径规则、标签语义与闭合等真实开发中高频出错的细节，并明确划出起步只需掌握的5个核心标签，果断搁置复杂功能；还指出VS Code+Live Server组合为何比记事本和在线编辑器更贴近实战——不是因为高级，而是因为它提前暴露并规避了本地开发中最隐蔽却最致命的坑，让初学者从第一天起就走在正确路径上。

怎么写出第一个能运行的 HTML 文件

新手卡住的地方从来不是语法，而是文件没保存对、编码错了、或者标签漏了闭合。你只需要做三件事：

• 新建纯文本文件，用 VS Code 或记事本打开（千万别用 Word/WPS）
• 粘贴这三行：

  
  Hello, world!

• 「另存为」→ 文件名输 index.html → 编码选 UTF-8 → 类型选「所有文件」→ 保存 → 双击打开

常见失败现象：Cannot open file（后缀还是 .txt）、显示源码不渲染（用了 Word 保存）、空白页（ 漏写或 没闭合）。VS Code 右下角可实时切换编码，点一下就能确认是不是 UTF-8。

为什么图片/样式/链接全都不生效

90% 的问题出在路径和协议上，不是代码写错。浏览器控制台（F12 → Network 标签）里看到 404 Not Found，就说明资源根本没找对位置。

• ：图片必须和 index.html 在同一文件夹；写成 ./logo.png 或 file:///D:/xxx/logo.png 都可能失败
• ：子目录名必须小写，Windows 资源管理器里显示 Images/ 也不行，得是 images/
• ：本地跳转用相对路径；外链必须带协议，比如 href="https://example.com"，漏掉 https:// 就会去当前目录找 www.example.com 这个文件
• CSS 写在 ；别写进 下面，否则可能闪动或失效

哪些标签必须立刻会写，哪些可以先放着

• 到

  ：标题层级，不是“加粗”，是告诉浏览器“这是主标题”

• ：段落，别用多个
凑换行——HTML 会把连续空格缩成一个，语义也不对

• ：链接，href 值必须加引号，target="_blank" 要配 rel="noopener"，不然有安全风险
• ：alt 不是可选，是无障碍基础，空着或写“图片”会被读屏软件念出来
• 和 ：前者块级（独占一行），后者内联（不换行），别一上来就嵌套十层

别碰