search

Home >Web Front-end >H5 Tutorial >How to use meta attributes in HTML5_html5 tutorial tips

How to use meta attributes in HTML5_html5 tutorial tips

WBOY
WBOYOriginal
2016-05-16 15:45:551720browse

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
  1. <meta charset='utf-8'> 

2. Declare the compatibility mode of the document

XML/HTML CodeCopy content to clipboard
  1. <meta http-equiv="X-UA -Compatible" content="IE=edge" /> Instructs IE to display content in the highest mode currently available
  2. <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
    3. XML/HTML Code
  3. Copy content to clipboard

<
meta name
=
  1. "description" content="No more than 150 characters" />Page description <meta name
    2. =
  2. "keywords" content="html5, css3, keyword"/>page Keywords <meta name
    3. =
  3. "author" content="Magic Inn" />Define web author <meta name
    4. =
  4. "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. =
    7. "HandheldFriendly" content="true">Optimized for handheld devices, mainly For some old browsers that do not recognize viewport, such as BlackBerry <meta name
      8. =
    8. "MobileOptimized" content="320">Microsoft’s old browser <meta name
      9. =
    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
    2.  
    3.  
    4.  

    The above is the entire content of this article, I hope it will be helpful to everyone’s study.

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：Analyze the storage function of HTML5 and related operation methods of web SQL_html5 tutorial skillsNext article：Analyze the storage function of HTML5 and related operation methods of web SQL_html5 tutorial skills

Related articles

See more

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved