Definition of meta tags
The meta tag is an auxiliary tag in the head section that provides metadata about the HTML document. It is not displayed on the page, but is machine readable. Can be used for browsers (how to display content or reload pages), search engines (SEO) or other web services.
use
In HTML, the <meta> tag has no closing tag.
In XHTML, <meta> tags must be properly closed.
The <meta> tag is always inside the head element.
Metadata is always passed in name/value pairs .
Attributes
| Attributes |
value |
describe |
| character_set |
Specifies the character encoding of HTML documents. |
|
| text |
Defines meta information related to the http-equiv or name attribute. |
|
|
Associate the content attribute with the HTTP header. |
|
|
Associate the content attribute with a name. |
|
| some_text |
Defines the format used to translate the value of the content attribute. |
name attribute
The name attribute is mainly used to describe the web page, and the corresponding attribute value is content , and the content in the content is mainly used for search engine robots to find and classify information.
The name attribute syntax format:
<meta name="参数" content="具体的参数值">keywords
"keywords" is a name that is often used. It defines a set of keywords for a document . Some search engines use these keywords to classify documents when they encounter them.
<meta name="keywords" content="HTML,ASP,PHP,SQL">description
Description: description is used to tell search engines the main content of your website.
<meta name="description" content="主要包括web前端及周边技术">author
Description: author marks the author of the web page
<meta name="author" content="[email protected]">viewport
Description: viewport is used to explain information such as the width and height scaling ratio of the mobile website
<meta name="viewport" content="width=device-width, initial-scale=1.0">The distance parameters of content are as follows:
1) width width (value/device-width)
2) height height (value/device-height)
3) initial-scale initial zoom ratio
4) maximum-scale maximum zoom ratio
5) minimum-scale minimum zoom ratio
6) Whether user-scalable allows users to zoom (yes / no)
http-equiv attribute
The http-equiv attribute is to add the content of the http header . We can use this attribute for some custom or additional http header content sent to the browser .
http-equiv attribute syntax format:
<meta http-equiv="参数" content="具体的参数值">charset
Description: It is used to explain the text and language used in making the webpage.
<meta http-equiv="charset" content="iso-8859-1">expires
Description: Set the expiration time of the webpage. Once it expires, it must be retrieved from the server. It should be noted that the GMT time format must be used
<meta http-equiv="expires" content="31 Dec 2023">content-Type
Description: It is used to set the character set used by the page.
<meta http-equiv="content-Type" content="text/html; charset=utf-8">The http-equiv attribute provides names for name /value pairs. And instructs the server to include name .
When a server sends a document to a browser, it first sends many name /value pairs . While some servers send many of these name /value pairs , all servers send at least one: content-type:text/html. This will tell the browser that it is ready to accept an HTML document .
When using the <meta> tag with the http-equiv attribute, the server will add name/value pairs to the content headers sent to the browser .
For example, add:
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">The headers sent to the browser should then contain:
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008Of course, these fields only make sense if the browser can accept these additional header fields and can use them in an appropriate way.
content attribute
The content attribute provides the value in name/value pairs . The value can be any valid string.
The content attribute should always be used with the name attribute or the http-equiv attribute.
common usage
<!-- 设定字符集 ，以下两种定义均可-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate">
<!-- 禁止转码 -->
<meta http-equiv="Cache-Control" content="no-transform">
<!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->