直接双击打开html页面报net::err_file_not_found，根本原因是file://协议下路径解析错误：src/href必须用以html文件为基准的相对路径，且浏览器对file://有跨源限制，非代码错误而是协议级拦截。
直接双击打开就能跑的 HTML 页面，核心就三点：结构不崩、路径不乱、字符不炸。其他花活全是锦上添花，先稳住这三根柱子再说。
为什么双击 index.html 会报 net::ERR_FILE_NOT_FOUND
这是本地文件协议（file://）下最常见的路径错误。浏览器拒绝加载跨目录或拼错的资源，不是代码写错了，是路径算错了。
-
src和href必须用相对路径，且以 HTML 文件为基准点计算：同目录直接写style.css，子目录写css/style.css，上一级写../assets/logo.png - 别信 VS Code Live Server 的路径——它跑在
http://localhost:5500下，而双击走的是file:///，二者对./和/的解析完全不同 - 检查控制台报错里的完整路径，看它实际试图加载的是哪一串字符，再反推你该写什么
中文乱码、符号显示成方块怎么办
根本原因只有一个：<meta charset="UTF-8"> 没放对位置，或者被写成了 GB2312 这类过时编码。
- 必须放在
内、且越靠前越好——理想位置是<title></title>之前，确保浏览器在解析任何内容前就拿到编码声明 - 编辑器保存时选 “UTF-8 without BOM”，带 BOM 的 UTF-8 在部分旧浏览器里会触发额外空白或解析失败
- 如果用了中文标点（如“《》”“【】”）、全角空格、emoji，但页面显示异常，先确认是否真用 UTF-8 编码保存，而不是编辑器默认用了系统区域编码
移动端打开页面特别小、文字糊成一片
缺了 <meta name="viewport">，iOS Safari 默认按 980px 宽渲染，再缩放填满屏幕，结果字体小得没法读。
- 加这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，必须放在里，且在<title></title>后、任何 CSS<link>前 - 别写
user-scalable=no——它会让用户无法双指缩放，违反可访问性基本要求 - 测试时别只看 Chrome 模拟器，真机双击打开
index.html才算数；Android 浏览器对 viewport 解析更宽松，iOS 更严格
标题层级混乱、SEO 抓不到重点
不是标签越多越好，<h1></h1> 到 <h6></h6> 是逻辑树，不是字号调节器。
- 一个页面只应有一个
<h1></h1>，通常是主标题（如 “茶文化简介”），它定义页面主题 -
<h2></h2>是一级子模块（如 “历史渊源”“制作工艺”），<h3></h3>是其下的细分项，逐级嵌套，不能跳级或倒置 - 别用
<h2></h2>只为了把字变大——该用 CSS 的font-size就用 CSS，语义和样式要分开 - 搜索引擎和读屏软件都依赖这个结构，乱写会导致内容权重错配、视障用户导航困难
真正难的不是写多少标签，而是每次保存后都用文件管理器双击打开，关掉所有开发服务器，就看原生 file:// 下它能不能干净利落地撑起来——这才是静态页的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
