# HTML head 常用标签

## HTTP Headers 相关

### 字符编码

定义文档字符编码：

```markup
<!-- 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 se](http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm)t 中的一部分。 HTTP的 Content-Type 头部以及任何 Byte-Order Marks 元素都优先于此元素。

### 页面刷新

倒计时刷新页面：

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

倒计时跳转页面：

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

### DNS 预解析

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

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

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

## SEO 相关

### 页面信息

页面标题：

```markup
<title>Title</title>
```

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

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

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

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

### 搜索引擎

约定搜索引擎爬虫行为：

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

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

## 桌面浏览器兼容

### 双核浏览器设置

国内双核浏览器设置：

```markup
<!-- 默认使用 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 以下浏览器

指定渲染模式：

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

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

## 移动设备适配

### 移动视口适配

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

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

### Safari 浏览器

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

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

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

Smart App Banner:

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

### QQ 浏览器

QQ 浏览器设置：

```markup
<!-- 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 浏览器设置：

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

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

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

### 百度移动适配

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

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

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

## 链接外部资源

加载链接的外部资源：

```markup
<!-- 加载网站图标 -->
<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>
```

## 参考文献

* [HTML（超文本标记语言）](https://developer.mozilla.org/zh-CN/docs/Web/HTML)
* [meta](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)
* [What does meta http-equiv=“X-UA-Compatible” content=“IE=edge” do?](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do)
* [Using meta tags to turn off caching in all browsers?](https://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers)
* [How to prevent caching in Internet Explorer](https://support.microsoft.com/en-us/help/234067/how-to-prevent-caching-in-internet-explorer)
* [Promoting Apps with Smart App Banners](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avincheng.gitbook.io/notebook/web/html/html-head-chang-yong-biao-qian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
