必须将HTML文件保存为.html或.htm扩展名，编码设为UTF-8，并在<head>中首行声明<meta charset="UTF-8">，否则浏览器可能按默认编码解析导致乱码。
HTML 不是编程语言，写错逻辑不会报错，但结构错乱会导致内容不显示、样式失效或屏幕阅读器无法识别——所以入门关键不是“背多少标签”，而是**立刻写出能被浏览器正确解析的最小可运行文件**。
怎么用记事本 5 分钟跑通第一个 HTML 页面
别装工具、别配环境，就用系统自带编辑器，重点是绕过所有“保存失败”“双击打不开”“中文乱码”的坑：
- 新建文本文件 → 输入完整骨架（必须含
<!DOCTYPE html>和<html><head><meta charset="UTF-8"><title>xxx</title></head><body><h1>Hello</h1></body></html>） - 保存时：文件名填
index.html（不能带空格、不能是index.txt），保存类型选“所有文件”，编码选 UTF-8（记事本里点“另存为”右下角） - 双击打开前，先看文件图标是不是浏览器图标；如果不是，说明后缀没生效，重命名并确保显示了 .html（Win 系统需开启“显示文件扩展名”）
为什么 <meta charset="UTF-8"> 必须放在 <head> 最前面
浏览器解析 HTML 是从上到下流式进行的。如果中文出现在 <meta charset> 之前（比如写在 <title> 前面），那一段中文就会按默认编码（通常是 ISO-8859-1）解码，直接变成乱码且不可逆。
- 错误写法：
<title>我的网页</title><meta charset="UTF-8">→ 标题文字已乱码 - 正确顺序：
<meta charset="UTF-8">必须是<head>中第一个子元素 - VS Code 用户注意：即使设置了文件编码为 UTF-8，也得显式声明，否则某些旧版 Edge 或微信内置浏览器会忽略 BOM
<h1> 到 <h6> 不是字号控制，而是语义层级
新手常以为 <h1> 就是“最大标题”，拼命用它堆样式，结果导致 SEO 掉权、无障碍访问失败。实际中：
-
<h1>应全页唯一，代表页面核心主题（如文章标题、产品主名称） -
<h2>是<h1>的一级子模块（如“功能介绍”“用户评价”） - 跳过层级（如
<h1>后直接<h3>）会让屏幕阅读器困惑，部分读屏软件会跳过该标题 - 视觉样式交给 CSS 控制，不要靠
<h5>做小字备注 —— 那该用<p>+ class
图片不显示？先查 src 路径和 alt 属性是否合法
<img> 是自闭合标签，但它的两个属性极其敏感：
立即学习“前端免费学习笔记（深入）”；
-
src值必须是相对路径（如./images/logo.png）或绝对 URL（如https://example.com/logo.png）；写成images\logo.png（反斜杠）或images/logo（缺后缀）都会 404 -
alt不是可选项，是强制可访问性要求；为空字符串alt=""表示“该图纯装饰，无需描述”，但绝不能省略属性本身 - 本地测试时，若图片和 HTML 不在同一文件夹，又没建
images/子目录，直接拖图片进编辑器生成的路径大概率错
index.html 放进空白文件夹，只改 <h1> 里的文字，能稳定看到效果，才算真正跨过第一道门槛。 
