直接用记事本创建index.html文件，输入标准HTML5结构并保存为UTF-8编码，双击即可在浏览器运行；关键在于<!DOCTYPE html>声明、<meta charset="UTF-8">和<html lang="zh-CN">三者缺一不可，否则将导致解析错误或乱码。
直接上手写一个能双击打开的 .html 文件，就是最有效的起点——不需要装任何软件、不依赖网络、不配置环境，记事本就能开始。
从第一个可运行文件开始，不是从“HTML是什么”开始
新手最容易卡在“学概念→查资料→忘命令→放弃”的循环里。真正该做的，是跳过所有理论介绍，立刻生成一个浏览器能认、能显示、能修改的页面。
- 新建一个纯文本文件，保存为
index.html（后缀必须是.html，不能是.txt） - 内容只写这 7 行，一字不差：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>Hello, HTML</h1> </body> </html>
- 用 Chrome 或 Edge 双击打开，看到标题就成功了
如果打不开或显示乱码，90% 是因为：没选 UTF-8 编码保存（VS Code 默认是 UTF-8，但记事本要手动选“另存为→编码→UTF-8”），或 lang 属性漏写、charset 写成 gbk。
lang 和 charset 不是可选项，是解析前提
浏览器拿到 HTML 文件后，第一件事不是渲染文字，而是决定“用什么规则读这些字节”。charset 告诉它按 UTF-8 解码，lang 告诉它这是中文内容——这两项一旦出错，后续所有标签都可能被误判或跳过。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<meta charset="UTF-8">必须放在<head>最前面，越靠前越好；写成utf8、UTF8或漏掉引号都会失效 -
<html lang="zh-CN">中的zh-CN是标准写法，不要简写成zh或cn，否则部分屏幕阅读器和 SEO 工具无法识别语言区域 - 如果本地测试时发现中文变方块、标点错位、甚至整个
<body>不显示，先检查这两处
别背标签，先建立“结构直觉”
初学者常陷入“该用 div 还是 section？”“strong 和 em 有什么区别？”这类问题，其实现阶段根本不用深究。重点是建立“哪里放什么”的直觉：
-
<header>、<nav>、<main>、<footer>这类语义化标签，优先替代<div class="header">——不是为了时髦，而是让浏览器和辅助工具一眼看懂结构 - 所有内容必须嵌套在
<body>里，<title>必须在<head>里，这两个位置错不了，也绝不能互换 - 图片必须带
alt属性（哪怕只是空字符串alt=""），链接的href不能写成#占位（W3C 验证会报错），这些是硬性约束，不是风格建议
验证方式很简单：把代码粘贴到 W3C Markup Validation Service 的 “Validate by Direct Input” 里点 Check，红色错误必须改，黄色 warning 可暂缓。
下一步不是学更多标签，而是破坏再修复
把刚写的 index.html 复制三份，分别做以下改动，再观察浏览器反应：
- 删掉
<!DOCTYPE html>，看页面是否变成“怪异模式”（字体变小、布局错乱） - 把
<meta charset="UTF-8">换成<meta charset="GBK">，输入中文后保存，再打开看乱码 - 把
<h1>Hello, HTML</h1>移到<head>里，看标题是否消失
这种“故意搞坏→看报错→查原因→修回来”的过程，比抄十遍语法手册记得更牢。HTML 的容错性很强，但它的规则边界非常清晰——边界在哪，得亲手撞一次才知道。
