html文件必须以开头且顶格书写，否则触发怪异模式；完整结构需含lang、charset、viewport和title四要素；推荐vs code+live server开发，文件名用小写短横线并避免本地file://协议。
HTML文件必须以 开头
浏览器看到这行才按HTML5标准解析，否则可能进“怪异模式”——中文乱码、盒模型错乱、CSS失效都可能发生。它必须顶格写，前面不能有空格、注释或BOM字符。
- 常见错误：复制代码时不小心带了隐藏的UTF-8 BOM（尤其从某些网页粘贴），导致页面白屏且控制台无报错
- 验证方法：用VS Code打开文件 → 右下角查看编码是否为
UTF-8，点击后选Save with Encoding → UTF-8 - 别写成
或<code>——大小写不敏感，但统一小写是行业惯例，也避免Git里因大小写误判变更
一个能跑起来的最小HTML结构长什么样
不是只有<p>hello</p>就行，缺了关键元信息，中文会乱、手机会缩放异常、搜索引擎也难识别。
- 必含四要素：
+ <code>+<meta charset="UTF-8">+<title></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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2249" title="超级简历WonderCV"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679998691134.png" alt="超级简历WonderCV" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2249" title="超级简历WonderCV">超级简历WonderCV</a>
<p>免费求职简历模版下载制作，应届生职场人必备简历制作神器</p>
</div>
<a href="/ai/2249" title="超级简历WonderCV" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</body>
</html>
用什么工具写HTML最不踩坑
记事本能写，但没语法高亮、没自动补全、保存时容易误选txt编码格式——新手第一份HTML文件乱码，八成栽在这儿。
立即学习“前端免费学习笔记（深入）”；
- 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://127.0.0.1:5500/xxx.html——只有走HTTP服务，才算真正跨过了第一道门槛。 
