怎么写html文件_html文件创建编写【入门】

用记事本写html需注意：文件名必须为index.html（小写），编码选utf-8（无bom）；必备四要素——、、中（在前）、非空；本地双击打开用file://协议，图片用相对路径，js模块需本地服务；验证用w3c校验器。

用记事本就能写 HTML，但得先搞清文件后缀和编码

不是所有 .txt 文件改个名就能当 HTML 用。windows 记事本默认保存为 ANSI 编码，中文会乱码；Mac 的 TextEdit 默认导出富文本（.rtf），根本不是纯 HTML。

• 保存时必须选「另存为」→ 文件名填 index.html（不能是 index.htm 或 index.HTML，大小写在某些服务器上会出问题）
• 编码必须选 UTF-8（别选「UTF-8 with BOM」，BOM 会导致 PHP、Node.js 后端解析出错）
• 编辑器推荐：VS Code、sublime text、Notepad++ —— 它们新建文件默认就是 UTF-8 无 BOM，且能高亮 HTML 语法，少踩一半坑

最简 HTML 结构不能省这四行

浏览器对缺省标签容忍度高，但省掉关键部分会导致语义错误、seo 失效、移动端缩放异常，甚至某些 CSS 选择器失效。

• 必须有 ：没有它，IE 和旧版 edge 会进怪异模式（Quirks Mode），盒模型、<code>display: flex 全崩
• 必须有 ：不写 lang 属性，屏幕阅读器无法正确发音，Google 搜索结果可能降权
• 里必须有 <meta charset="UTF-8">：放在 <title></title> 前面，否则中文标题仍可能乱码
• 不能为空：哪怕只放一个 <p>Hello</p>，也比空着强——空 在某些嵌入式 webview 中会触发渲染异常

写完打不开？检查这三个真实路径问题

本地双击打开 HTML 文件，地址栏显示的是 file:/// 协议，不是 http://。这个差异会直接导致图片加载失败、ajax 请求被拦截、es6 模块报 CORS Error。

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

• 图片路径别写绝对 URL：用 <img src="logo.png" alt="怎么写html文件_html文件创建编写【入门】" >，而不是 <img src="/images/logo.png" alt="怎么写html文件_html文件创建编写【入门】" >（/ 表示网站根目录，在 file:// 下指向硬盘根）
• JS 模块加载必须起本地服务：如果用了 import，直接双击会报错 Failed to load module script，得用 npx serve 或 VS Code 插件 Live Server 启一个 http://127.0.0.1:xxxx
• 路径区分大小写：Windows 资源管理器不敏感，但部署到 linux 服务器（nginx/apache）后，IMG.PNG 和 img.png 就是两个文件

验证 HTML 是否写对，别靠肉眼

浏览器开发者工具的 Elements 面板只显示渲染后的 dom，不是原始 HTML。很多结构错误（比如 <div> 套 <code><p></p>、<span></span> 里放 <div>）它不会报错，但会影响可访问性和搜索引擎抓取。 <ul> <li>用官方校验器：<a href="https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10">https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10</a> → 直接拖入 HTML 文件，它会指出 <code>Element X is not supported in this context 这类语义错误

真实项目里，HTML 很少手写到底层标签 —— 框架模板、CMS 输出、静态站生成器（如 Hugo、Jekyll）都在掩盖这些细节。但只要某天要改一个 404 页面、修一封邮件模板、或者调试 SSR 渲染结果，这些基础点就全冒出来了。