Detailed explanation of meta tags and usage in html

The

element provides meta-information about the page, such as description and keywords for search engines and update frequency. This article mainly introduces to you the detailed explanation of meta tags and usage in HTML. Friends who are interested should take a look at it. I hope it can help you.

meta tag in Html

1. Meaning of meta tag

The element can provide meta-information about the page, such as for search engines and Description and keywords for update frequency.

　The tag is located at the head of the document and does not contain any content.

　The attribute of the tag defines the name/value pairs associated with the document.

2. Commonly used attributes in meta

1. charset (character set)

Description: Specifies the character encoding of HTML documents.

Usage:

2. viewport

Description: It is the visible area of ​​the user's web page. As we all know, mobile device screens are generally much smaller than PCs. WebKit browsers will map a larger "virtual" window to the mobile device screen. The default virtual window is 980 pixels wide (the current standard for most websites). width) and then scale according to a certain ratio (3:1 or 2:1).

That is to say, when we load an ordinary web page, webkit will first load the web page with the browser standard of 980 pixels, and then reduce it to a width of 490 pixels. Note that this reduction is a global reduction, that is, all elements on the page will be reduced.

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 set to device-width

for adaptive purposes　　　 (2) initial -scale

　　　　Initial-scale: The initial scaling ratio, that is, the scaling ratio when the page is loaded for the first time.

　　 　　 (3) maximum-scale

　　　　 Maximum-scale Maximum zoom. That is, the maximum zoom allowed. This is also a floating point value indicating the maximum multiplier of the page size compared to the screen size.

　　　　(4) minimum-scale

　　　　minimum-scale: The minimum ratio to which the user is allowed to zoom. Similar to maximum-scale usage.

　　　　(5) user-scalable

　　　　　user-scalable User-adjustable scaling. That is, whether the user can change the zoom level of the page. If set to yes, the user is allowed to change it, otherwise it is no.

3. keywords (keywords)

Description: A list of keywords provided for search engines. Separate each keyword with an English comma ",". Specify keywords that search engines use to improve search quality.

Usage:

4. description ( Description, introduction)

　 Description: Description is used to tell search engines the main content of your website.

Usage:

5. format-detection (format detection)

Explanation: format-detection is used to detect some formats in html.

Usage: The format-detection attribute of meta mainly has the following settings:

　meta name="format-detection" content="telephone=no"
　　　　meta name="format-detection" content="email=no"
　　　　meta name="format-detection" content="adress=no"

It can also be written consecutively: meta name="format-detection" content="telephone= no,email=no,adress=no"　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　

##　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　she is a string of numbers without adding a link style, and the iPhone will automatically Add a link style to this text, and clicking on this number will automatically dial the number! How to remove this dial-up link? At this time, our meta should show its magic again. The code is as follows:

Telephone=no prohibits converting numbers into dial-up links!

Telephone=yes turns on the conversion of numbers into dial-up links. To turn on the conversion function, there is no need to write this meta. It is turned on by default!

　　　　　　　　　　　　　　　　　　　　　　　　　　　

#　　　　　　　　　　　　　　　　　

##　　　　2) Email

　　 Tell the device not to recognize the email address, and not automatically send it after clicking it

　　 Email=no is prohibited as an email address!

If email=yes is turned on, the text will default to the email address. There is no need to write this meta. It is turned on by default!

　　　　（3）adress

　　adress=no prohibits jumping to the map!

　　adress=yes turns on the function of clicking on the address to jump directly to the map. It is turned on by default!

6. apple-touch-fullscreen

Description: After adding to the home screen, it will be displayed in full screen.

Usage:

7. apple-mobile-web-app-capable###

　Description: The function is to delete the default Apple toolbar and menu bar. content has two values ​​"yes" and "no". When we need to display the toolbar and menu bar, there is no need to add this line of meta. The default is to display it.

Usage:

8. App-Config

Description ：Retain history records and animation effects

Usage:

9 . msapplication-tap-highlight

Description: Click without highlight (highlight)

Usage:

Related recommendations:

How to implement the viewport in the meta tag to control the css attributes of the device screen

HTML meta tag usage Summary

Introduction to common uses of HTML meta tags

The above is the detailed content of Detailed explanation of meta tags and usage in html. For more information, please follow other related articles on the PHP Chinese website!