零基础5分钟内就能做出能打开的HTML网页，关键在于文件名必须为index.html、编码选UTF-8、保存类型选“所有文件”；缺一即导致打不开或乱码。
直接说结论：零基础做第一个能打开的HTML网页，5分钟内就能完成，关键不是学多少标签，而是把 index.html 文件保存对、编码选对、后缀写对——这三处错任意一个，浏览器就打不开或显示乱码。
为什么双击打开是空白页或乱码
这是新手最常卡住的地方。根本原因不是代码写错了，而是文件保存时没控制好底层参数：
- 文件名必须带
.html后缀（不能是.txt或没后缀） - 记事本保存时，“编码”必须选
UTF-8（不是 ANSI、不是 GBK） - “保存类型”必须选
所有文件（不是“文本文档 *.txt”） - VSCode 用户注意：
Live Server插件默认用 UTF-8，但若手动右键“Open with Live Server”失败，先检查右下角状态栏是否显示UTF-8，点它可切换
DOCTYPE html 和 lang="zh-CN" 必须写吗
必须。它们不显示在页面上，但影响浏览器解析行为和中文支持：
-
<!DOCTYPE html>缺失 → 浏览器进入怪异模式（Quirks Mode），CSS 布局可能完全错位 -
lang="zh-CN"缺失 → 屏幕阅读器读音不准，部分搜索引擎降权，且某些中文字体 fallback 失效 -
<meta charset="UTF-8">放在<head>里靠前位置，否则中文标题、段落一加载就变方块
结构搭完后，加内容该从哪几个标签开始
别背全部标签，先掌握 4 类刚需标签，覆盖 90% 的个人网页内容：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 标题类：
<h1>到<h6>—— 只用<h1>（页面主标题）和<h2>（模块小标题），其他层级留到后期优化 - 文本类：
<p>（段落）、<strong>（加粗）、<a href="xxx">（链接）—— 注意<a>必须带href属性，空值写href="#" - 容器类：
<div>（通用区块）、<header>/<main>/<footer>（语义化区块）—— 初期全用<div>不影响功能，但建议从第一版就尝试语义标签 - 媒体类：
<img src="images/photo.jpg" alt="我的照片">——src路径要相对，alt文字不可省，否则无障碍访问失败
CSS 样式怎么加才不会白写
新手常犯的错误是写了 CSS 却没生效，问题多出在作用域和加载顺序：
- 内部样式（写在
<style>里）：确保<style>在<head>内，且在<title>之后 - 外部样式（
<link rel="stylesheet" href="css/style.css">）：路径必须和实际目录一致；若css/文件夹不存在，浏览器控制台会报404错误 - 优先级陷阱：浏览器默认样式（如
<h1>的 margin）比你写的规则更“重”，初学建议加* { margin: 0; padding: 0; }清除默认间距 - 调试技巧：F12 打开开发者工具 → 点 Elements 面板 → 左侧点元素，右侧看 Styles 面板是否列出你的 CSS 规则；没出现说明路径错或语法错
真正难的不是写出第一个页面，而是让页面在 Chrome、Edge、Safari 里看起来差不多，以及图片不因路径错而变成红叉——这些细节不靠背文档，得靠每次保存后立刻双击打开、立刻按 F12 看 Console 和 Network 面板。
