双击HTML文件报错或乱码，主因是文件后缀错误（如保存为.txt）或编码非UTF-8；必须用“所有文件”类型保存为index.html，并在<head>中首行声明<meta charset="UTF-8">和<title>。
双击打开就报错？先确认文件后缀和编码
很多新手写完 index.html 双击没反应，或显示乱码，根本不是代码写错了——而是文件被保存成了 index.txt 或没选“所有文件”类型。Windows 记事本默认加 .txt，VS Code 也常因未手动指定编码而用 GBK 存储，但 HTML5 要求 UTF-8。
- 保存时务必选“另存为”，文件名填
index.html，下方“保存类型”选所有文件（不是“文本文档”） - 在 VS Code 中，右下角点击编码（如“GBK”），选
Save with Encoding → UTF-8 - 打开浏览器后按
F12，切换到Console标签，如果看到Failed to load resource: net::ERR_FILE_NOT_FOUND，八成是路径写错，不是语法问题
写三行就能跑，但别跳过 <head> 里的两行
网上流传的“三行 HTML”（<html><body><h1>我的第一个网页</h1></body></html>）确实能渲染，但缺了 <meta charset="UTF-8"> 和 <title>，会导致中文乱码、SEO 失效、甚至某些手机浏览器不识别页面语言。
-
<meta charset="UTF-8">必须放在<head>最前面，位置靠后可能被忽略 -
<title>不只是浏览器标签页上显示文字，还影响搜索引擎抓取和书签管理 - VS Code 里新建
.html文件后输入!再按Tab，会自动生成含这两项的标准骨架，比手敲更可靠
<img> 不显示？90% 是路径或 alt 漏了
图片加载失败几乎从不报红错，只留空白或占位符，排查起来特别隐蔽。它不像 JS 那样抛异常，HTML 容错太强，反而掩盖问题。
-
src值必须是相对路径（如images/logo.png）或绝对 URL（如https://example.com/logo.png），写成logo.png却没把图放同目录，就裂 -
alt属性不是可选的——它是可访问性强制要求，屏幕阅读器依赖它；缺失时 Chrome 开发者工具的Accessibility面板会标黄警告 - 路径区分大小写：Linux/macOS 服务器上，
Logo.png和logo.png是两个文件，本地双击可能不报错，一上传就挂
别查“所有标签”，先盯住这五个： <h1> <p> <a> <img> <div>
学 HTML 不是背字典。你不需要知道 <meter> 或 <wbr> 怎么用，但得清楚 <div> 是通用容器，<a> 必须带 href（哪怕只是 #），<h1> 到 <h6> 是层级关系而非字号关系。
立即学习“前端免费学习笔记（深入）”；
-
<a href="contact.html">联系我</a>中，contact.html必须真实存在，否则点击无响应——浏览器不会提示“文件不存在”，只会静默失败 -
<div>没语义，纯为布局；想表达“文章主体”就该用<main>，“导航栏”用<nav>，这对 SEO 和维护更重要 - 所有标签都小写，这是现代 HTML5 的事实标准；
<IMG SRC="x.jpg">虽能运行，但团队协作或校验工具（如 W3C Validator）会标为不规范
alt 忘写、或者以为 <div> 能替代所有语义标签。这些细节不报错，却让页面在别人机器上打不开、读屏软件念不出、搜索引擎不收录。 
