search
HomeWeb Front-endHTML TutorialSummary of the use of meta attributes in html

Summary of the use of meta attributes in html

Apr 01, 2017 pm 03:09 PM
htmlmetaSummarizeLabel

Original text: http://www.haorooms.com/post/html_meta_ds


Introduction

There was a discussion about meta in my previous blog Introduction, for example: http://www.haorooms.com/post/liulanq_think_ie This article about browser security introduces some attributes of IE under meta, which can realize transition conversion between pages. Already mentioned in SEO optimization. The following is a detailed introduction to the functions and uses of meta.


Preface

meta is an auxiliary tag in the head area of ​​html language. Maybe you think this code is dispensable. In fact, if you can make good use of meta tags, it will bring you unexpected effects. The functions of meta tags are: search engine optimization (SEO), defining the language used on the page, automatically refreshing and pointing to new pages, and realizing dynamics during web page conversion. Effect, control page buffering, web page rating and evaluation, control the window for web page display, etc.!


html meta summary

The composition of meta tag: meta tag has two attributes, they are http-equiv attribute and name attribute, different attributes are Different parameter values, these different parameter values ​​realize different web page functions.


1. Name attribute

The name attribute is mainly used to describe the web page, and the corresponding attribute value is content. The content in content is mainly for search engine robots to find. Information and classification information. The syntax format of the name attribute of the

meta tag is:

[code]<meta>。



The name attribute mainly has the following parameters:

A. Keywords 

Description: keywords are used to tell search engines what the keywords of your web page are.

Example:

[code]<meta>



B. description (website content description)

Explanation: description is used to tell Search engines search for the main content of your website.

Example:

[code]<meta>



C, robots (robot guide)

Explanation: robots are used to tell the search Which pages need to be indexed by the robot 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.

Example:

[code]<meta>



The specific parameters are as follows:

The information parameter is all: the file will be retrieved, And the links on the page can be queried;

The information parameter is none: the file will not be retrieved, and the links on the page cannot be queried;

The information parameter is index: the file will be Retrieval;

The information parameter is follow: the links on the page can be queried;

The information parameter is noindex: the file will not be retrieved, but the links on the page can be queried;

The information parameter is nofollow: the file will be retrieved, but the links on the page cannot be queried;

D, author (author)

Description: Mark The author of the webpage

Example:

[code]<meta>



E、generator

[code]<meta>


# The information parameter of the generator of the ##meta tag represents the software used to create the website.


F, COPYRIGHT

[code]<meta>


The COPYRIGHT information parameter of the meta tag represents the copyright information of the website.


G, revisit-after

[code]<meta>


revisit-after represents website revisit, 7days represents 7 days, and so on.

2. http-equiv attribute

http-equiv, as the name suggests, is equivalent to the file header function of http. It can return some useful information to the browser to Helps to display web page content correctly and accurately. The corresponding attribute value is content. The content in content is actually the variable value of each parameter. The syntax format of the http-equiv attribute of the


meta tag is:

[code]<meta>;


The http-equiv attribute mainly has the following parameters:


A. Expires
Description: Can be used to set the expiration time of the web page. Once a web page expires, it must be retransmitted to the server.

Usage:

[code]<meta>


Note: GMT time format must be used.


B. Pragma (cache mode)
Description: Prohibit the browser from accessing page content from the cache of the local computer.

Usage:

[code]<meta>


Note: With this setting, visitors will not be able to browse offline.


C. Refresh
Description: Automatically refresh and point to the new page.

Usage:

[code]<meta> //(注意后面的引号,分别在秒数的前面和网址的后面)


Note: The 2 means that it will automatically refresh to the URL after staying for 2 seconds.


D. Set-Cookie (cookie setting)
Note: If the web page expires, the saved cookies will be deleted.

Usage:

[code]<meta>


Note: GMT time format must be used.


E. Window-target (display window setting)
Description: Force the page to be displayed as an independent page in the current window.

Usage:

[code]<meta>


Note: Used to prevent others from calling your own page in the frame.


F, content-Type (display character set setting)
Description: Set the character set used by the page.

usage:

[code]<meta>



具体如下:

meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;

meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码;

G、content-Language(显示语言的设定)

用法:

[code]<meta>



H、Cache-Control指定请求和响应遵循的缓存机制。

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

ly-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

J、http-equiv="imagetoolbar"

[code]<meta>



指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

K、Content-Script-Type

[code]<meta>



W3C网页规范,指明页面中脚本的类型。

L 页面跳转,只用于IE

具体请看 http://www.haorooms.com/post/liulanq_think_ie

The above is the detailed content of Summary of the use of meta attributes in html. 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
What is the difference between an HTML tag and an HTML attribute?What is the difference between an HTML tag and an HTML attribute?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

The Future of HTML: Evolution and TrendsThe Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsHTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the  tag? Why is this important?How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

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 Article

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.