Home Web Front-end HTML Tutorial What is the function of html meta tag? Introduction to common attributes of html meta tags

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

Aug 17, 2018 pm 01:41 PM

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">
Copy after login

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">
Copy after login

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" />
Copy after login

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" />
Copy after login

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网站
Copy after login

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"> //具体范例
Copy after login

暂时总结的就这么多了,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 of this Website
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

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

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

See all articles