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