HTML头部的charset和viewport元标签必须紧贴head开头且charset在前，否则会导致乱码、缩放失效等问题；title应唯一且≤50字符；CSS应尽早加载，JS推荐defer或放body底部；base和robots等meta标签需谨慎使用。
HTML 头部元数据不是“可有可无的装饰”，漏写或错序会直接导致页面乱码、移动端缩放失效、SEO 描述不显示，甚至脚本加载阻塞。
charset 和 viewport 必须放在最前面
浏览器解析 HTML 是从上到下流式进行的。如果 <meta charset="UTF-8"> 不在 开头几行，早期解析出的中文可能被错误解码为 ；同理，<meta name="viewport" content="width=device-width, initial-scale=1.0"> 若滞后，iOS Safari 会先以桌面模式渲染再重排，造成闪动或横向滚动条。
- 这两个
<meta>标签必须紧贴开始，且顺序不能颠倒（charset 在前） - 不要用
http-equiv="Content-Type"替代charset属性——后者更可靠、更轻量 - 避免写成
content="width=375"这类固定宽度值，它会破坏响应式行为
title 标签位置和内容长度要合理
<title></title> 决定浏览器标签页文字、收藏夹名称、搜索结果标题三处显示。它不参与 SEO 权重计算，但影响点击率。
- 必须存在且唯一，不能为空或仅含空格
- 建议控制在 50 个字符以内（Google 通常只展示前 60 字符，含省略号）
- 不要堆砌关键词，例如
<title>HTML 教程 HTML 入门 HTML 基础</title>反而降低可信度 - 动态页面中，服务端或 JS 更新
document.title时，注意避免触发不必要的 history.pushState
link rel="stylesheet" 和 script 加载时机差异
CSS 和 JS 虽然都放在 ，但加载逻辑完全不同：CSS 是渲染阻塞资源，JS 默认是解析阻塞资源。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="style.css">应尽早出现（通常在<title></title>后），否则页面白屏时间延长 -
<script src="app.js"></script>放在里会阻塞 HTML 解析，除非加defer或async - 现代实践倾向把
<script defer></script>放在末尾，或直接移入底部 - 避免在
中混用async和defer——它们对执行顺序的保证不同，容易引发竞态
base 标签和 meta name 的隐蔽影响
<base> 和部分 <meta name> 标签看似小众，但一旦使用就全局生效，且难以调试。
-
<base href="/assets/">会让所有相对路径链接（<a href="about.html"></a>、<img src="logo.png" alt="制作HTML网页怎么编写头部元数据信息" >）自动补前缀，但会干扰window.location.href解析，单页应用中慎用 -
<meta name="robots" content="noindex, nofollow">会直接让搜索引擎跳过该页，上线前务必检查是否误加 -
<meta name="description" content="...">不影响排名，但决定搜索结果摘要是否吸引人，建议每页单独写，长度控制在 155 字符内 - 多个同名
name的<meta>标签，浏览器只认第一个，后写的会被忽略
真正容易被忽略的，是 <meta charset> 和 <meta viewport> 的位置刚性——它们不是“写进去就行”，而是必须卡在 最前端三行内，连一个空行都不能多。其他标签可以灵活，唯独这两条，浏览器不讲情面。
