Detailed introduction to HTML head tag

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

●HTML 4.01 Transitional

XML/HTML CodeCopy content to clipboard

##>
##●HTML 4.01 Frameset

##XML/HTML Code

Copy content to clipboard

>

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

>

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

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

##<

1. 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

         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