Detailed introduction to HTML head tag

This article is based on Yisi's article, and provides an expanded summary to introduce the meaning and usage scenarios of each tag and element in commonly used heads. There are many tags and elements in the HTML head part, which involve browser rendering of web pages, SEO, etc. Each browser core and each domestic browser manufacturer have their own tag elements, which results in 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 informs the browser Which HTML or XHTML specification does the server document use?

DTD (Document Type Definition) declaration starts with , is not case-sensitive, and has no content in front. If there is other content (except spaces), the browser will open a weird mode under IE ( quirks mode) renders web pages. 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 is a designated public text description, 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

##XML/HTML Code Copy content to clipboard

1. p>>

●HTML 4.01 Transitional

XML/HTML CodeCopy content to clipboard

##li>>
##●HTML 4.01 Frameset

##XML/HTML Code

Copy content to clipboard

/p>>

1. ●The latest HTML5 introduces more concise writing. It is forward and backward compatible and is recommended for use.

##XML/HTML Code

Copy content to clipboard

/span>>

1. doctype has two main purposes in HTML.

   ●Verify the validity of documents.

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

●Partially weird (nearly standard) mode About the document mode, browser mode, and strict mode of

IE browser

, weird mode, DOCTYPE tag, verbose mode? standard! Content.

charset

Declare the character encoding used in the document,

XML/HTML Code

Copy content to clipboard

1. meta charset="utf-8">

html5 The previous web page would have written like this:

##XML/HTML CodeCopy Content to clipboard

1. ##meta http-equiv="Content- Type" content="text/html; charset=utf-8">
These two are equivalent. You can read the details step by step: vs , so it is recommended to use the shorter one, which is easier to use. memory.

lang attribute

Simplified Chinese

##XML/HTML Code

Copy content to clipboard

##

html

lang=" zh-cmn-Hans"> Traditional Chinese

##XML /HTML Code

Copy content to clipboard

html

1. lang="zh-cmn-Hant">## Why lang="zh-cmn-Hans" instead of what we usually write As for lang="zh-CN", please read further: The statement at the head of the page should be lang="zh" or lang="zh-cn". Use the latest version of IE and Chrome first

XML/HTML Code

Copy content to clipboard

##meta

http-equiv
1. =

   "X-UA-Compatible" content="IE=edge,chrome=1" />　360 Using Google Chrome Frame

XML/HTML Code

Copy content to clipboard

##< ;meta

name

=
1. "renderer"

   content="webkit"> 360 browser will immediately switch to the corresponding speed core after reading this tag. Also add

XML/HTML Code

to be on the safe side

meta

http-equiv

=
1. "X-UA-Compatible"

   content= "IE=Edge,chrome=1">## The effect that can be achieved by writing this way is that if Google Chrome Frame is installed, then Use GCF to render the page. If GCF is not installed, use the highest version of the IE kernel for rendering. Related links: Browser kernel control Meta tag documentation Baidu prohibits transcoding

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

##XML/HTML Code## in the head
#Copy content to clipboard

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

## Related links: SiteApp Transcoding Statement

SEO optimization part

Page title

##XML/HTML Code

Copy content to clipboard

##

title>your titletitle>##Page keywordskeywords

##XML/HTML Code

Copy content to clipboard

meta

1. name="keywords" content="your keywords">Page description content description

## XML/HTML Code

Copy content to clipboard

meta

1. name

   ="description" content="your description"> Define web page author author

##XML/HTML Code

Copy content to clipboard

meta

name
1. =

   "author" content="author ,email address"> Define the web search engine indexing method, robotterms is a set of values ​​separated by English commas ",", usually there are The following values ​​are available: none, noindex, nofollow, all, index and follow. XML/HTML Code

Copy content to clipboard

# #

meta

name

=
1. "robots"

   content="index,follow">Related links: WEB1038 - Tag contains an invalid valueviewport

　Viewport can make the layout display better on mobile browsers. Usually write

##XML/HTML Code

Copy the content to the clipboard

meta name

=

"viewport"

1. content="width=device-width , initial-scale=1.0">##width=device-width will cause the iPhone 5 to open the page in WebApp full-screen mode after adding it to the home screen Black edges appear (http://bigc.at/ios-webapp-viewport-meta.orz)content Parameters: width viewport width (value/device-width) height viewport height (value/device-height)initial-scale initial scaling ratio

   maximum-scale maximum scaling ratio
minimum-scale minimum scaling ratio

user-scalable whether to allow user scaling (yes/ no)

minimal-ui A new attribute in iOS 7.1 beta 2 can minimize the upper and lower status bars when the page loads. This is a Boolean value and can be written directly like this:

XML/HTML CodeCopy content to clipboard

1. ##meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

