Good web front-end programmers to share and use meta tags in the html explain this article to introduce in the html meta tags and use Detailed, take a look interested friends, Html meta tags in
a, meaning meta tags
<meta> element provides meta information about the page (meta-information), such as for search engines and the frequency of updating the description and keywords.
<meta> tag at the head of the document does not contain any content.
Properties <meta> tag defines the name associated with the document / value pairs.
Two, meta attribute in common
- charset (character set)
Description: Specifies the character encoding of an HTML document.
Usage: <Meta charset = "UTF-. 8">
2. the viewport (viewport)
Description: page is viewable area of the user. We all know that mobile device's screen is generally much smaller than the PC, webkit browser will be a larger "virtual" window is mapped onto the screen of a mobile device, the default virtual window is 980 pixels wide (currently most standard Web site width), and a certain proportion (3: 1 or 2: 1) be scaled.
That is when we load a page of ordinary time, webkit will first load the page in a browser standard 980 pixels, and then reduced to a width of 490 pixels. Note that this is a global shrink narrow, that is, all elements on the page will be reduced.
Usage:
. 1, <Meta ID = "the viewport" name = "the viewport" Content = "width = width-Device; Initial-Scale = 1.0; maximum-Scale =. 1; User-Scalable = NO;">
(. 1) width
width to control the size of the viewport, the general in order to set the adaptive-width Device
(2) Scale-Initial
Initial-Scale: initial scale, that is, when the first page load time scaling.
(3) maximum-Scale
maximum-Scale maximum zoom. That is the maximum allowed zoom level. It is also a floating point value to indicate the maximum multiplier page size compared to the size of the screen.
(. 4) Minimum Scale-
Minimum-Scale: allows the user to zoom to the smallest scale. And a maximum-scale usage is similar.
(. 5) Scalable User-
User-Scalable user to adjust the zoom. That is, whether the user can change the page zoom level. If yes is set to allow the user to be changed, otherwise no. - keywords (keywords)
Note: a list of keywords for the search engine. Among the keywords with a comma "," separated. Specify the search engine used to improve the quality of search keywords.
Usage: <Meta name = "Keywords" Content = " Image 1, Image 2, Image 3, Image 4, ......"> - description (description, Introduction)
Description: Description used to tell the search engine the main content of your website.
Usage: <Meta name = "Description" Content = " your page brief description"> - format-detection (detection format)
Description: format-detection is used to detect in some of html format.
Usage: About format-detection properties 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 "
can write continuously: Meta name =" format-Detection "Content =" Telephone = NO, Email = NO, Adress = NO "
(1) Telephone
you obviously written by a string of numbers did not add links style, the iPhone will automatically add the text you the link style and click on this number will automatically dial! I want to remove this dial-up link how does it work? Then what should our meta prowess, the code is as follows:
Telephone = NO on prohibiting the conversion of the digital dial-up link!
telephone = yes it turned into a digital dial-up link, to open the conversion function, this meta would not write, In the case of default is to open!
(2) email
tells the device does not recognize the mailbox, do not automatically send after clicking
email = no ban as an e-mail address!
email = yes it opens the default text for the e-mail address, this meta would not have written, in the case of default is to open!
(3) Adress
Adress = NO prohibit jump to map!
adress = yes it opens click on the address to jump directly to the map function, in the case of default is to open! - apple-touch-fullscreen
Description: Add to the main screen, the screen display.
Usage: <Meta name = "the Apple-Touch-Fullscreen" Content = "yes">
7. the Apple-Mobile-Web-App-Capable
Description: Apple's role is to remove the default toolbars and menu bar. content has two values "yes" and "no", when we need to show the tool bar and menu bar, this line of meta would not have added, the default is to display.
Usage: <Meta name = "the Apple-Mobile-Web-App-Capable" Content = "yes" />
8. App-Config
Description: keep a history of animation and
Usage: <meta name = "App- Config" content = "fullscreen = yes, useHistoryState = yes , transition = yes" /> - msapplication-tap-highlight
Description: None Click high light (bright)
Usage: <meta name = "msapplication- tap-highlight" content = "no">
summarized
above html small series is to introduce the use of meta tags and Hi, I want to help.