能跑的html文件需满足：文件名index.html、utf-8无bom编码、含和，双击即可在浏览器打开；但含fetch、es6模块等功能时须用本地服务器（如python3 -m http.server）运行。
怎么从零写出一个能跑的HTML文件
直接新建一个 index.html 文件，用任意文本编辑器打开，粘贴以下内容并保存，双击就能在浏览器里打开——这是最短路径验证环境是否就绪：
<meta charset="UTF-8"><title>我的第一个页面</title><h1>Hello HTML</h1> <p>这行文字应该正常显示</p>
-
lang="zh-CN"不是可选装饰，它影响屏幕阅读器发音、搜索引擎语义识别，漏写会导致中文内容被误判为其他语言 -
<meta charset="UTF-8">必须放在最靠前位置，否则浏览器可能在解析到中文时已按默认编码（如 ISO-8859-1）读取，造成乱码且无法回溯 - 文件后缀必须是
.html或.htm，命名为index.txt或直接拖进浏览器地址栏输file:///xxx/xxx.txt都不会触发 HTML 解析
为什么 <div><p><strong>文字</strong></p></div> 能跑，但 <div><p></p></div> 会出错
浏览器解析 HTML 时依赖标签嵌套的“栈式结构”，不是简单数括号。交叉闭合破坏了父子关系，导致 DOM 构建失败。
- 错误写法
<div><p></p></div>中，提前弹出栈，此时<p></p>还在栈里，后续就成了“游离结束标签” - Chrome 开发者工具的
Elements面板会自动修正这类错误（比如把当作处理），但实际 DOM 结构已偏离预期，JavaScript 操作时容易找不到元素 - 验证方式：右键页面 → “查看页面源代码”，对比原始代码与实际渲染的 DOM 树，差异处就是嵌套断裂点
练习时该优先掌握哪几个标签组合
别一上来就背全部 110+ 个 HTML 标签。先闭环练熟三组高频组合，覆盖 80% 页面骨架需求：
-
<header></header>+<nav></nav>+<main></main>+<footer></footer>：语义化布局主干，比全用<div> 更利于 SEO 和无障碍访问 <li> <code><ul></ul>+<li>+@#@#@#@#@#@#@#@#@#@0，重点看 <code>Error行——比如Stray end tag "p"直接定位到多写的 - 在 Chrome 中按
F12打开开发者工具，切到Console标签页，刷新页面，留意是否有Failed to load resource（图片或 CSS 路径错）、Invalid character（复制粘贴带隐藏 Unicode 字符）
真实项目里，一个未闭合的 <li> 可能让整个列表渲染错位，而这种问题在预览窗口里看起来“好像也没啥”，只有验证工具和 Console 会立刻报警。
