No more nonsense, let’s start with today’s topic.
html/11675.html">meta tag in Html
1. Meaning of meta tagThe <meta> element provides meta-information about the page, such as description and keywords for search engines and update frequency.
The <meta> tag is located at the head of the document and contains no content.
The attributes of the <meta> tag define the name/value pairs associated with the document.
2. Commonly used attributes in meta1. charset (character set)
Description: Specifies the character encoding of HTML documents.
Usage: <meta charset=UTF-8>
2. viewport (viewport)
Description: It is the visible area of the user's web page. Everyone knows that the screen of mobile devices is generally much smaller than that of PCs. The webkit browser will map a larger virtual window to the screen of the mobile device. The default virtual window is 980 pixels wide (the current standard width of most websites) , and then scale according to a certain ratio (3:1 or 2:1).
That is to say, when we load a normal 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, usually 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 scaling. That is, the maximum degree of scaling 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 scale 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
Description: A list of keywords provided for search engines. Use commas to separate each keyword. Specify keywords that search engines use to improve search quality.
Usage: <Meta name=Keywords Content=Keywords 1, Keywords 2, Keywords 3, Keywords 4,…>
4. description (description, introduction)
Description: Description is used to tell search engines the main content of your website.
Usage ：<Meta name=Description Content=你网页的简述>
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:
meta name=format-detection content=telephone=no meta name=format-detection content=email=no meta name=format-detection content=adress=no
You can also write it in succession: meta name=format-detection content=telephone=no,email=no,adress=no
(1)telephone
You clearly wrote a string of numbers without adding a link style, but the iPhone will automatically add a link style to your text, and clicking on the number will automatically dial the number! How to remove this dial-up link? At this time, our meta should show off its magic power again. The code is as follows:
telephone=no disables converting numbers into dial-up links!
telephone=yes enables the conversion of numbers into dial-up links. To enable the conversion function, there is no need to write this meta. It is enabled 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!
email=yes turns on the text and defaults to the email address. There is no need to write this meta. It is turned on by default!
(3)address
adress=no prohibits jumping to the map!
adress=yes enables the function of clicking the address to jump directly to the map. It is enabled by default!
6. apple-touch-fullscreen
Description: After added to the home screen, it will be 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. 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: <meta name=apple-mobile-web-app-capable content=yes />
8. App-Config
Description: Keep history records and animation effects
Usage: <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>
9. msapplication-tap-highlight
Description: Click No Highlight (Highlight)
Usage: <meta name=msapplication-tap-highlight content=no>
The above is the detailed explanation of meta tags and usage in HTML introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!