Home >Web Front-end >HTML Tutorial >Detailed introduction to the application of head tags in HTML

Detailed introduction to the application of head tags in HTML

零下一度Original: 2017-05-10 13:57:191579browse

HTML head There are many tags and elements in the head part, which involve the browser's rendering of web pages, SEO, etc., and each browser kernel and each domestic browser manufacturer have their own tag element, which creates a lot of differences. In the era of mobile Internet, the head structure and meta elements of mobile terminals are even more important. Understanding the meaning of each tag and writing a head tag that meets your own needs is the purpose of this article. This article is based on Yishi's article and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads.

DOCTYPE

DOCTYPE (Document Type), this declaration is located at the frontmost position in the document, before the html tag. This tag tells the browser what kind of HTML the document uses. Or the XHTML specification.
DTD (Document Type Definition) declaration starts with 1a309583e26acea4f04ca31122d8c535, it is not case-sensitive, and there is no content in front. If there is other content (except spaces), the browser will turn on quirks mode under IE. Render the web page. Public DTD, the name format is registration // organization // type tag // language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as: W3C. The type is usually DTD. A tag specifies a description of the public text, that is, a unique descriptive name for the referenced public text, which can be followed by a version number. The final language is the ISO 639 language identifier of the DTD language, such as: EN for English, ZH for Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and frame-based HTML document respectively.

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frame set

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "www.w3.org/TR/html4/frameset.dtd">

LatestHTML5 introduces more concise writing, which is forward and backward compatible, and is recommended for use.
```
<!doctype html>
```
In HTML doctype has two main purposes.
Verify the validity of the document.
It tells the user agent and validator what DTD this document is written according to. This action is passive. Every time the page is loaded, the browser does not download the DTD and check the validity. It is only enabled when the page is manually verified.
Determine the browser's rendering mode
For actual operations, inform the browser which parsing algorithm to use when reading the document. If it is not written, the browser will parse the code according to its own rules, which may seriously affect the html layout. Browsers have three ways to parse HTML documents. Non-weird (standard) mode Weird mode* Some weird (almost standard) modes About IE browser's document mode, browser mode, strict mode, weird mode, DOCTYPE tag, can Detailed reading mode? standard! Content.

charset

Declare the character encoding used in the document
```
<meta charset="utf-8">
```
html5 previous web page It will be written like this:
```
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
```
These two are equivalent, you can read it step by step: 9ae2728d4b2905501308be91cfba82f6 vs 1bac67ed82b7962771fddfdf3fc9ae96 , so it is recommended to use shorter ones that are easier to remember.

##langAttributes

```
<html lang="zh-cmn-Hans">
```
```
<html lang="zh-cmn-Hant">
```
Why is lang="zh-cmn-Hans" instead of the lang="zh-CN" we usually write? Please read further: The statement at the head of the page should be lang="zh" or lang="zh-cn".

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

360 Use Google Chrome Frame

<meta name="renderer" content="webkit">

```
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
```
The effect that can be achieved by writing this way is that if
installed
Google Chrome Frame, GCF will be used to render the page. If GCF is not installed, the highest version will be used. IE kernel for rendering. Related links: Browser kernel control Meta tag documentation

When you open a webpage through Baidu mobile phone, Baidu may modify your webpage Transcode, take off your clothes, and put an advertisement for dog skin plaster on your body. For this purpose, you can add

<meta http-equiv="Cache-Control" content="no-siteapp" />

in the head. Related links: SiteApp Transcoding Statement

SEO Optimization Section

```
<title>your title</title>
```

key

words

<meta name="keywords" content="your keywords">

<meta name="description" content="your description">

定义网页作者 author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
```
<meta name="robots" content="index,follow">
```
相关链接：WEB1038 - 标记包含无效的值

viewport

viewport可以让布局在移动浏览器上显示的更好。通常会写
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
width=device-width会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)
content 参数：
(1) width viewport 宽度(数值/device-width)
(2)height viewport 高度(数值/device-height)
(3)initial-scale 初始缩放比例
(4)maximum-scale 最大缩放比例
(5)minimum-scale 最小缩放比例
(6)user-scalable 是否允许用户缩放(yes/no)
(7)minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
```
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
```
而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
```
<p style="margin-top: 7px;"><meta name="viewport" content="width=device-width,user-scalable=yes"><br/></p>
```
相关链接：非响应式设计的viewport
适配 iPhone 6 和 iPhone 6plus 则需要写：
```
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">
```
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

ios 设备

添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->

是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->

设置状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

content 参数：
(1) default 默认值。
(2) black 状态栏背景是黑色。
(3) black-translucent 状态栏背景是黑色半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

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

iOS 图标

rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有
```
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> 
```

iPad，72x72 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

Retina iPad，144x144 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。适配iPhone 6 plus，则需要在93f0f5c25f18dab9d176bd4f6de5d30e中加上这段
```
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
```
iPad 的启动画面是不包括状态栏区域的。

iPad

iPad 竖屏 768 x 1004（标准分辨率）

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

iPad 竖屏 1536x2008（Retina）

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->

iPad 横屏 1024x748（标准分辨率）

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->

iPad 横屏 2048x1496（Retina）

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

iPhone/iPod Touch 竖屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

Windows 8

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

rss订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->

favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

比较详细的 favicon 介绍可参考github.com/audreyr/favicon-cheat-sheet

移动端的meta







<meta name="renderer" content="webkit">

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

The above is the detailed content of Detailed introduction to the application of head tags in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Relevant introduction to plug-in functions in HTMLNext article：Relevant introduction to plug-in functions in HTML

See more