<meta charset="UTF-8">必须置于<head>最开头，否则浏览器会以错误编码解析前面的中文内容，导致乱码且无法挽回；<html lang="zh-CN">影响读屏、SEO和翻译；语义化标签保障嵌套安全与可访问性；<meta name="viewport">是响应式刚需，缺之则移动显示异常。

charset 必须放在 <head> 最开头，否则浏览器可能提前用错误编码解析内容，导致中文乱码或标签解析异常。

为什么 <meta charset="UTF-8"> 不能往后放？

浏览器从上到下解析 HTML，一旦开始渲染，就按当前已知编码解码后续字节。如果 <meta charset> 写在 <title> 后面，<title> 里的中文可能已被 GBK 或系统默认编码错误解码，再改 charset 也救不回来。

• 错误写法：<head><title>我的页面</title><meta charset="UTF-8"></head>
• 正确位置：必须是 <head> 的第一个子元素（紧随 <head> 开始标签之后）
• HTML5 不接受 http-equiv="Content-Type" 这种老写法，冗余且易出错

<html lang> 不只是“可有可无”的属性

<html lang="zh-CN"> 直接影响屏幕阅读器发音、搜索引擎语言识别和拼写检查。不写或写错（比如页面全是中文却写 lang="en"），会导致：

• 视障用户听到英文语音朗读中文内容
• Google 可能将页面归入错误地区索引（如把国内服务页推给英语国家用户）
• 浏览器内置翻译功能误判源语言，点“翻译”反而变乱码

多语言站点需配合 hreflang 使用，但单语页面至少确保 lang 值与实际内容一致。

语义化不是“锦上添花”，而是嵌套安全线

用 <div> 包一切看似省事，但会绕过浏览器对嵌套的校验规则，埋下兼容性隐患：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• <p> 里不能放 <div> —— 浏览器会自动闭合 <p>，导致 DOM 结构意外断裂
• <span> 里不能放 <section> 或 <ul> —— 行内元素不允许包含块级内容
• 用 <nav> 替代 <div class="nav">，不仅利于 SEO 和 a11y，还能让 CSS 选择器更精准（比如 nav a 不会误中 footer 里的链接）

语义标签不是装饰，是浏览器理解结构的契约。

<meta name="viewport"> 在移动设备上不是“可选”，是刚需

没有它，网页在手机上会以桌面宽度（通常 980px 左右）渲染，然后整体缩放显示，文字小得看不清，点击区域错位。

• 基础写法：<meta name="viewport" content="width=device-width, initial-scale=1">
• 禁用 user-scalable=no —— 它违反 WCAG 可访问性标准，且 iOS Safari 已部分忽略该指令
• 避免写死 width=375 等固定值，不同机型 viewport 宽度差异大，应始终用 device-width

这个标签漏掉，等于没做响应式——哪怕你写了所有媒体查询，页面也根本不会按预期缩放。

真正卡住新手的，往往不是“不会写”，而是“不知道哪一行代码正在悄悄破坏整个结构”。<meta charset> 放错位置、<html lang> 缺失、随意嵌套块级标签、漏掉 viewport —— 这四点，改完就能让页面从“勉强显示”变成“稳定可用”。