HTML Meta标记
<meta>
标签通常用于提供结构化元数据,
HTML允许我们以各种方式指定元数据—有关文档的其他重要信息。
META元素可用于包含描述HTML文档属性的名称/值对,如作者、描述、关键字、字符编码等。
在HTML或XHTML文档的标题部分中可以放置任意数量的<meta>
标记。
元数据不会显示在web页面上,但是可以通过机器解析,可以被浏览器、搜索引擎(如谷歌)或其他web服务使用。
在文档中添加Meta标记
我们可以通过将<meta>
标记放在<head>
和</head>
标记内,向web页面添加元数据。
除了核心属性之外,<meta>
标记还可以具有以下属性-
属性 | 说明 |
---|---|
Name | 属性的名称。例如 keywords, description, author, revised, generator。 |
content | 指定属性的值。 |
scheme | 指定解释属性值的方案 |
http-equiv | 用于http响应消息头。例如,可用于刷新页面或设置cookie。 值包括content type、expires、refresh和set cookie。 |
在HTML中声明字符编码
UTF-8是一种非常通用的字符编码,推荐使用。
但是,如果没有指定该编码,则使用浏览器的默认编码。
<head> <title>Declaring Character Encoding</title> <meta charset="utf-8"> </head>
指定搜索引擎关键字
我们可以使用<meta>
标记来指定与文档相关的重要关键字,这些关键字将由搜索引擎使用。
下面的例子添加文档的重要关键字: HTML,Meta标记,html教程
<head> <title>Meta Tags Example</title> <meta name = "keywords" content = "HTML, Meta标记, html教程" /> </head>
搜索引擎描述
一些搜索引擎使用元数据,特别是关键词和描述来索引网页;
描述提供了一个简短的页面概要。
这可以再次被各种搜索引擎使用,同时索引你的网页,以达到收录目的。
<head> <title>Defining Keywords and Description</title> <meta name="keywords" content="HTML, CSS, javaScript"> <meta name="description" content="本页提供了HTML有关meta的用法教程"> </head>
文件修订日期
我们可以使用<meta>
标记来提供有关上次文档是何时的信息
<head> <meta name = "revised" content = "theitroad, 3/7/2017" /> </head>
页面刷新
<meta>
标记可用于指定一个持续时间,在此期间之后,网页将保持自动刷新。
如果我们希望页面每3秒刷新一次,可以使用以下语法。
<head> <meta http-equiv = "refresh" content = "3" /> </head>
页面重定向
我们可以使用<meta>
标记将页面重定向到任何其他网页。如果要在特定秒数后重定向页面,也可以指定持续时间。
下面是一个5秒后将当前页重定向到另一页的示例。若要立即重定向页面,请不要指定内容属性。
<head> <meta http-equiv = "refresh" content = "5; url = http://www.theitroad.com" /> </head>
设置Cookies
Cookie是存储在计算机上的小文本文件中的数据,它在web浏览器和web服务器之间交换,以根据web应用程序的需要跟踪各种信息。
我们可以使用<meta>
标记在客户端存储cookies,稍后Web服务器可以使用这些信息来跟踪站点访问者。
<head> <title>Meta Tags Example</title> <meta http-equiv = "cookie" content = "userid = abc; expires = Wednesday, 08-Aug-17 23:59:59 GMT;" /> </head>
如果不包括过期日期和时间,则cookie将被视为会话cookie,并将在用户退出浏览器时被删除。
设置作者名称
我们可以使用meta标记在网页中设置作者名。
<meta name = "author" content = "Hyman Li" />
为移动设备配置视窗
我们可以使用viewport meta标记在移动设备上正确地显示web页面。
如果没有viewport元标记,移动浏览器就会以典型的桌面屏幕宽度呈现web页面,然后将其缩小以适应移动屏幕。
因此,它需要在移动设备中进行缩放才能正确地查看web页面,这非常不方便。
<head> <title>配置视窗</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
“content”属性中的“width=device-width”键值对将视图的宽度设置为与设备的屏幕宽度相同,而“initial-scale=1”将页面首次被浏览器加载时的初始缩放级别设置为100%。