Home >Web Front-end >HTML Tutorial >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
XML/HTML CodeCopy content to clipboard
##●HTML 4.01 Frameset
##XML/HTML Code
/p>>
●The latest HTML5 introduces more concise writing. It is forward and backward compatible and is recommended for use.
Copy content to clipboard
/span>>
doctype has two main purposes in HTML.
●Verify the validity of documents.●Weird mode
●Partially weird (nearly standard) mode About the document mode, browser mode, and strict mode ofIE browser
, weird mode, DOCTYPE tag, verbose mode? standard! Content. Declare the character encoding used in the document,XML/HTML Code
Copy content to clipboard
meta charset="utf-8">
html5 The previous web page would have written like this:
##XML/HTML CodeCopy Content to clipboard
lang attribute
Simplified Chinese
##XML/HTML Code
Copy content to clipboard
##lang=" zh-cmn-Hans"> Traditional Chinese
Copy content to clipboard
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
"X-UA-Compatible" content="IE=edge,chrome=1" /> 360 Using Google Chrome Frame
##< ;meta
namecontent="webkit"> 360 browser will immediately switch to the corresponding speed core after reading this tag. Also add
to be on the safe side
meta
http-equivcontent= "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
meta http-equiv="Cache-Control" content="no-siteapp" />
SEO optimization part
Page title
Copy content to clipboard
title>your titletitle>##Page keywordskeywords
Copy content to clipboard
name="keywords" content="your keywords">Page description content description
## XML/HTML Code
Copy content to clipboard
meta
="description" content="your description"> Define web page author author
##XML/HTML Code
meta
"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
# #
meta
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
meta name
=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 ratiominimal-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
##meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
XML/HTML CodeCopy content to clipboard
meta name="viewport" content="width=device-width,user- scalable=yes">
Suitable for iPhone 6 and iPhone 6plus then Need to write:
XML/HTML Code
Copy content to clipboard
meta name="viewport" content="width=375">
meta name="viewport " content="width=414">
ios device
Title added to the home screen (new in iOS 6)
Copy content to clipboard
Copy content to clipboard
meta name="apple-mobile-web-app-capable" content="yes" /> ##Set the background color of the status bar
XML/HTML Code
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
rel parameter: apple-touch-icon
Pictureis 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:
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
##meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= no" />
meta name="format-detection"content="telephone=no, email= no" />
##name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
meta name="apple-mobile-web-app-capable" content="yes" />
##meta name="apple-mobile-web-app-status-bar- style" content="black" />
meta name="renderer" content="webkit ">
##
http-equiv="X-UA-Compatible" content="IE=edge">#
##
meta="HandheldFriendly" content="true">
##meta
"MobileOptimized" content="320">
content="portrait">
meta name
="x5-orientation"content="portrait">
##name=
"full-screen"="yes">
name=
"x5-fullscreen"="true">
meta name="browsermode" content="application">
meta name="x5-page-mode" content="app">
##
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!