search
HomeWeb Front-endHTML TutorialDetailed introduction to HTML head tag
Detailed introduction to HTML head tagJun 27, 2017 am 10:20 AM
headhtmlintroduce

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

      ##
    5. meta

      name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

    6. meta name="apple-mobile-web-app-capable" content="yes" />

    7. ##meta name="apple-mobile-web-app-status-bar- style" content="black" />

    8. ##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
    15. =

      "MobileOptimized" content="320">

    16. ##meta name
    17. =
    18. "screen-orientation"

      content="portrait">

    19. ##

      meta name

      ="x5-orientation"
    20. content="portrait">

      ##
    21. meta

      name=

      "full-screen"
    22. content

      ="yes">

    23. meta

      name=

      "x5-fullscreen"
    24. content

      ="true">

    25. meta name="browsermode" content="application">

    26. meta name="x5-page-mode" content="app">

    27. ##

    28. ##meta name="msapplication-tap-highlight" content="no">
    29. ##

    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
    HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

    本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

    html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

    不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

    web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

    总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

    HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

    HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

    总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

    本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

    html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

    html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

    html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

    在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

    html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

    html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    Repo: How To Revive Teammates
    4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: How To Get Giant Seeds
    4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

    Hot Tools

    EditPlus Chinese cracked version

    EditPlus Chinese cracked version

    Small size, syntax highlighting, does not support code prompt function

    Dreamweaver Mac version

    Dreamweaver Mac version

    Visual web development tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    mPDF

    mPDF

    mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),