HTML
没有绝对“必须”的标签，但浏览器解析页面时，<meta charset="utf-8"> 和 <title></title> 是实际运行中不可省略的。缺前者，中文乱码、表单提交异常、JS 字符串处理出错；缺后者，SEO 彻底失效，书签和历史记录显示为空白，屏幕阅读器无法识别页面主题。
常见错误现象： 符号乱码、微信内嵌浏览器白屏、Chrome 控制台报 Failed to decode param；使用场景包括静态页、SSR 输出、模板引擎生成 HTML 的初始骨架。
-
<meta charset="utf-8">必须放在最前面（早于任何含文本内容的标签，比如<title></title>） -
<title></title>可以空着，但不能缺失；值应具业务含义，避免全站统一写“首页” -
<meta name="viewport">在移动端不是可选——没有它，页面会以桌面宽度渲染，文字小到无法点击
引入 CSS 和 JS 的顺序与位置怎么定
CSS 必须在 内用 <link rel="stylesheet"> 引入，JS 默认阻塞渲染，所以 <script></script> 标签放哪儿，直接影响首屏时间。
性能影响明显：把 <script src="app.js"></script> 放在 顶部，浏览器会暂停 HTML 解析，等 JS 下载、编译、执行完才继续；而用户看到白屏的时间就延长了。
立即学习“前端免费学习笔记（深入）”；
- 关键 CSS（如重置样式、布局基础类）建议内联为
<style></style>，避免额外请求 - 非关键 JS（如统计、广告）加
defer属性，并放在里——它会并行下载，等 DOM 解析完再执行 - 必须同步执行的初始化脚本（如某些 polyfill），可用
type="module"替代defer，现代浏览器自动延迟且保证执行顺序
<link rel="icon"> 和 <link rel="apple-touch-icon"> 怎么配才不翻车
图标看似简单，但路径错、尺寸漏、格式硬编码，会导致地址栏图标空白、PWA 添加失败、iOS 主屏图标模糊甚至不显示。
兼容性影响大：Safari 对 apple-touch-icon 路径极其敏感，不支持相对路径里的 ../ 回退；Android Chrome 则会忽略未声明 sizes 的 icon。
-
<link rel="icon" href="/favicon.ico">—— 必须是.ico格式，路径以/开头（根相对），否则部署到子路径时 404 -
<link rel="icon" href="/icon.svg" type="image/svg+xml">—— 现代浏览器支持，但 IE 和旧 Android WebView 不认，需和.ico共存 -
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">——sizes属性不能少，文件必须是 PNG，且严格 180×180 像素
SEO 和 Open Graph 标签容易被忽略的细节
搜索引擎和社交平台抓取页面时，只读 ，不会执行 JS；所以动态设置的 <title></title> 或 og:title 如果没服务端输出，它们就永远看不到。
常见错误现象：微信分享卡片标题是“Loading…”、百度搜索结果摘要为空白、Twitter 卡片图裂开——基本都是 og:image 路径 404 或未加 https:// 绝对地址导致的。
-
<meta name="description" content="...">值长度控制在 70–160 字符，超长会被截断，且不能含换行或 HTML 实体 -
<meta property="og:image" content="https://example.com/cover.jpg">—— 必须是 HTTPS 绝对地址，图片尺寸建议 ≥ 1200×630，否则 LinkedIn 拒绝渲染 -
<link rel="canonical" href="https://example.com/page">对分页、参数过滤页防重复收录很关键，但很多人写成相对路径或漏写协议
最麻烦的是多语言站点：每个语言版本都要单独配置 hreflang，而且 和 og:locale 必须一致，否则 Facebook 会降权。
