HTML head 常用标签

HTTP Headers 相关

字符编码

定义文档字符编码：

<!-- HTML5 -->
<meta charset="UTF-8" />

<!-- HTML4 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Tips:
<meta> 元素必须包含在 <head> 元素中并且在HTML代码的前 1024 个字节内，因为某些浏览器在选择编码之前只查看前面这些字节。
<meta> 元素只是 algorithm to determine the character set 中的一部分。 HTTP的 Content-Type 头部以及任何 Byte-Order Marks 元素都优先于此元素。

页面刷新

倒计时刷新页面：

<!-- 5s 后刷新页面 -->
<meta http-equiv="refresh" content="5" />

倒计时跳转页面：

<!-- 10s 后跳转到指定页面 -->
<meta http-equiv="refresh" content="10;url=https://github.com" />

DNS 预解析

开启 DNS 预解析，并指定预解析的域名：

<!-- 开启 DNS 预解析 -->
<meta http-equiv="x-dns-prefetch-control" content="on" />

<!-- 指定预解析的域名 -->
<link rel="dns-prefetch" href="https://github.com" />

SEO 相关

页面信息

页面标题：

<title>Title</title>

页面关键字（一般不超过 874 个字符）：

<meta name="keywords" content="tagA,tagB,tagC" />

页面描述（一般不超过 150 个字符）：

<meta name="description" content="About this site" />

搜索引擎

约定搜索引擎爬虫行为：

<!-- 页面可以被索引，页面上链接可以被追踪 -->
<meta name="robots" content="index,follow" />

<!-- 页面不可以被索引，页面上链接不可以被追踪 -->
<meta name="robots" content="noindex,nofollow" />

桌面浏览器兼容

双核浏览器设置

国内双核浏览器设置：

<!-- 默认使用 webkit 内核 -->
<meta name="renderer" content="webkit" />

<!-- 默认使用 IE 标准内核（取决于用户电脑的 IE 版本） -->
<meta name="renderer" content="ie-stand" />

<!-- 默认使用 IE 兼容内核（即 IE 6/7） -->
<meta name="renderer" content="ie-comp" />

IE9 以下浏览器

指定渲染模式：

<!-- 使用当前 IE 版本最高模式渲染 -->
<meta http-equiv="x-ua-compatible" content="ie=edge" />

<!-- 指定 IE 版本模式渲染 -->
<meta http-equiv="x-ua-compatible" content="ie=6" />

移动设备适配

移动视口适配

设置移动设备初始视口大小：

<!-- 页面宽度等于设备宽度，页面不缩放，禁止用户手动缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

Safari 浏览器

关闭 iOS Safari (UIWebView) 自动识别：

<!-- 关闭数字自动识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />

<!-- 关闭邮件地址识别 -->
<meta name="format-detection" content="email=no" />

Smart App Banner:

<!-- 在页面顶部显示对应的 App 的信息和 AppStore 下载地址 -->
<meta name="apple-itunes-app" content="app-id=MyAppStoreID,affiliate-data=MyAffiliateData,app-argument=MyAppURL" />

QQ 浏览器

QQ 浏览器设置：

<!-- QQ 强制竖屏 -->
<meta name="x5-orientation" content="portrait" />

<!-- QQ 强制全屏 -->
<meta name="x5-fullscreen" content="true" />

<!-- QQ 开启 WebApp 模式 -->
<meta name="x5-page-mode" content="app" />

UC 浏览器

UC 浏览器设置：

<!-- UC 强制竖屏 -->
<meta name="screen-orientation" content="portrait" />

<!-- UC 强制全屏 -->
<meta name="full-screen" content="yes" />

<!-- UC 开启 Web App 模式 -->
<meta name="browsermode" content="application" />

百度移动适配

移动端百度搜索结果跳转适配：

<!-- 禁止百度移动端搜索结果跳转时自动给页面转码 -->
<meta http-equiv="cache-control" content="no-siteapp" />

<!-- 百度移动端搜索到该结果时，会跳转到对应的移动页面 -->
<meta name="mobile-agent" content="format=html5;url=MobileWebUrl" />

链接外部资源

加载链接的外部资源：

<!-- 加载网站图标 -->
<link rel="icon" type="image/png" href="favicon.png">

<!-- 加载样式表 -->
<link rel="stylesheet" href="main.css" />

<!-- HTML5 加载可执行脚本 -->
<script src="main.js"></script>

<!-- HTML4 加载可执行脚本 -->
<script type="text/javascript" src="javascript.js"></script>

参考文献

PreviousHTML NextHTML 常用 DTD 声明

Last updated 5 years ago

hashtagHTTP Headers 相关

hashtag字符编码

hashtag页面刷新

hashtagDNS 预解析

hashtagSEO 相关

hashtag页面信息

hashtag搜索引擎

hashtag桌面浏览器兼容

hashtag双核浏览器设置

hashtagIE9 以下浏览器

hashtag移动设备适配

hashtag移动视口适配

hashtagSafari 浏览器

hashtagQQ 浏览器

hashtagUC 浏览器

hashtag百度移动适配

hashtag链接外部资源

hashtag参考文献