search
HomeWeb Front-endHTML TutorialWhat is the function of html meta tag? Introduction to common attributes of html meta tags

html What is the role of meta tag? What are the common html meta tag attributes? Next, this article will introduce to you the definition and specific usage of the html meta tag, as well as an introduction to the attributes of the html meta tag (including a detailed introduction to the use of the http-equiv attribute)

What is html meta tag:

Definition and usage of html meta tag:

element can provide meta-information about the page (meta-information) , 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 any content. The tag's properties define the name/value pairs associated with the document.

html meta tag required attributes:

content: some_text: Define meta information related to the http-equiv or name attribute

Optional attributes of the html meta tag:

What is the function of html meta tag? Introduction to common attributes of html meta tags

The name attribute of the html meta tag:

The name attribute provides the name The name in the /value pair. Neither HTML nor XHTML tags specify any predefined names. In general, you are free to use names that are meaningful to you and to readers of the source document.

"keywords" is a frequently used name. It defines a set of keywords for the document. Some search engines use these keywords to classify documents when they encounter them.

A meta tag like this may be helpful for getting indexed by search engines:

<meta name="keywords" content="HTML,ASP,PHP,SQL">

If the name attribute is not provided, the name in the name/value pair will use the value of the http-equiv attribute .

html The http-equiv attribute of the meta tag:

The http-equiv attribute provides a name for the name/value pair. and instructs the server to include name/value pairs in the header of the MIME document to be sent to the browser before sending the actual document.

When the server sends a document to the browser, it first sends a number of name/value pairs. Although some servers send many of these name/value pairs, all servers send at least one: content-type:text/html. This tells the browser to prepare to accept an HTML document.

When using the tag with the http-equiv attribute, the server will add the name/value pair to the content header sent to the browser. For example, add:

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

so that the header sent to the browser should contain:

content-type: text/html

charset:iso-8859-1

expires:31 Dec 2008

Of course, these additional header fields are only meaningful if the browser can accept them and use them in an appropriate way.

html The content attribute of the meta tag: The

content attribute provides the value in the name/value pair. The value can be any valid string.

The content attribute should always be used together with the name attribute or the http-equiv attribute.

html The scheme attribute of the meta tag:

The scheme attribute is used to specify the scheme to be used to translate the attribute value. This scheme should be defined in the profile specified by the profile attribute of the

tag.

html Detailed introduction to the use of the http-equiv attribute of the meta tag:

In the previous study of the front-end, the understanding of the meta tag was only this sentence.

But when you open any website, there will be a column of meta tags in the head tag.

Usage 1:

Example:

There are the following usages:

  1. no-cache: Send a request first and confirm with the server whether the resource has been changed. If not, use the cache.

  2. no-store: No caching is allowed. You have to go to the server every time and download the complete response. (Security measure)

  3. public : All responses are cached, but are not required. Because max-age can also achieve the same effect

  4. private: only cached for a single user, so no relay is allowed to cache. (For example, CDN does not allow caching of private responses)

  5. maxage: Indicates how long the response can be cached and reused starting from the current request without re-requesting the server. For example: max-age=60 means that the response can be cached and reused for another 60 seconds.

Usage 2:

Description: Used to prevent the current page from being automatically transcoded by Baidu when viewed on mobile devices. Although Baidu's intentions are good, the transcoding effect is often unsatisfactory. So you can add the sentence in the example to the head to avoid Baidu's automatic transcoding. Example:

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

D. expires (webpage expiration time)

Description: Used to set the expiration time of the webpage. After expiration, the webpage must be retransmitted to the server. Example:

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

E. refresh (automatically refresh and point to a certain page)

Description: The web page will automatically refresh and redirect to the set URL within the set time. Example:

<meta http-equiv="refresh" content="2;URL=http://www.php.cn/"> //意思是2秒后跳转向php网站

F. 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"> //具体范例

暂时总结的就这么多了,meta标签的自定义属性实在太多了。所以只去找了常用的一些,还有像Window-target这样的属性还没来得及说,毕竟用的也不是太多。因为经验尚浅,所以如果有出错的地方,希望各位能帮忙指正。

HTML 与 XHTML 之间的差异:

在 HTML 中, 标签没有结束标签。

在 XHTML 中, 标签必须被正确地关闭。

注释: 标签永远位于 head 元素内部。注释:元数据总是以名称/值的形式被成对传递的。

【相关推荐】

html textarea是什么意思?如何获取textarea标签中的换行符和空格?

html base URL是什么?html base详细解析汇总

The above is the detailed content of What is the function of html meta tag? Introduction to common attributes of html meta tags. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Versatility of HTML: Applications and Use CasesThe Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools