HTML头部的charset和viewport元标签必须紧贴head开头且charset在前，否则会导致乱码、缩放失效等问题；title应唯一且≤50字符；CSS应尽早加载，JS推荐defer或放body底部；base和robots等meta标签需谨慎使用。

HTML 头部元数据不是“可有可无的装饰”，漏写或错序会直接导致页面乱码、移动端缩放失效、SEO 描述不显示，甚至脚本加载阻塞。

charset 和 viewport 必须放在最前面

浏览器解析 HTML 是从上到下流式进行的。如果 不在 开头几行，早期解析出的中文可能被错误解码为 ；同理， 若滞后，iOS Safari 会先以桌面模式渲染再重排，造成闪动或横向滚动条。

• 这两个 标签必须紧贴 开始，且顺序不能颠倒（charset 在前）
• 不要用 http-equiv="Content-Type" 替代 charset 属性——后者更可靠、更轻量
• 避免写成 content="width=375" 这类固定宽度值，它会破坏响应式行为

title 标签位置和内容长度要合理

决定浏览器标签页文字、收藏夹名称、搜索结果标题三处显示。它不参与 SEO 权重计算，但影响点击率。

• 必须存在且唯一，不能为空或仅含空格
• 建议控制在 50 个字符以内（Google 通常只展示前 60 字符，含省略号）
• 不要堆砌关键词，例如 反而降低可信度
• 动态页面中，服务端或 JS 更新 document.title 时，注意避免触发不必要的 history.pushState

link rel="stylesheet" 和 script 加载时机差异

CSS 和 JS 虽然都放在 ，但加载逻辑完全不同：CSS 是渲染阻塞资源，JS 默认是解析阻塞资源。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 应尽早出现（通常在 后），否则页面白屏时间延长
• <script src="app.js"></script> 放在 里会阻塞 HTML 解析，除非加 defer 或 async
• 现代实践倾向把 <script defer></script> 放在 末尾，或直接移入 底部
• 避免在 中混用 async 和 defer ——它们对执行顺序的保证不同，容易引发竞态

base 标签和 meta name 的隐蔽影响

和部分 标签看似小众，但一旦使用就全局生效，且难以调试。

• 会让所有相对路径链接（、）自动补前缀，但会干扰 window.location.href 解析，单页应用中慎用
• 会直接让搜索引擎跳过该页，上线前务必检查是否误加
• 不影响排名，但决定搜索结果摘要是否吸引人，建议每页单独写，长度控制在 155 字符内
• 多个同名 name 的 标签，浏览器只认第一个，后写的会被忽略

真正容易被忽略的，是 和 的位置刚性——它们不是“写进去就行”，而是必须卡在 最前端三行内，连一个空行都不能多。其他标签可以灵活，唯独这两条，浏览器不讲情面。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！