直接写HTML文件即可打开网页，无需编程基础；用记事本（Mac用TextEdit纯文本模式）输入7行代码，注意DOCTYPE声明、英文符号、UTF-8编码及index.html命名，双击即运行。

直接上手写一个能打开的网页，比看十小时理论更有效。你不需要懂编程，只要会复制粘贴、用英文输入法、保存为 .html 后缀，就能立刻看到效果。

先写出第一个能运行的HTML文件

别下载复杂工具，用系统自带的记事本就行（Mac 用 TextEdit，但要切到纯文本模式）。按顺序敲这 7 行：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，世界！</h1>
</body>
</html>

重点注意：

• 第一行 <!DOCTYPE html> 必须有，且必须是文件最开头，前面不能空行、不能有空格
• 所有尖括号 和 <code>> 都是英文符号，中文输入法下打出来的是全角符号，浏览器直接不解析
• 保存时，文件名填 index.html（不要加.txt），编码选 UTF-8（记事本里点“另存为”，底部有“编码”下拉菜单）
• 双击这个文件，就会在默认浏览器里打开——你已经完成了第一个网页

为什么必须用 <!DOCTYPE html> 开头

它不是标签，而是告诉浏览器：“请用 HTML5 标准来解析下面的内容”。没有它，老版本 IE 会进“怪异模式”，现代浏览器也可能降级渲染，导致 CSS 错位、盒模型异常、甚至 flex 布局完全失效。

常见错误现象：

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 明明写了 display: flex，子元素却堆成一列不动
• 设置 margin: 0 auto 居中，页面内容却靠左贴边
• Chrome 开发者工具 Elements 面板里，html 标签上方显示 “DOCTYPE html not found” 警告

VS Code 里快速生成骨架的方法

装好 VS Code 并启用 HTML 插件后，在新建的空白文件中输入 ! 再按 Tab 或 Enter，就会自动生成带 <!DOCTYPE html>、<meta charset="UTF-8">、<meta name="viewport"> 的完整结构。

这个快捷方式省掉手动敲 7 行，但前提是：

• 文件后缀必须是 .html（否则 ! 不触发）
• 不要在已有内容的文件里乱按 !，可能把正文替换成骨架
• 生成的 <meta charset="UTF-8"> 是防中文乱码的关键，删掉就可能看到“我的第一个网页”这种

新手最容易忽略的三个执行细节

不是语法难，而是环境和操作卡住人：

• 用中文输入法写代码 → 所有 <code>> / 都变成全角，浏览器报错“unexpected token”
• 保存成 index.txt 或没改后缀 → 双击用记事本打开，而不是浏览器
• 改完代码后没刷新浏览器（尤其是用文件协议 file:/// 打开时）→ 一直看旧页面，以为代码没生效

真正卡住初学者的，从来不是标签怎么写，而是这些“看不见的上下文”。把这三个点盯死，接下来学 <img>、<a>、<div> 就全是确定性动作了。