用记事本写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 这类语义错误
Auto Close Tag 和 Auto Rename Tag，能实时防漏闭合、防拼错标签名（比如把 <em></em> 打成 <en></en>）<pre class="brush:php;toolbar:false;"></pre> 里的换行删掉，或把 <textarea></textarea> 的内容格式化错，本地开发阶段完全不需要压缩真实项目里，HTML 很少手写到底层标签 —— 框架模板、CMS 输出、静态站生成器（如 Hugo、Jekyll）都在掩盖这些细节。但只要某天要改一个 404 页面、修一封邮件模板、或者调试 SSR 渲染结果，这些基础点就全冒出来了。
