直接新建并保存为index.html，粘贴标准HTML结构代码，双击即可在浏览器运行；必须包含、lang="zh-CN"和，否则易出现兼容模式、语言识别错误或中文乱码。

直接上手写一个能打开的 HTML 文件，比看十页理论更有效——只要文件后缀是 .html，双击就能在浏览器里运行。

用 VS Code 写第一个 index.html 文件

别下载什么“网页制作软件”，装个免费的 VS Code 就够了。新建文件 → 保存为 index.html（注意后缀必须是 .html）→ 在里面粘贴以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，HTML！</h1>
  <p>这是第一段文字。</p>
</body>
</html>

保存后，双击这个文件，它就会在默认浏览器中打开。重点记住这三处：

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

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 必须写在最顶行，缺了它，浏览器可能用“兼容模式”乱解析
• lang="zh-CN" 告诉浏览器页面语言是简体中文，对屏幕朗读、SEO 和字体回退都有实际影响
• <meta charset="UTF-8"> 必须有，否则中文会显示成乱码（常见错误：写了但拼错成 charaset 或漏引号）

常用标签怎么用？只记 5 个就够起步

初学阶段不需要背全部标签，先掌握这 5 个高频、不易出错的：

• <h1></h1> 到 <h6></h6>：标题层级，<h1></h1> 全页只能有一个，不是“字号越大越好”，而是语义上最重要
• <p></p>：段落，别用多个 <br> 换行来模拟段落，那会破坏可访问性和 SEO
• <a href="https://example.com">链接文字</a>：href 值必须加引号；想新窗口打开就加 target="_blank" rel="noopener"（后者防安全漏洞）
• <img src="photo.jpg" alt="猫咪玩耍">：src 是图片路径，alt 不是可选项——没写或写成空字符串，会影响视障用户和搜索引擎理解
• <ul><li>列表项</li></ul>：无序列表；有序列表用 <ol></ol>。别手动打短横或数字，让浏览器自动处理

为什么改了代码，浏览器没变？常见刷新陷阱

不是代码错了，大概率是缓存或路径问题：

• 按 Ctrl+R（Windows）或 Cmd+R（Mac）硬刷新，避免加载旧缓存
• 检查图片或 CSS 文件路径是否写错：比如 img/cat.jpg 实际放在同级目录，就得写成 cat.jpg，路径区分大小写
• 别用文件管理器“重命名”index.html 为 index.txt 再改回来——Windows 可能隐藏真实后缀，导致实际文件名变成 index.html.txt
• 如果用 VS Code 编辑，右下角状态栏确认编码确实是 UTF-8，不是 GBK 或 ISO-8859-1

下一步该做什么？别急着学 CSS 和 JS

先把 HTML 结构写扎实：尝试把一段公众号文章手动转成 HTML，只用 <h2></h2>、<p></p>、<img alt="初学者如何制作HTML网页？从零开始简明教程" >、<a></a> 和列表。过程中你会自然遇到问题，比如“怎么让图片居中？”“怎么加空行？”——这时候再去查 style="max-width:90%" 或 <br> 才真正记得住。过早混入 CSS 会让初学者分不清“结构”和“样式”的边界，反而拖慢进度。