能跑的第一个html文件需用记事本保存为utf-8编码、.html后缀，内容包含、、（含和）、（含）这7行结构，缺一不可。
怎么写出第一个能被浏览器打开的 HTML 文件
别用在线编辑器或 IDE 模板，就用记事本（或 VS Code 的纯文本模式）新建一个文件，保存为 index.html，内容只写这 7 行：
<meta charset="UTF-8"><title>我的页面</title><h1>你好，世界</h1>
双击打开它——看到标题了，就说明成功了。关键点：
必须顶格写在第一行，少个空格或换行都可能触发怪异模式-
lang="zh-CN"不影响显示，但影响屏幕阅读器和 SEO，建议加上 -
<meta charset="UTF-8">决定中文能不能正常显示，漏掉会变乱码 -
<h1></h1>必须放在里，放里不会报错，但不会渲染出来
哪些标签最常写错或被滥用
新手容易把语义当装饰用，结果代码看着像，实际结构混乱。几个高频翻车点：
- 用
<div> 套 <code><div> 套 <code><div> 代替 <code><h2></h2>、<p></p>、<ul></ul>：浏览器能显示，但搜索引擎和无障碍工具完全无法理解内容层级 - 把
<br>当段落分隔符：它只是换行，不是段落；正确做法是用多个<p></p>，否则打印或缩放时布局崩坏 - 误用
<strong></strong>和<b></b>：前者表示「重要性」，后者只是「加粗样式」；语义不同，CSS 可以重定义<strong></strong>的表现，但不能改变它的含义 -
<img>忘写alt属性：不是可选项，是 WCAG 合规强制项；空字符串alt=""也比不写强（表示该图纯装饰） - 把代码粘贴到 W3C Markup Validation Service，选 “Text input”，它会指出缺失结束标签、嵌套错误、非法属性等硬伤
- 在 Chrome DevTools 里按
Ctrl+Shift+I→ Elements 面板，观察 DOM 树是否和你写的标签结构一致；比如<p></p> <div>xxx</div>会被自动修正为<p>xxx</p> <div></div>，这就是浏览器在帮你兜底，但你不该依赖它 - 禁用 CSS 后（DevTools → Settings → Preferences → Elements → “Disable styles”），页面仍应保持基本可读性和逻辑顺序——这才是语义化标签的真实价值
- 结构类：
<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<footer></footer> - 文本类：
<h1>–<h6></h6> </h1>、<p></p>、<ul></ul>/<ol></ol>/<li>、<strong></strong>、<em></em>、<blockquote></blockquote> - 媒体与链接：
<a></a>、<img>、<figure></figure>/<figcaption></figcaption>
怎样验证自己写的 HTML 是合法且健壮的
别依赖浏览器“看起来没问题”。真实项目中，以下检查能提前避开大坑：
为什么不用立即学所有标签
HTML5 有上百个标签，但日常开发真正高频使用的不到 20 个。优先掌握这些就够了：
剩下那些像 <meter></meter>、<progress></progress>、<ruby></ruby>，等真遇到对应场景再查文档——它们存在，但不是入门门槛。
