illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • <head> 七类合法子元素：<meta>、<title>、<link>、<style>、<base>、<script>、<noscript>
  • 三条铁律：<!DOCTYPE html> 触发标准模式；<meta charset="utf-8"> 在前 1024 字节内；<meta name="viewport"> 必写
  • 顺序：charset → viewport → title → 其余 meta → CSS / preload
  • 描述非排名因素但作摘要；keywords 已废；canonical 用绝对 URL
  • 社交：Open Graph 四件套（og:title/type/image/url）+ 一行 twitter:card，图 1200×630 带 alt
  • 资源提示：preload 必带 as、字体加 crossorigin；preconnect 连第三方源
  • 暗色：color-scheme（默认 UI）+ theme-color（浏览器 UI）+ CSS prefers-color-scheme（页面）
  • 无障碍红线：别 user-scalable=no；别 http-equiv="refresh"

完整 <head> 模板 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

    <title>页面标题 · 站点名</title>
    <meta name="description" content="约 150 字的页面摘要。" />
    <link rel="canonical" href="https://example.com/page" />

    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)" />

    <meta property="og:title" content="页面标题" />
    <meta property="og:description" content="分享描述" />
    <meta property="og:image" content="https://example.com/og.png" />
    <meta property="og:url" content="https://example.com/page" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />

    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="stylesheet" href="/css/main.css" />
  </head>
  <body>
    <script type="module" src="/js/app.js"></script>
  </body>
</html>

<meta name> 速查 ​

name用途
viewport响应式视口
description搜索摘要
robots爬虫指令（index/noindex、follow/nofollow…）
theme-color浏览器 UI 颜色（可带 media）
color-scheme默认 UI 明暗
author / generator作者 / 生成工具
referrerReferer 头策略
format-detectiontelephone=no 关闭自动电话链接
keywords已被主流引擎忽略（不必写）

<meta http-equiv> 速查 ​

http-equiv用途现状
content-security-policyCSP能力弱于 HTTP 头，优先用真头
refresh定时刷新 / 跳转伤无障碍，避免
x-ua-compatibleIE 兼容IE 退役，删除
rel用途
stylesheet样式表（media 条件、disabled 开关）
icon / apple-touch-icon / mask-icon图标
canonical规范 URL
alternate多语言（hreflang）/ RSS / 备用样式
manifestPWA 清单
preload / preconnect / prefetch / dns-prefetch / modulepreload资源提示
author / license / me / search / help文档元信息 / 身份

Open Graph / Twitter 速查 ​

属性说明
og:title / og:type / og:image / og:urlOG 四件套（必需）
og:description / og:site_name / og:localeOG 可选
og:image:width / :height / :alt图片结构化（1200×630，带 alt）
article:* / profile:* / video:*按 og:type 的扩展属性
twitter:cardsummary / summary_large_image / player / app
twitter:site / twitter:creator站点 / 作者账号；其余缺省回退 OG

现代特性 Baseline 状态（2026-06 核） ​

特性状态用法建议
color-scheme（meta / CSS）✅ Baseline 广泛可用放心用
viewport-fit=cover✅ 广泛可用放心用
modulepreload✅ Baseline（2023 起广泛）放心用
theme-color（含 media）🟡 渐进增强移动端 + Safari 15+ 支持，桌面 Firefox 忽略
fetchpriority🟡 Baseline 新近可用（2024）锦上添花，老浏览器忽略
interactive-widget🟡 Chromium，渐进增强渐进增强
blocking="render"🟠 Chromium-only非 Baseline，谨慎依赖
Speculation Rules API🟠 仅 Chromium，非 Baseline纯渐进增强，必须能降级

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​