html文件必须保存为.html或.htm后缀、utf-8编码,并包含、和三要素,缺一不可。

直接上手写一个能打开的 index.html 文件,比看十篇教程都管用。别纠结“先学什么再学什么”,HTML 没有前置依赖,只要浏览器能打开,你就已经入门了。
怎么保存文件才能被浏览器识别为网页
很多人卡在这一步:写了代码,双击却弹出记事本或报错。核心就一条——后缀名必须是 .html 或 .htm,且保存类型选“所有文件”。
- Windows 记事本:点击「文件 → 另存为」→ 在「文件名」栏输入
index.html(注意引号不要带)→ 「保存类型」下拉选「所有文件」→ 点击保存 - Mac 文本编辑:「格式 → 使纯文本」→ 「文件 → 存储」→ 文件名填
index.html→ 编码选「Unicode (UTF-8)」→ 存储 - 常见错误:
index.txt.html、index.html.txt、没改保存类型导致实际存成index.html.txt—— 这些都会让双击失效
必须写对的三行“启动代码”
每次新建 HTML 文件,直接复制粘贴这三行,后面再填内容。少一行,浏览器可能不认,或者中文乱码、标题不显示。
<meta charset="UTF-8"><title>我的第一个网页</title><h1>你好,世界!</h1> <p>这是我的第一段文字。</p>
必须顶格写在第一行,不能缩进,不能加空格,不能漏叹号-
lang="zh-CN"不是必须,但加了能让屏幕阅读器和搜索引擎更好理解语言,建议加上 -
<meta charset="UTF-8">必须放在里,位置靠前;写成utf8或UTF8有些老浏览器可能不识别,严格用UTF-8
哪些标签写错会导致页面“看起来没反应”
不是代码报错才叫错——很多错误是静默失效:你写了,但浏览器根本不渲染,或者内容消失。最常踩的坑集中在标签闭合和路径大小写。
-
<p></p>忘写闭合:现代浏览器会自动补全,但若后面紧跟<div> 或其他块级元素,可能导致样式错位或 JS 获取不到内容 <li> <code><img src="photo.jpg" alt="描述">中的src路径错:文件在images/photo.jpg,却写成photo.jpg或Images/photo.jpg(Linux/macOS 区分大小写) -
@#@#@#@#@#@#@#@#@#@0:链接目标文件名拼错,比如写成abot.html,点击后 404,但页面本身完全正常,容易误以为“链接功能坏了” - 标签名写成大写:
<p>文字</p>虽然多数浏览器能渲染,但不符合 HTML5 规范,VS Code 等编辑器会标黄警告,协作时会被 lint 工具拦截 - 加一个
<h2></h2>,刷新看是否变小一号标题 - 加一张本地图片,刷新看是否加载成功;失败就立刻检查路径和文件是否存在
- 加一个
<ul><li>列表项</li></ul>,刷新确认是否出现圆点列表 - 修改
<title></title>内容,刷新后看浏览器标签页文字是否变化——这是验证是否生效最直观的方式
练完立刻能验证的最小闭环动作
别等“学完一章”再测试。每加一个新标签,就做一次“保存 → 切到浏览器 → Ctrl+R 刷新”。这个节奏一旦建立,学习速度会明显加快。
真正卡住新手的,从来不是标签记不住,而是“写了但看不见效果”时不知道从哪查起。路径、编码、后缀、大小写——这四个点盯死,90% 的“怎么没反应”问题当场解决。











