title 标签必须且只能在 head 中出现一次，决定浏览器标签页标题、影响 SEO 和书签；meta charset="utf-8" 必须置于 head 最前以避免乱码；viewport meta 对移动端显示至关重要；description 仍有摘要作用但 keywords 已基本无效。
title 标签必须放在 head 里，且只写一次
浏览器标签页上显示的标题就来自 <title>，它不参与页面渲染，但影响 SEO 和书签识别。位置必须在 <head> 内部，且整个 HTML 中只能有一个——重复写会被忽略，只取第一个。
常见错误是把 <title> 放到 <body> 里，或在模板中被多次 include 导致嵌套出两个。检查方法：右键“查看网页源代码”，确认 <title> 出现在 <head> 和 </head> 之间，且无重复。
meta charset 必须设为 utf-8，且放在 head 最前面
<meta charset="utf-8"> 告诉浏览器用 UTF-8 解码页面，否则中文可能乱码。它必须是 <head> 中第一个标签（或至少在任何 <title> 或外部资源前），因为浏览器一读到非 ASCII 字符就立即按当前编码解析，晚了就来不及纠正。
不要写成 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">，那是旧写法，兼容性差且更易出错。现代 HTML5 只认 charset 属性。
立即学习“前端免费学习笔记（深入）”；
viewport meta 影响移动端显示，不加会默认缩放
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，手机浏览器会以桌面宽度（通常是 980px）渲染页面，然后整体缩小显示，导致文字小、点击困难。这个 meta 不影响 PC 端，但对所有移动设备是刚需。
常见误配：
-
user-scalable=no—— 禁止缩放，对可访问性不友好，多数场景不该加 -
maximum-scale=1—— 同样限制用户操作，iOS 13+ 已部分忽略 - 漏掉
initial-scale=1—— 可能触发双击放大逻辑，造成意外跳转
description 和 keywords meta 对 SEO 的实际作用已很弱
<meta name="description" content="..."> 仍会被搜索引擎用作搜索结果摘要（如果匹配），但不会影响排名；<meta name="keywords" content="..."> 几乎被所有主流引擎忽略，写了也没用，还占字节。
真正该关注的是语义化结构：<h1> 标题、图片的 alt 属性、合理的 heading 层级。如果真要优化搜索露出，优先确保 <title> 和正文首段含关键词，而不是堆砌 meta。
个人页面不用硬凑 keywords，description 控制在 155 字符内即可，避免被截断。
