元数据意味着关于数据的信息。这个 标签 在HTML中提供有关HTML文档的信息,或者简单地说,它提供有关文档的重要信息。在制作网页或网站时添加元标记是一种很好的做法,因为像谷歌这样的搜索引擎会搜索这个元标记,以便理解网站提供的信息。如果用户搜索特定网站,搜索引擎结果页面将在搜索结果中显示片段,提供与该网站相关的信息,这也很有用。这些标记基本上用于添加名称/值对,以描述HTML文档的属性,例如过期日期、作者姓名、关键字列表、文档作者等,即用于指定字符集、页面描述、关键字、文档作者和视口设置。这个标记是一个空元素,因为它只有一个开始标记,没有结束标记,但它在属性中携带信息。根据信息的不同,web文档可以包含一个或多个元标记,但一般来说,它不会影响文档的物理外观。
语法:
<meta attribute-name="value">
属性: 这个标签接受下面提到和描述的四个属性。
注: meta标记也接受 全局属性 在HTML中
要点:
- 标记内容在浏览器上不可见,但可以被机器解析。
- 它们只是用来提供有关HTML文档的附加信息。
- 标记被添加到我们的HTML文档中,用于 搜索引擎优化。
- 它们被添加到标签中,供浏览器、搜索引擎和其他web服务使用。
- 通过 标记,设计师可以控制视口。
例子: 这个简单的例子说明了在提供信息的head标签中使用meta标签。
HTML
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 , maximum-scale = 1 "> < meta name = "description" content="A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions."> < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> </ head > < body > < h2 >GeeksforGeeks</ h2 > < p >This is an example of meta tag</ p > </ body > </ html > |
输出:
![图片[1]-HTML标记-yiteyi-C++库](https://media.geeksforgeeks.org/wp-content/uploads/20210917175523/1.jpg)
HTML 标记
实现 标记还有多种其他方法,可以使用以下属性值:
突出重要关键词: meta标记包含网页上的重要关键字,web浏览器利用这些关键字根据搜索对网页进行排序。搜索引擎优化是对内容SEO排名进行优化的另一个术语。
例子: 本例描述了带有名称和内容属性的 标记,它们的值设置为关键字和一些内容。
HTML
<!DOCTYPE html> < html > < head > <!-- meta tag starts --> < meta name = "keywords" content = "Meta Tags, Metadata" /> <!-- meta tag ends --> </ head > < body > < p >Hello GeeksforGeeks!</ p > </ body > </ html > |
输出:
Hello GeeksforGeeks!
提供网页的描述 :元标记中可以包含网页的简短描述,这将帮助网页在internet上排名。
例子: 这个例子描述了如何使用 标签来提供网站的描述。
HTML
<!DOCTYPE html> < html > < head > <!-- meta tag starts --> < meta name = "keywords" content = "Meta Tags, Metadata" /> < meta name = "description" content = "Geeksforgeeks is a computer science portal." /> <!-- meta tag ends --> </ head > < body > < p >GeeksforGeeks!</ p > </ body > </ html > |
输出 :
GeeksforGeeks!
文件修订日期: meta标签用于提供有关上次更新文档的信息。刷新网页时,各种web浏览器都会使用这些信息。
例子: 本例描述了如何使用 标记来提供上次更新的文档信息。
HTML
<!DOCTYPE html> < html > < head > <!-- meta tag starts --> < meta name = "keywords" content = "Meta Tags, Metadata" /> < meta name = "description" content = "Learn about Meta Tags." /> < meta name = "revised detail" content = "last updated time" /> <!-- meta tag ends --> </ head > < body > < p >GeeksforGeeks!</ p > </ body > </ html > |
输出:
GeeksforGeeks!
自动刷新: meta标签中会提到一个指定的时间,在该时间之后网页将自动刷新,即,此meta标签用于指定一个持续时间,在该持续时间之后,网页将在给定的持续时间之后自动刷新。
例子: 下面的代码将在8秒后刷新网页。
HTML
<!DOCTYPE html> < html > < head > <!-- meta tag starts --> < meta name = "keywords about" content = "Meta Tags, Metadata" /> < meta name = "description" content = "Learning about Meta Tags." /> < meta name = "revised about" content = "GeeksforGeeks" /> < meta http-equiv = "refresh" content = "8" /> <!-- meta tag ends --> </ head > < body > < p >GeeksforGeeks!</ p > </ body > </ html > |
输出:
![图片[2]-HTML标记-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/20210917/geeks_20210917185915.gif)
将标签属性值设置为在指定的持续时间内自动刷新网页
指定网页作者: MetaTag允许我们提及网页作者的姓名,如下所示。
例子: 本例描述了如何使用 标记来提供作者的详细信息。
HTML
<!DOCTYPE html> < html > < head > <!-- meta tag starts --> < meta name = "keywords used " content = "Meta Tags, Metadata" /> < meta name = "description about" content = "Meta tags learning." /> < meta name = "author" content = "Akash Kumar17" /> <!-- meta tag ends --> </ head > < body > < p >GeeksforGeeks!</ p > </ body > </ html > |
输出:
GeeksforGeeks!
浏览器支持:
- 谷歌Chrome93.0
- Internet Explorer 11.0
- 微软Edge 93.0
- Mozilla 92.0
- 歌剧78.0
- 狩猎14.1