HTML文件必须以<!DOCTYPE html>开头且顶格书写，否则触发怪异模式；完整结构需含lang、charset、viewport和title四要素；推荐VS Code+Live Server开发，文件名用小写短横线并避免本地file://协议。

HTML文件必须以 <!DOCTYPE html> 开头

浏览器看到这行才按HTML5标准解析，否则可能进“怪异模式”——中文乱码、盒模型错乱、CSS失效都可能发生。它必须顶格写，前面不能有空格、注释或BOM字符。

• 常见错误：复制代码时不小心带了隐藏的UTF-8 BOM（尤其从某些网页粘贴），导致页面白屏且控制台无报错
• 验证方法：用VS Code打开文件 → 右下角查看编码是否为UTF-8，点击后选Save with Encoding → UTF-8
• 别写成<!doctype html>或<!DOCTYPE HTML>——大小写不敏感，但统一小写是行业惯例，也避免Git里因大小写误判变更

一个能跑起来的最小HTML结构长什么样

不是只有<html><body><p>hello</p></body></html>就行，缺了关键元信息，中文会乱、手机会缩放异常、搜索引擎也难识别。

• 必含四要素：<!DOCTYPE html> + <html lang="zh-CN"> + <meta charset="UTF-8"> + <title>
• lang="zh-CN"不只是可读性提示，还影响屏幕阅读器发音、拼写检查、甚至某些CSS伪类（如:lang()）行为
• 漏掉<meta name="viewport" content="width=device-width, initial-scale=1.0">？PC端看不出问题，但手机上页面会默认按980px渲染，文字小得根本没法读

<!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>
  <p>你好，世界</p>
</body>
</html>

用什么工具写HTML最不踩坑

记事本能写，但没语法高亮、没自动补全、保存时容易误选txt编码格式——新手第一份HTML文件乱码，八成栽在这儿。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• VS Code是当前最稳选择：装完开箱即用，输入!再按Tab就能生成完整骨架，连lang和viewport都预置好了
• 务必装Live Server插件：右键点Go Live，改完保存自动刷新浏览器，不用反复手动F5
• 别用Word或WPS另存为HTML——它们会塞进大量冗余样式和私有标签，根本不是标准HTML，调试时会怀疑人生

文件名和路径这些细节真会影响运行

叫index.html和首页.html看起来都能打开，但实际差异很大。

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

• 服务器默认找index.html；如果部署到GitHub Pages或Nginx，起名page.html就得手动输完整路径才能访问
• 文件名含中文或空格（如我的网页.html）在命令行、Git或某些CDN里会出编码问题，推荐全小写+短横线：my-first-page.html
• 别把HTML文件直接丢在桌面或C盘根目录——浏览器出于安全限制，可能拒绝加载本地file://协议下的某些资源（比如AJAX、字体文件）

有些坑不在语法里，而在文件系统和HTTP协议的交界处。写完别急着分享链接，先用VS Code + Live Server本地跑一遍，看地址栏是不是http://127.0.0.1:5500/xxx.html——只有走HTTP服务，才算真正跨过了第一道门槛。