最简合法html页面骨架必须包含、、、四件套；缺一不可，否则浏览器可能进入怪异模式导致渲染异常。
怎么用最简 HTML 标签搭出可浏览的页面骨架
不写 CSS 也能看到内容，但必须保证结构合法、浏览器能解析。核心是 + <code> + + 四件套，缺一不可，否则部分浏览器会触发怪异模式（Quirks Mode），导致盒模型错乱或样式失效。
常见错误现象：h1 没包在 里、<meta charset="UTF-8"> 漏写或位置错（必须在 <title></title> 前）、<img> 缺 alt 属性被读屏工具报错。
-
<h1></h1>到<h6></h6>：语义优先，不要只为变大字体而滥用<h1></h1>；一个页面只应有一个<h1></h1> -
<p></p>：段落之间自带上下 margin，别用多个<br>模拟空行 -
<nav></nav>、<main></main>、<footer></footer>：HTML5 语义标签，比纯<div> 更利于 SEO 和辅助技术识别 <li> <code><img src="xxx.jpg" alt="描述文字">：alt不是可选项，是可访问性刚需；src路径错误时浏览器显示“破损图”，但控制台会报404 - 内联
<style></style>适合单页 Demo 或紧急调试，但一旦加了 20 行以上 CSS，就该拆出去 - 外链文件名建议用
style.css或main.css，避免用css.css这类无意义命名 - 路径错误时，浏览器控制台报
Failed to load resource: net::ERR_ABORTED，检查href是否拼错、是否少写了./或多写了斜杠 - CSS 里用相对路径引入图片（如
background: url(../images/bg.png)），路径基准是 CSS 文件所在位置，不是 HTML 文件 - 没这行，iOS Safari 默认按 980px 渲染，再缩小显示，导致点击区域小、文字糊 “initial-scale=1.0”不能省，否则某些安卓浏览器仍会默认缩放
- 如果用了
max-width: 100%或img { max-width: 100%; height: auto; }却还是溢出，先检查 viewport 是否缺失或拼写错误（比如写成viewpoint） - 响应式起步不必写媒体查询，先确保 viewport 正确 + 图片自适应 + 文字不强制固定像素（避免
font-size: 12px，改用rem或em） -
href和src值里不能有中文空格或特殊符号（如我的图片.jpg→ 改为my-img.jpg） - 本地双击打开 HTML 文件时，浏览器走的是
file://协议，部分功能受限（如fetch、某些 font 加载）；务必用 Live Server 启服务预览 - 邮箱链接写成
<a href="mailto:name@example.com"></a>，不是mailto:name@example.com（少href=就无效） - 外部链接加
target="_blank" rel="noopener"是安全习惯，防 opener 漏洞；但静态页若全站内链，不加也行
内联 style 和外链 CSS 文件，该选哪个
初学者常把所有样式写进 <style></style> 标签里，短期快，长期难维护。真正“快速构建”不是指写得快，而是改得快、查得清、复用稳。
外链 CSS（<link rel="stylesheet" href="style.css">）的优势在于：修改一处，全站响应；支持浏览器缓存；避免 HTML 文件臃肿；配合 VS Code 的 Emmet 或 Live Server 插件，保存即刷新，开发流更顺。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
让页面在手机上不缩成一团的关键设置
很多静态页 PC 看正常，手机一打开就文字小、布局挤、左右滑动——根本原因是漏了 viewport 元标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须放在 里，且要在其他 meta 和 <title></title> 之后、<link> 之前。它告诉浏览器：“别自动缩放，按设备真实宽度渲染”。
为什么链接点不开、图片不显示？先盯住这几个属性
静态页交互失效，90% 出在路径和协议上，不是代码逻辑问题。
超链接 <a href="about.html"></a> 和图片 <img src="images/logo.png"> 的路径都是相对于当前 HTML 文件的位置。层级一深，很容易错。
复杂点不在语法，而在路径意识——每次加新资源前，先确认它和 HTML 文件的相对位置，再写 src 或 href。这点被忽略最多，也最容易花半小时找不出原因。
