直接写一个能被浏览器打开的HTML5页面是最短学习路径：新建.txt文件，改后缀为.html，内容严格按7行书写，编码选UTF-8（无BOM），双击用Chrome打开，看到“你好，HTML”即成功；常见失败因charset错设、lang缺失或文件名含中文空格。
别从“学HTML”开始，直接从“写一个能被浏览器打开的页面”开始——这是最短路径，也是唯一不会半途放弃的路径。
第一天就写出合法HTML5文件
很多人卡在第一步：连文件都打不开。问题不在标签，而在结构缺失或编码错误。
- 新建文本文件，后缀名必须是
.html（不是.txt或无后缀） - 内容只写这7行，一字不差：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一页</title> </head> <body> <h1>你好，HTML</h1> </body> </html>
- 用 VS Code 或记事本保存，**编码选 UTF-8（无BOM）**；用 Chrome 双击打开，看到标题才算成功
- 常见失败原因：
charset写成gbk、<html>漏了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">全替成<header>，<div class="nav">→<nav>，<div class="main">→<main> - 表单基础：
form包裹label+input，label用for关联input的id，input类型选text、email、submit
第4–7天用W3C验证器暴露隐性错误
浏览器能容错，但搜索引擎和屏幕阅读器不能。不验证=不知道自己写的HTML有多“瘸”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 打开 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.
第2周起用真实网页反向拆解
看10个教程不如拆1个真实页面。政府站、学校官网、开源项目页，结构干净、语义规范、无JS干扰。
- 打开 https://www.php.cn/link/5a68cb47058c98fe6d6e4971aedb0480，右键 →
查看网页源代码 - 搜
<main>，复制从<main>到对应</main>的整段 - 粘到 VS Code，删掉所有
style、script、内联class，只留标签和文字 - 观察：
<section>是否包裹有逻辑的主题块？<figure>是否配<figcaption>？<nav>里是否只有链接？
最容易被忽略的点：HTML不是“写完就能用”，而是“写对才能被正确理解”。alt 属性漏填、label 不关联 input、header 放在 main 外面——这些错误在浏览器里看不出问题，却让可访问性、SEO、后续CSS/JS维护全盘失效。
