search

Home >Web Front-end >HTML Tutorial >Detailed introduction to HTML head tag

Detailed introduction to HTML head tag

巴扎黑
巴扎黑Original
2017-06-27 10:20:271836browse

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">
    2. 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

      2. 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 tag (head header is required)


    ##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

      2. 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
      2. 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">

      3. ##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" />
      2. 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" />
      4. ##

      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" />

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

      ##

    10. meta

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

    11. ##

      meta
    12. name

      ="HandheldFriendly" content="true">

    13. ##meta

      14. name
    14. =

      "MobileOptimized" content="320">

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

      content="portrait">

      17. ##

      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">
      27. ##

    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!

    • 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：Detailed introduction to the tag and its content in HTMLNext article：Detailed introduction to the tag and its content in HTML

    Related articles

    See more