Web Front-endHTML TutorialSummary of html meta, introduction to the use of meta attributes in html tags
Quote: http://www.haorooms.com/post/html_meta_ds
Foreword
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
Composition of the meta tag: The meta tag has two attributes, which are the http-equiv attribute and the name attribute. Different attributes have different parameter values. These different parameter values realize different web page functions.
1. name attribute
The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information.
The syntax format of the name attribute of themeta tag is:
<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"参数"<span class="atn">content<span class="pun">=<span class="atv">"具体的参数值"<span class="tag">><span class="pln">。 </span></span></span></span></span></span></span></span></span></span></code>
The name attribute mainly has the following parameters:
A、Keywords
Explanation: keywords are used to tell search engines what the keywords of your web page are.
Example:
<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"keywords"<span class="atn">content<span class="pun">=<span class="atv">"meta总结,html meta,meta属性,meta跳转"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
B、description(website content description)
Description: Description is used to tell search engines the main content of your website.
Example:
<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"description"<span class="atn">content<span class="pun">=<span class="atv">"haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
C, robots (robot guide)
Description: Robots are used to tell search robots 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.
Example:
<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"robots"<span class="atn">content<span class="pun">=<span class="atv">"none"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
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 retrieved;
The information parameter is follow: 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)
Instructions: Mark the author of the webpage
Example:
<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"author"<span class="atn">content<span class="pun">=<span class="atv">"root,root@xxxx.com"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
E、generator
<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"generator"<span class="atn">content<span class="pun">=<span class="atv">"信息参数"<span class="tag">/></span></span></span></span></span></span></span></span></span></code>
The generator information parameter of the meta tag represents the software used to create the website.
F、COPYRIGHT
<code><span class="tag"><META<span class="pln"> <span class="atn">NAME<span class="pun">=<span class="atv">"COPYRIGHT"<span class="atn">CONTENT<span class="pun">=<span class="atv">"信息参数"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
The COPYRIGHT information parameter of the meta tag represents website copyright information.
G、revisit-after
<code><span class="tag"><META<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"revisit-after"<span class="atn">CONTENT<span class="pun">=<span class="atv">"7days"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
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 help display web page content correctly and accurately. The corresponding attribute value is content, and the content in content is actually It is the variable value of each parameter.
The http-equiv attribute syntax format ofmeta tag is:
<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"参数"<span class="atn">content<span class="pun">=<span class="atv">"参数变量值"<span class="tag">><span class="pln">； </span></span></span></span></span></span></span></span></span></span></code>
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><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"expires"<span class="atn">content<span class="pun">=<span class="atv">"Fri,12Jan200118:18:18GMT"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
Note: GMT time format must be used.
B, Pragma (cache mode)
Description: Disable the browser from accessing page content from the local computer's cache.
Usage:
<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Pragma"<span class="atn">content<span class="pun">=<span class="atv">"no-cache"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
Note: With this setting, visitors will not be able to browse offline.
C、Refresh
Description: Automatically refresh and point to new page.
Usage:
<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Refresh"<span class="atn">content<span class="pun">=<span class="atv">"2;URL=http://www.haorooms.com"<span class="tag">><span class="pln"> //(注意后面的引号，分别在秒数的前面和网址的后面) </span></span></span></span></span></span></span></span></span></span></code>
Note: The 2 refers to automatically refreshing 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><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Set-Cookie"<span class="atn">content<span class="pun">=<span class="atv">"cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
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><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Window-target"<span class="atn">content<span class="pun">=<span class="atv">"_top"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
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><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"content-Type"<span class="atn">content<span class="pun">=<span class="atv">"text/html;charset=gb2312"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
The details are as follows:
When the charset information parameter of the meta tag is such as GB2312, it means that the encoding used by the website is Simplified Chinese;
When the charset information parameter of the meta tag is such as BIG5, it means that the encoding used by the website is Traditional Chinese;
When the charset information parameter of the meta tag is such as iso-2022-jp, it means that the encoding used by the website is Japanese;
When the charset information parameter of the meta tag is such as ks_c_5601, it means that the encoding used by the website is Korean;
When the charset information parameter of the meta tag is such as ISO-8859-1, it means that the encoding used by the website is English;
When the charset information parameter of the meta tag is such as UTF-8, it represents the world's universal language encoding;
G、content-Language（显示语言的设定）
用法：
<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Content-Language"<span class="atn">content<span class="pun">=<span class="atv">"zh-cn"<span class="tag">/></span></span></span></span></span></span></span></span></span></code>
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><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"imagetoolbar"<span class="atn">content<span class="pun">=<span class="atv">"false"<span class="tag">/></span></span></span></span></span></span></span></span></span></code>
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
K、Content-Script-Type
<code><span class="tag"><Meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Content-Script-Type"<span class="atn">Content<span class="pun">=<span class="atv">"text/javascript"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
W3C网页规范，指明页面中脚本的类型。
L 页面跳转，只用于IE
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PMThe official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PMThis article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
