Meta tags and usage understanding in HTML

I have always wanted to become a senior front-end development engineer, and self-study. The recent feeling of self-study has little effect, once confused.

Destroy nothing, intending to change such a state.

The first day of work after spring, this year intends to realize their front-end dream.

Re-organize and summarize front-end technology.

Nonsense, don't say much, start today's theme.

META tags in html

I. META tag meaning

The <meta> element provides meta-information about the page (meta-information), such as descriptions and keywords for search engines and update frequency.

The <meta> tag is located in the header of the document and does not contain any content.

The properties of the <meta> tag define the name/value pairs associated with the document.

Ii. Common attributes in Meta

1. CharSet (character set)

Description: Specifies the character encoding for the HTML document.

Usage: <meta charset= "UTF-8" >

2. Viewport (view area)

Description: Is the viewable area of the user's Web page. Everyone knows that the mobile device screen is generally much smaller than the PC, the WebKit browser will map a larger "virtual" window to the mobile device screen, the default virtual window is 980 like wide (the current standard width of most sites), and then scaled by a certain proportion (3:1 or 2:1).

That is, when we load a normal Web page, WebKit will load the Web page with a 980-pixel browser standard and then reduce it to a width of 490 pixels. Note that this reduction is a global narrowing, which means that all elements on the page will shrink.

Usage: <meta id= "viewport" name= "viewport" content= "width=device-width; initial-scale=1.0; maximum-scale=1; User-scalable=no; " >

(1) Width

Width controls the size of the viewport, generally in order to adaptively set thedevice-width

(2) Initial-scale

Initial-scale: The initial zoom ratio, which is the scale at which the page is first load.

(3) Maximum-scale

Maximum-scale Maximum zoom. That is, the maximum allowable zoom level. This is also a floating-point value that indicates the maximum multiplier of the page size compared to the screen size.

(4) Minimum-scale

Minimum-scale: The minimum scale to which the user is allowed to zoom. Similar to the Maximum-scale usage.

(5) User-scalable

User-scalable the user to adjust the zoom. That is, whether the user can change the page zoom level. If set to Yes, the user is allowed to change it instead of No.

3. Keywords (keywords)

Description: A list of keywords provided for search engines. Each keyword is separated by a comma ",". Specify keywords that search engines use to improve search quality.

Usage: <meta name= "Keywords" content= "keyword 1, keyword 2, keyword 3, keyword 4,......" >

4. Description (description, Introduction)
Description: Description is used to tell search engines the main content of your website.
Usage: <meta name= "Description" content= "A brief description of your webpage" >

5. Format-detection (Format detection)

Description: Format-detection is used to detect some formatting in HTML.

Usage: The format-detection attribute of meta is mainly set up as follows:

Meta name= "format-detection" content= "telephone=no" meta name= "format-detection" content= "email=no" meta name= "forma T-detection "content=" Adress=no "can also ligatures: Meta name=" format-detection "content=" Telephone=no,email=no,adress=no " (1) Telephone

You write a bunch of numbers without a link style, and the iphone will automatically add your text link style, and click on this number will automatically dial! Want to get rid of this dial-up link how to do it? Then our meta is prowess again, the code is as follows:

Telephone=no banned the conversion of numbers to dial-up links!
Telephone=yes turned on the number into a dial-up link, to turn on the conversion function, this meta will not have to write, in the default is the case is open!

　　　　(2) Email

Tell the device not to recognize the mailbox and not send it automatically after clicking

Email=no prohibited as an email address!
Email=yes opened the text default to the email address, this meta will not have to write, in the default is the case is open!

(3) Adress

adress=no no jump to the map!
adress=yes opens the function of clicking the address to jump directly to the map, in the default case is the open!

6. Apple-touch-fullscreen

Note: When added to the home screen, it is displayed in full screen.

Usage: <meta name= "Apple-touch-fullscreen" content= "yes" >

7. apple-mobile-web-app-capable

Description: The function is to delete the default Apple toolbar and menu bar. The content has two values "yes" and "no", and when we need to display the toolbar and menu bar, the row meta is not added, the default is display.

Usage: <meta name= "apple-mobile-web-app-capable" content= "yes"/>

8. App-config

Description: Preserves history and animation effects

Usage: <meta name= "App-config" content= "Fullscreen=yes,usehistorystate=yes,transition=yes"/>

9. Msapplication-tap-highlight

Description: Click No Highlights (Highlight)

Usage: <meta name= "Msapplication-tap-highlight" content= "no" >

Meta tags and usage understanding in HTML