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