直接写一个能被浏览器打开的html5页面是最短学习路径：新建.txt文件，改后缀为.html，内容严格按7行书写，编码选utf-8（无bom），双击用chrome打开，看到“你好，html”即成功；常见失败因charset错设、lang缺失或文件名含中文空格。
别从“学HTML”开始，直接从“写一个能被浏览器打开的页面”开始——这是最短路径，也是唯一不会半途放弃的路径。
第一天就写出合法HTML5文件
很多人卡在第一步：连文件都打不开。问题不在标签，而在结构缺失或编码错误。
- 新建文本文件，后缀名必须是
.html（不是.txt或无后缀） - 内容只写这7行，一字不差：
<meta charset="UTF-8"><title>我的第一页</title><h1>你好，HTML</h1>
- 用 VS Code 或记事本保存，**编码选 UTF-8（无BOM）**；用 Chrome 双击打开，看到标题才算成功
- 常见失败原因：
charset写成gbk、漏了lang属性、文件名含中文或空格
前3天只练5类标签+语义容器
别背全部标签。先掌握能立刻组织起内容骨架的5组，覆盖90%静态页需求。
- 文本流：
h1–h6、p、strong、em、br（hr慎用，它不是分隔线语义） - 链接与图片：
a必带href，img必带src和alt（哪怕写“占位图”） - 列表：
ul+li做导航/技能项，ol+li做步骤说明，dl/dt/dd做术语解释 - 语义容器：把原
<div class="header"> 全替成 <code><header></header>，<div class="nav"> → <code><nav></nav>，<div class="main"> → <code><main></main> - 表单基础：
form包裹label+input，label用for关联input的id，input类型选text、email、submit - 打开 https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10，选
Validate by Direct Input - 把刚写的HTML全文粘贴进去，点
Check - 重点盯三类报错：
Element “img” is missing required attribute “src”、Bad value “#” for attribute “href” on element “a”、Start tag “div” seen but an element of the same type was already open - 每次修复1个错误，再验证——不要跳过警告（Warning），比如
Section lacks heading. Consider using “h2”–“h6” elements to add identifying headings to all sections. - 打开 https://www.php.cn/link/5a68cb47058c98fe6d6e4971aedb0480，右键 →
查看网页源代码 - 搜
<main></main>，复制从<main></main>到对应的整段 - 粘到 VS Code，删掉所有
style、script、内联class，只留标签和文字 - 观察：
<section></section>是否包裹有逻辑的主题块？<figure></figure>是否配<figcaption></figcaption>？<nav></nav>里是否只有链接？
第4–7天用W3C验证器暴露隐性错误
浏览器能容错，但搜索引擎和屏幕阅读器不能。不验证=不知道自己写的HTML有多“瘸”。
第2周起用真实网页反向拆解
看10个教程不如拆1个真实页面。政府站、学校官网、开源项目页，结构干净、语义规范、无JS干扰。
最容易被忽略的点：HTML不是“写完就能用”，而是“写对才能被正确理解”。alt 属性漏填、label 不关联 input、header 放在 main 外面——这些错误在浏览器里看不出问题，却让可访问性、SEO、后续CSS/JS维护全盘失效。
