How to use meta attributes in HTML5_html5 tutorial tips-H5 Tutorial-php.cn

The meta attribute occupies a very important position in HTML. For example: SEO for search engines, character encoding of documents, setting refresh cache, etc. Although some web pages may not use meta, as regular soldiers, we still need to understand some properties of meta and be able to use them skillfully.

1. Declare the character encoding used in the document

XML/HTML CodeCopy content to clipboard

<meta charset='utf-8'>

2. Declare the compatibility mode of the document

XML/HTML CodeCopy content to clipboard

<meta http-equiv="X-UA -Compatible" content="IE=edge" /> Instructs IE to display content in the highest mode currently available
<meta http-equiv=" " /> instructs IE to use the > directive to determine how to render the content. Standards mode commands are displayed in IE7 standards mode, while Quirks mode commands are displayed in IE5 mode. 3. SEO optimization
Copy content to clipboard

meta name

"description" content="No more than 150 characters" />Page description <meta name
"keywords" content="html5, css3, keyword"/>page Keywords <meta name
"author" content="Magic Inn" />Define web author <meta name
"robots" content="index,follow" />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.
4. Add viewport for mobile devices
XML/HTML CodeCopy content to clipboard
1. <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user- scalable=no">
2. content parameter explanation:
3. width viewport width (value/device-width)
4. height viewport height (value/device-height)
5. initial-scale Initial scaling ratio
6. maximum-scale Maximum zoom ratio
7. minimum-scale minimum zoom ratio
8. user-scalable Whether to allow user scaling (yes/no)
9. minimal-ui There is a new attribute in iOS 7.1 beta 2 that can minimize the upper and lower status bars when the page is loading. This is a Boolean value and can be written directly like this:
10. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> ;
5. iOS device
XML/HTML CodeCopy content to clipboard
1. <meta name="apple-mobile-web -app-title" content="title"> added to Title after home screen (new in iOS 6)
2. <meta name="apple- mobile-web-app-capable" content="yes" / >Whether to enable WebApp full screen mode
3. <meta name="apple- mobile-web-app-status-bar-style" content="black-translucent" />Set the background color of the status bar
4. Only takes effect when "apple-mobile-web-app-capable" content="yes"
5. content parameter:
6. default default value.
7. black The background of the status bar is black.
8. black-translucent The background of the status bar is black and translucent.
9. Set to default or black , the web page content starts from the bottom of the status bar.
10. If set to black-translucent, the web content will fill the entire screen and the top will be blocked by the status bar.
6. iOS icon rel parameter
XML/HTML CodeCopy content to clipboard
1. apple-touch-icon pictures are automatically processed into rounded corners and highlights.
2. apple-touch-icon-precomposed prohibits the system from automatically adding effects and displays the original design directly.
3. <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone and iTouch, default 57x57 pixels, must have
4. <link rel="apple- touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad, 72x72 pixels , you can not have it, but it is recommended to have it
5. <link rel="apple- touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended
6. <link rel="apple- touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad, 144x144 Pixels are optional, but it is recommended that everyone use
7. <meta name="apple- mobile-web-app-title" content="title">It is best to limit the title to six Chinese characters in length. Extra long content will be hidden and added to the title after the home screen (new in iOS 6)
7. iOS startup screen
XML/HTML CodeCopy content to clipboard
1. The iPad startup screen does not include the status bar area.
2. iPad portrait screen 768 x 1004 (standard resolution)
3. <link rel="apple- touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad vertical screen 1536x2008 (Retina)
4. <link rel="apple- touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad landscape screen 1024x748 (standard resolution )
5. <link rel="apple- touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />iPad landscape 2048x1496 (Retina)
6. <link rel="apple- touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
7. The startup screen of iPhone and iPod touch includes the status bar area.
8. iPhone/iPod Touch portrait screen 320x480 (standard resolution)
9. <link rel="apple- touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch Vertical Screen 640x960 (Retina)
10. <link rel="apple- touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina)
11. <link rel="apple- touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
12. <link rel="apple- touch-startup-image" href="Startup.png" / > When the user clicks on the home screen icon to open the WebApp, the system will display the startup screen. If it is not set, the system will display the home page screenshot of the website by default. Of course, this experience is not very good
8, Windows 8
XML/HTML CodeCopy content to clipboard
1. <meta name="msapplication-TileColor" content="#000"/> Windows 8 Tile Color
2. <meta name="msapplication- TileImage" content="icon.png"/>Windows 8 Tile Icon
9. Uncommonly used
XML/HTML CodeCopy content to clipboard
1. <link rel="alternate" type="application/rss xml" title="RSS" href="/rss.xml" />Add RSS Subscription
2. <link rel="shortcut icon " type="image/ico" href="/favicon.ico" />Add favicon icon
3. <meta name="format- detection" content="telephone=no" />Prohibit digit recognition from being automatically recognized as a phone number
4. <meta name="format- detection" content="email=no" />Don’t let android recognize email
5. <meta name="renderer" content="webkit">Enable the speed mode of 360 browser (webkit)
6. <meta http-equiv=" " >Avoid IE using compatibility mode <meta name
7. "HandheldFriendly" content="true">Optimized for handheld devices, mainly For some old browsers that do not recognize viewport, such as BlackBerry <meta name
8. "MobileOptimized" content="320">Microsoft’s old browser <meta name
9. "x5- orientation" content="portrait">QQ forced vertical screen
10. <meta name="full- screen" content="yes">UC forced full screen
11. <meta name="x5- fullscreen" content="true">QQ forced full screen
12. <meta name="browsermode" content="application">UC application mode
13. <meta name="x5- page-mode" content="app">QQ application mode
14. <meta http-equiv=" Cache-Control" content="no-siteapp" /> Baidu transcoding is prohibited
15. <meta name="msapplication- tap-highlight" content="no">windows phone click No highlights
16. <meta name="keywords" content="" /> Key Words
17. <meta name="description" content="" /> Description
18. <meta name="title" content="" /> title
19. <meta name="author" content="-06" /> Author
20. <meta name="Copyright" content="" /> Company
21. <meta http-equiv=" " 🎜> Let IE browser use the most advanced kernel to render pages, and pages using Chrome framework use webkit kernel <meta name
22. ="apple- mobile-web-app-capable" content="yes"> IOS6 full screen <meta name
23. ="mobile- web-app-capable" content="yes"> Chrome High version full screen <meta name
24. ="renderer" content="webkit"> Let 360 dual-core browser use webkit kernel Rendering page <meta name
25. ="apple- itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> Add Smart App Banner Smart App Banner (iOS 6 Safari) 10. sns social tag
26. XML/HTML CodeCopy content to clipboard
1. <meta property="og:type" content="type" />
2. <meta property="og: url" content="URL address" />
3. <meta property="og: title" content="title" />
4. <meta property="og: image" content="image" />
5. <meta property="og: description" content="description" />
11. Conditional comments to determine IE browser
XML/HTML CodeCopy content to clipboard
The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Related labels：

html5

source：php.cn

Previous article：Analyze the storage function of HTML5 and related operation methods of web SQL_html5 tutorial skills Next article：A simple explanation of using MathML mathematical formulas in HTML5_html5 tutorial skills

Statement of this Website

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