HTML乱码主因是编码声明与文件实际保存编码不一致，须确保编辑器保存为UTF-8无BOM、置于最前且无BOM/空格干扰、HTTP响应头Content-Type charset=utf-8三者统一。

不难，但容易在“看起来会了”和“真能写对”之间卡住。关键不在语法多复杂，而在是否踩准了几个隐性门槛：编码设置、标签闭合习惯、浏览器解析容错带来的错觉。

为什么用记事本写HTML总乱码？

本质是字符编码没对齐。浏览器默认按系统编码（比如 GBK）读取文件，但 HTML 里写了 ，两者打架就显示方块或问号。

• 保存文件时，必须手动选「UTF-8 无 BOM」——记事本默认是 ANSI 或 UTF-8 with BOM，VS Code 默认是 UTF-8，但得确认右下角状态栏显示的是「UTF-8」而非「GBK」
• 必须放在 最前面，且不能写成 （引号用中文符号）或 charset=utf8（少个 -）
• 如果已经乱码，别改代码，先用编辑器重新以 UTF-8 编码打开文件，再另存为 UTF-8

写完双击打不开，或者只显示空白？

不是代码错了，大概率是文件后缀或路径问题。浏览器只认 .html 或 .htm，其他后缀（比如 .txt、.html.txt）它直接当文本文件处理，不解析标签。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• Windows 下要开启「显示文件扩展名」：进「文件夹选项」→ 勾选「显示文件扩展名」，否则你看到的 index.html 实际可能是 index.html.txt
• 文件名避免中文、空格、特殊符号，用 index.html、about-me.html 这类纯英文+短横线命名
• 如果用了图片或链接，路径写相对路径（比如 ），就得确保 images/ 文件夹真在同级目录下；写错路径不会报错，只是显示空白或占位符

为什么 W3C 验证报一堆错误，但页面照样显示？

因为浏览器做了大量容错处理：自动补全缺失的 、忽略未闭合的

、把

当成嵌套……但这不等于合法，也不代表无障碍或 SEO 友好。

• 验证工具（如 validator.w3.org）检测的是标准符合度，不是渲染结果。报 Element “img” is missing required attribute “src” 就说明这个 标签根本没加 src，属于结构性错误
• 常见低级但高频错误： 中的 # 不是占位符，是真实 URL，应写 href="javascript:void(0)" 或留空 href="" 再加 JS 控制； 没配 ，影响可访问性
• 语义化不是加分项，是基础要求。用
  而不用

  ，对人眼没差别，但对屏幕阅读器、搜索引擎就是不可读的

  真正卡住小白的，从来不是标签记不住，而是这些“看不见的规则”：编码、路径、验证逻辑、语义边界。它们不报错，却让代码在协作、上线、适配时突然崩出各种诡异问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！