Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use meta tags in html". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use meta tags in html.

I. the meaning of the meta tag

Elements can provide meta-information (meta-information) about the page, such as descriptions and keywords for search engines and update frequency.

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

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

2. Attributes commonly used in meta

1. Charset (character set)

Description: specifies the character encoding of HTML documents.

Usage:

2. Viewport (visual area)

Description: it is the visual area of the user's web page. As we all know, the screen of a mobile device is generally much smaller than PC, and webkit browsers map a larger "virtual" window to the screen of a mobile device. The default virtual window is 980 pixels wide (the standard width of most websites today), and then zooms by a certain scale (3:1 or 2:1).

In other words, when we load a normal web page, webkit loads the web page at the browser standard of 980 pixels, and then shrinks to a width of 490 pixels. Note that this reduction is a global reduction, that is, all elements on the page will shrink.

Usage:

1 、

(1) width

Width controls the size of viewport, which is generally set to device-width for adaptive purposes.

(2) initial-scale

Initial-scale: the initial scale, that is, the scale when the page is first load.

(3) maximum-scale

Maximum-scale maximum zoom. That is, the maximum zoom allowed. 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 users are allowed to zoom. Similar to the usage of maximum-scale.

(5) user-scalable

User-scalable user adjusts zooming. That is, whether the user can change the zoom degree of the page. If set to yes, the user is allowed to change it, and vice versa is no.

3. Keywords (keyword)

Description: a list of keywords provided for search engines. The keywords are separated by English commas ",". 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 site.

Usage:

5. Format-detection (format detection)

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

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

1. Meta name= "format-detection" content= "telephone=no"

2. Meta name= "format-detection" content= "email=no"

3. Meta name= "format-detection" content= "adress=no"

You can also write: meta name= "format-detection" content= "telephone=no,email=no,adress=no"

(1) telephone

You clearly write a string of numbers without a link style, but iPhone will automatically add a link style to your text, and clicking on this number will automatically dial! How do I get rid of this dial-up link? At this point, it's time for our meta to show off its power again, with the following code:

Telephone=no forbids turning numbers into dial-up links!

Telephone=yes will open the conversion of numbers into dial-up links, to turn on the conversion function, this meta does not need to be written, in the default is open!

(2) email

Tell the device that the mailbox is not recognized and will not be sent automatically after clicking.

Email=no is prohibited as an email address!

Email=yes will open the text default to the email address, this meta does not need to write, in the default case is open!

(3) adress

Adress=no forbids jumping to the map!

Adress=yes opens the function of clicking on the address to jump directly to the map, which is turned on by default!

6. Apple-touch-fullscreen

Description: after adding to the home screen, full screen display.

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, the line meta does not need to be added, the default is to display.

Usage:

8. App-Config

Description: preserve history and animation effects

Usage:

9. Msapplication-tap-highlight

Description: click No highlight (highlight)

Usage:

At this point, I believe you have a deeper understanding of "how to use meta tags in html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.