Header structure in HTML_HTML/Xhtml_Web page production

The following introduces the commonly used head structure, as well as the meaning and usage scenarios of each tag and element (this article is based on the article of a master, and is an extended summary).

The header structure of padding.me

Copy code

The code is as follows:

< ;meta name="viewport" content="width=device-width, user-scalable=yes">


< ;meta name="robots" content="index,follow">

https://plus. google.com/u/1/105241873904238310190/?rel=author">
http://padding.me/humans.txt" />

http://feeds.feedburner.com/paddingme" />

DOCTYPE

DOCTYPE (Document Type), this declaration is located at the front of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.

DTD (Document Type Definition) declaration starts with , 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 in IE. Render the web page. Public DTD, the name format is "registration // organization // type tag // language", "registration" indicates 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; "Type" is generally a DTD, and "Label" 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 last "language" is the ISO 639 language identifier of the DTD language, such as: EN means English, ZH means Chinese. XHTML 1.0 can declare three DTD types. Represents strict version, transitional version, and frame-based HTML document respectively.
•
HTML 4.01 strict
http://www.w3.org/TR/html4 /strict.dtd">

•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">

•
HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd">

•
And the latest HTML5 introduces more concise writing, which is forward and backward compatible, and is recommended to be used.

The doctype in HTML has two main purposes.
•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 will 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 (almost standard) mode
About IE browser’s document mode, browser mode, strict mode, weird mode, DOCTYPE tag , detailed reading mode available? standard! , and the box model.

charset

Declare the character encoding used in the document,

Copy the code

The code is as follows:

Before html5, the web page would write like this:

Copy the code

The code is as follows:

These two are equivalent, you can read more specifically: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content- type, so it is recommended to use shorter ones that are easier to remember.

lang attribute

Simplified Chinese

Traditional Chinese

It is rarely necessary to add region codes, usually to emphasize the differences in Chinese usage in different regions, for example:

Copy code

The code is as follows:

pineappleandPineapple is actually the same fruit. It's just that the names in mainland China and Taiwan are different, and the names in Singapore and Malaysia are also different. It's called Pine Pear.

For details, please go to http://zhi.hu/XyIa

Prioritize using the latest version of IE and Chrome

Copy code

The code is as follows:

360 using Google Chrome Frame

Copy code

The code is as follows:

360 Browser will immediately switch to the corresponding speed core after reading this tag.
Also join just to be on the safe side

Copy code

The code is as follows:

The effect that can be achieved by writing this way is that if Google Chrome Frame is installed, GCF will be used to render the page. If GCF is not installed, the highest version of the IE kernel will be used 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 dog skin plaster ads on your body. To do this, you can add

Related links: SiteApp transcoding statement

SEO optimization part
•
Page title

•
Page Keywordskeywords


•
Page description content description


•
Define the web author author


•
Define the web search engine indexing method. Robotterms is a set of values ​​separated by English commas ",". It usually has the following values: none, noindex, nofollow, all, index and follow.

Related links: WEB1038 - Tag contains invalid value

viewport

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

width=device-width will cause black borders to appear when the iPhone 5 is added to the home screen and opened in WebApp full-screen mode (http://bigc.at/ios-webapp-viewport-meta.orz )

content parameters:
•width viewport width (numeric value/device-width)
•height viewport height (numeric value/device-height)
•initial-scale initial scaling
•maximum- scale maximum scaling
•minimum-scale minimum scaling
•user-scalable whether to allow users to zoom (yes/no)
•
minimal-ui New attributes in iOS 7.1 beta 2, you can Minimize the upper and lower status bars when the page loads. This is a Boolean value and can be written directly like this:

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

Related links: Viewport with non-responsive design

ios device

Title added to home screen (new in iOS 6)

Copy code

The code is as follows:

Whether to enable WebApp full screen mode

Copy code

The code is as follows:

Set the background color of the status bar

Copy code

The code is as follows:

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

content parameters:
•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 , the web page content starts from the bottom of the status bar.
If set to black-translucent, the web content will fill the entire screen and the top will be blocked by the status bar.

Disable digit recognition from being automatically recognized as a phone number

iOS icon

rel parameter:
apple-touch-icon pictures are 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
< ;!-- iPhone and iTouch, default 57x57 pixels, must have -->

iPad, 72x72 pixels, optional, but recommended

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

Retina iPad, 144x144 pixels, optional but recommended

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 iPad startup screen does not include the status bar area.

iPad portrait 768 x 1004 (standard resolution)

Copy code

The code is as follows:

iPad portrait 1536x2008 (Retina)

Copy code

The code is as follows:

iPad landscape 1024x748 (standard resolution)

Copy code

The code is as follows:

iPad landscape 2048x1496 (Retina)

Copy code

The code is as follows:

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

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

iPhone/iPod Touch portrait screen 640x960 (Retina)

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

Add Smart App Banner (iOS 6 Safari)

Windows 8

Windows 8 tile colors

Copy code

The code is as follows:

Windows 8 Tile Icon

Copy code

The code is as follows:

RSS subscription

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

Mobile meta

Copy code

The code is as follows:

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



< ;!-- Enable 360 ​​browser's speed mode (webkit) -->




< ;meta name="MobileOptimized" content="320">

Sharing from toobug.

More meta tag references
•COMPLETE LIST OF HTML META TAGS
•18 Meta Tags Every Webpage Should Have in 2013

Reference article:
•https://github .com/yisibl/blog/issues/1
•https://gist.github.com/paddingme/6182708733917ae36331
•http://amazeui.org/css/
•http://www .douban.com/note/170560091/