一个能跑的最小HTML文件只需5行：必须首行，定义语言，内含（须在前）和，含可见内容；缺任一关键结构或编码错误将导致空白、乱码或标题不显。
直接上手：一个能跑的最小HTML文件长什么样
不是所有HTML都得写满百行才有效。最简可用的静态网页，只要5行就能在浏览器里打开看到内容——关键在于结构合法、编码正确、路径不崩。
常见错误现象：页面空白、中文乱码、标题没显示，八成是漏了<doctype html></doctype>或<meta charset="UTF-8">这两句。
-
<doctype html></doctype>必须放在第一行，不能省，也不能写成（大小写不敏感但习惯大写） -
里的lang属性别空着，它影响屏幕阅读器和搜索引擎对语言的判断 -
<meta charset="UTF-8">必须在<title></title>之前，否则中文标题可能变问号 - 保存文件时，编辑器要选“UTF-8无BOM”编码，VS Code默认就是，记事本则容易偷偷加BOM导致乱码
图片和链接怎么写才不404
本地开发阶段，src和href出错是最高频的部署失败原因。不是代码语法错，而是路径算错了。
使用场景：你把index.html和photo.jpg放在同一文件夹，但浏览器报GET /photo.jpg 404——说明路径没被正确解析。
立即学习“前端免费学习笔记（深入）”；
- 图片用
<img src="photo.jpg" alt="描述">，前提是photo.jpg和HTML在同一目录；如果图片在images/子目录，就得写src="images/photo.jpg" - 上一级目录用
../，比如HTML在pages/about.html，想引用根目录下的style.css，就写href="../style.css" - 绝对路径（以
/开头）从网站根目录算起，适合部署后使用，但本地双击打开HTML文件时会失效——因为没有HTTP服务器，/css/main.css会被当成磁盘根目录去找 - 链接到其他HTML页，比如
<a href="contact.html">联系我</a>，目标文件名必须完全一致，包括大小写（Linux服务器区分大小写）
为什么改完CSS没变化？缓存和加载顺序问题
写了新样式却看不到效果，大概率不是CSS写错了，而是浏览器没加载你刚保存的版本。
性能 / 兼容性影响：CSS必须在里通过<link>引入，或用<style></style>内联，不能丢到底部——否则页面会先闪白再重绘，用户体验差，且部分旧浏览器可能忽略body里的style标签。
- 强制刷新：Windows/Linux按
Ctrl + F5，Mac按Cmd + Shift + R，绕过缓存读取最新CSS - 检查开发者工具（F12）的Network面板，看
style.css状态是不是200，还是304（缓存命中）或404（路径错） - 外部CSS文件名别含中文或空格，比如
我的样式.css在某些环境下会解析失败，统一用style.css或main.css - 如果用
<link rel="stylesheet" href="style.css">，确保style.css文件真实存在，且和HTML在同一级目录（除非路径已明确指定）
部署前必查的三个硬性条件
本地能打开 ≠ 上传后能访问。静态网页托管（如GitHub Pages、Vercel、Netlify）对文件结构有硬性要求，卡在这一步的人最多。
容易踩的坑：你传了index.html，但首页打不开，或者点导航跳转404——往往不是代码问题，而是结构或命名不符合平台规范。
- 首页文件名必须是
index.html（全小写，不能是Index.html或home.html），这是HTTP服务器默认查找的入口文件 - 所有资源（CSS、JS、图片）路径必须相对于
index.html的位置来写，不要依赖本地文件浏览器的“双击打开”行为 - GitHub Pages免费版只支持
docs/文件夹或gh-pages分支作为发布源，如果你把index.html直接扔在仓库根目录，记得在Settings → Pages里选Deploy from a branch并指定main / root
复杂点在于：路径逻辑和部署环境强耦合，本地调试时一切正常，一上传就挂——这时候别急着重写CSS，先打开浏览器的Network面板，看哪些资源返回了404，再反推路径该往哪调。
