What is the meta tag in html? What properties are there?

Meta in html means "meta". It is an auxiliary tag in the head area. It does not contain any content and is used to provide meta-information about the page, such as for search engines and update frequency. Description and keywords; the meta tag's attributes define the name/value pairs associated with the document.

The meta tag in html is an auxiliary tag in the head area. It is generally used for page descriptions, keywords and other metadata. These data It will serve browsers, search engines, etc. It has four attributes: name attribute, http-equiv attribute, content attribute, and scheme attribute.

In the process of learning front-end, most of the understanding of meta tags is . We will see this sentence when we open any website, but we don’t know about meta tags. How are you familiar with it? Next, I will introduce this label in detail in the article, which has a certain reference effect. I hope it will be helpful to everyone.

[Recommended course: HTML tutorial]

meta tag introduction

meta tag is HTML An auxiliary tag in the language head area, often used to define the page's description, keywords, last modified date and other metadata. This metadata will be served to browsers, search engines and other web services.

Composition of the meta tag

The meta tag has two attributes, namely the http-equiv attribute and the name attribute.

name attribute

The name attribute is mainly used to describe web pages, such as keywords, narratives, etc. of the web page. The corresponding attribute value is content. The content in content is a specific description of the name input type, which is convenient for search engines to crawl.

The syntax format of the name attribute in the meta tag is:

<meta name="参数" content="具体的描述">

The name attribute has the following parameters. (A-C are common attributes)

(1) keywords (keywords)

Description: Used to tell search engines the keywords of your web page. Example:

<meta name="keywords" content="PHP中文网">

(2) description (description of website content)

Description: Used to tell search engines the main content of your website. Example:

<meta name="description" content="php中文网提供大量免费、原创、高清的php视频教程">

(3) viewport (mobile terminal window)

Description: This concept is relatively complex and will be described in detail in the next blog post. This attribute is often used in designing mobile web pages. Viewport has been used when using frameworks such as bootstrap and AmazeUI.

<meta name="viewport" content="width=device-width, initial-scale=1">

(4) robots (define the indexing method of search engine crawlers)

Description: robots are used to tell the crawler which pages need to be indexed and which pages do not need to be indexed. The parameters of content include all, none, index, noindex, follow, and nofollow. The default is all.

<meta name="robots" content="none">

The specific parameters are as follows:

1. none: Search engines will ignore this web page, which is equivalent to noindex and nofollow.
2. noindex: Search engines do not index this web page.
3. nofollow: The search engine does not continue to search other web pages through the link index of this web page.
4. all: The search engine will index this web page and continue to index the links through this web page, which is equivalent to index and follow.
5. Index: Search engines index this web page.
6. follow: The search engine continues to search other web pages through the link index of this web page.

(5) author (author)

Description: Used to mark the author of the web page. Example:

<meta name="author" content="PHP中文网">

(6) generator (web page Production software)

Description: An example of what software is used to indicate the web page: (I don’t know if it can be written like this):

<meta name="generator" content="Sublime Text3">

(7) copyright )

Description: Used to mark copyright information Example:

<meta name="copyright" content="PHP中文网"> //代表该网站为PHP中文网个人版权所有。

(8) revisit-after (search engine crawler revisit time)

Note: If the page is not updated frequently, in order to reduce the pressure brought by search engine crawlers on the server, you can set a crawler revisit time. If the revisit time is too short, crawlers will visit at their defined default time. Example:

<meta name="revisit-after" content="7 days" >

(9) renderer (dual-core browser rendering method)

Description: renderer is prepared for dual-core browsers and is used to specify the default for dual-core browsers How to render the page. For example, 360 browser. Example:

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv attribute

http-equiv As the name suggests, it is equivalent to the role of HTTP.

The http-equiv attribute syntax format in the meta tag is:

<meta http-equiv="参数" content="具体的描述">

The http-equiv attribute mainly has the following parameters:

(1) content- Type (set webpage character set) (recommended to use HTML5 method)

Description: used to set the webpage character set to facilitate browser parsing and rendering of the page. Example:

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

(2) (Generally set to the latest mode, this setting is also very common in major frameworks.)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

(3) cache-control (specify the caching mechanism followed by requests and responses)

Description: Instruct the browser how to cache a response and how long to cache it

<meta http-equiv="cache-control" content="no-cache">

共有以下几种用法：

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

禁止百度自动转码

说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

<meta http-equiv="Cache-Control" content="no-siteapp" />

（4）expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

（5） refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。

<meta http-equiv="refresh" content="2；URL=//m.sbmmt.com/"> //意思是2秒后跳转到PHP中文网

（6） Set-Cookie(cookie设定)

说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 标签的 profile 属性指定的概况文件中进行了定义。

总结：meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。

The above is the detailed content of What is the meta tag in html? What properties are there?. For more information, please follow other related articles on the PHP Chinese website!