And if your website is not responsive, please do not use initial-scale or disable scaling.

XML/HTML CodeCopy content to clipboard

1. meta name="viewport" content="width=device-width,user- scalable=yes">

Related links: Viewport for non-responsive design

Suitable for iPhone 6 and iPhone 6plus then Need to write:

XML/HTML Code
Copy content to clipboard

1. meta name="viewport" content="width=375">

2. meta name="viewport " content="width=414">

##Mostly 4.7~5 inches The viewport width of Android devices is set to 360px, but it is 375px on iPhone 6. The viewport width of most 5.5-inch Android machines (such as Samsung Note) is 400, and it is 414px on iPhone 6 plus.

　ios device

　Title added to the home screen (new in iOS 6)

XML/HTML Code

Copy content to clipboard

1. meta name="apple-mobile-web-app-title" content="Title">

Whether to enable WebApp full-screen mode

XML/HTML Code

Copy content to clipboard

##

meta name="apple-mobile-web-app-capable" content="yes" /> ##Set the background color of the status bar

XML/HTML Code

Copy content to clipboard

meta

name="apple-mobile-web-app-status-bar-style" content="black- translucent" />

Only takes effect when "apple-mobile-web-app-capable" content="yes"

　content parameter:

default default value.
black The background of the status bar is black.
black-translucent The background of the status bar is black and translucent. If set to default or black , web page content starts from the bottom of the status bar. If set to black-translucent, the web page content fills the entire screen and the top will be obscured by the status bar.

Disable digit recognition as a phone number

##XML/HTML CodeCopy content To clipboard

1. ##meta name="format-detection" content="telephone=no" />
iOS icon

rel parameter: apple-touch-icon

Picture

is automatically processed into rounded corners and highlights. apple-touch-icon-precomposed prohibits the system from automatically adding effects and displays the original design directly. iPhone and iTouch, default 57x57 pixels, must have the code as follows:

iPad, 72x72 pixels, optional, but recommended

The code is as follows:

Retina iPhone and Retina iTouch, 114x114 pixels, optional, but recommended

The code is as follows:

Retina iPad, 144x144 pixels, optional, but recommended

The code is as follows :

The IOS icon size is 180×180 on iPhone 6 plus and 120x120 on iPhone 6. To adapt to iPhone 6 plus, you need to add this

code as follows:

iOS splash screen

Official documentation:
https://developer.apple.com/ library/ios/qa/qa1686/_index.html Reference article: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
The startup screen of iPad is Excluding the status bar area.

iPad portrait screen 768 x 1004 (standard resolution)

The code is as follows:

　iPad vertical screen 1536x2008 ( Retina

The code is as follows:

iPad landscape screen 1024x748 (standard resolution)

The code is as follows:

< ;link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />

The startup screen of iPhone and iPod touch includes Status bar area.

iPhone/iPod Touch portrait screen 320x480 (standard resolution)

The code is as follows:

　iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina)

The code is as follows:

　Add Smart App Smart App Banner (iOS 6+ Safari)

The code is as follows:

The corresponding image size for iPhone 6 is 750×1294, and for iPhone 6 Plus The corresponding value is 1242×2148.

The code is as follows:

Windows 8
　Windows 8 tile color

The code is as follows:

Windows 8 tile icon

code is as follows:

　rss subscription

The code is as follows:

　favicon icon

The code is as follows:

For a more detailed introduction to favicon, please refer to https://github.com/audreyr/favicon-cheat-sheet

Mobile version meta
XML/HTML CodeCopy content to clipboard

1. ##meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= no" />

2. ##meta name="apple-mobile-web-app-capable" content="yes" />
3. meta name="apple-mobile-web-app-status-bar-style" content="black" />
##

meta name="format-detection"content="telephone=no, email= no" />

##
4. meta

   name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

5. meta name="apple-mobile-web-app-capable" content="yes" />

6. ##meta name="apple-mobile-web-app-status-bar- style" content="black" />

7. ##meta name="format-detection" content="telphone=no, email=no" />

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

##
10. meta

    http-equiv="X-UA-Compatible" content="IE=edge">#

11. ##

    meta
12. name

    ="HandheldFriendly" content="true">

13. ##meta

name
14. =

    "MobileOptimized" content="320">

15. ##meta name
=
16. "screen-orientation"

    content="portrait">

##

meta name

="x5-orientation"

17. content="portrait">

    ##
18. meta

    name=

    "full-screen"
19. content

    ="yes">

20. meta

    name=

    "x5-fullscreen"
21. content

    ="true">

22. meta name="browsermode" content="application">

24. meta name="x5-page-mode" content="app">

25. ##

26. ##meta name="msapplication-tap-highlight" content="no">
##

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