播面 <meta> 标签有哪些常见用法？
HTML 中的 <meta> 标签位于文档的 <head> 部分，用于提供关于 HTML 文档的元数据（Metadata）。这些数据不会直接显示在页面上，但对于浏览器渲染、搜索引擎优化 (SEO)、社交媒体分享以及安全性至关重要。
以下是 <meta> 标签最常见的用法分类总结：
1. 基础必备 (Basic Essentials)
这两个标签是现代网页开发的“标配”，几乎每个页面都必须包含。
字符编码 (Character Set)
声明网页使用的字符编码，防止出现乱码。现代网页通常统一使用 UTF-8。html<meta charset="UTF-8">视口设置 (Viewport)
用于移动端响应式设计，控制页面的宽度和缩放比例。html<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width: 宽度等于设备屏幕宽度。initial-scale=1.0: 初始缩放比例为 1:1。
2. SEO 优化 (Search Engine Optimization)
这些标签帮助搜索引擎理解页面内容，并控制页面在搜索结果中的展示方式。
页面描述 (Description)
非常重要。这段文字通常会显示在 Google/百度搜索结果的标题下方。html<meta name="description" content="这是一个关于HTML教程的网站，提供详细的代码示例和指南。">关键词 (Keywords)
注意：由于被滥用，Google 等主流搜索引擎已不再将此作为排名依据，但部分小型引擎可能仍参考。html<meta name="keywords" content="HTML, CSS, JavaScript, 教程">机器人/爬虫控制 (Robots)
告诉搜索引擎是否抓取该页面或跟踪页面内的链接。html<meta name="robots" content="index, follow">index: 允许收录。noindex: 禁止收录。follow: 跟踪链接。nofollow: 不跟踪链接。
作者与版权 (Author & Copyright)
html<meta name="author" content="张三"> <meta name="copyright" content="Copyright © 2023 Company Name">
3. 社交媒体分享 (Social Media Graph)
当你的网页链接被分享到微信、Facebook、Twitter、LinkedIn 时，这些标签决定了卡片的标题、图片和描述。
Open Graph (OG) 协议 (Facebook, LinkedIn, 微信等通用)
html<meta property="og:title" content="文章标题"> <meta property="og:description" content="文章的简短描述"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:type" content="website">Twitter Cards (Twitter 专用)
html<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="文章标题"> <meta name="twitter:description" content="文章描述"> <meta name="twitter:image" content="https://example.com/image.jpg">
4. 浏览器行为与兼容性 (Browser Behavior)
控制浏览器的特定行为或渲染模式。
IE 兼容模式 (X-UA-Compatible)
强制 IE 浏览器使用最新的内核（Edge 模式）渲染页面。虽然 IE 已逐渐淘汰，但在维护旧项目时仍常见。html<meta http-equiv="X-UA-Compatible" content="IE=edge">自动刷新/重定向 (Refresh)
设置页面在多少秒后自动刷新或跳转到新 URL。html<!-- 30秒后刷新页面 --> <meta http-equiv="refresh" content="30"> <!-- 5秒后跳转到 Google --> <meta http-equiv="refresh" content="5;url=https://www.google.com">格式检测 (Format Detection)
禁止 iOS 等移动浏览器自动将数字识别为电话号码、邮箱或地址（防止自动加链接样式）。html<meta name="format-detection" content="telephone=no, email=no, address=no">
5. 安全与隐私 (Security & Privacy)
增强网页安全性，防止 XSS 攻击或控制隐私泄露。
内容安全策略 (Content Security Policy - CSP)
限制资源（脚本、图片、样式）的加载来源，是防御 XSS 攻击的强力手段。html<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.google.com">Referrer 策略 (Referrer Policy)
控制当用户点击链接跳转时，浏览器发送多少来源信息（Referer Header）给目标网站。html<meta name="referrer" content="no-referrer-when-downgrade">no-referrer: 完全不发送。origin: 只发送域名，不发送具体路径。
6. 移动端与 PWA (Mobile & PWA)
提升移动端 Web App 的体验。
主题颜色 (Theme Color)
改变移动端浏览器地址栏的颜色（如 Chrome for Android）。html<meta name="theme-color" content="#4285f4">Apple Web App 模式
当网站被添加到 iOS 主屏幕时，隐藏 Safari 的地址栏和工具栏，使其看起来像原生 App。html<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
总结：一个标准的 <head> 模板
通常一个现代化的商业网站头部会包含以下组合：
<head>
<!-- 基础 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO -->
<title>页面标题 - 网站名称</title>
<meta name="description" content="这里是页面的精彩描述，吸引用户点击。">
<meta name="robots" content="index, follow">
<!-- 社交分享 (Open Graph) -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://site.com/cover.jpg">
<meta property="og:url" content="https://site.com/current-page">
<!-- 移动端体验 -->
<meta name="theme-color" content="#ffffff">
</head>