HTML Meta标记

时间:2019-06-08 23:19:23  来源:igfitidea点击:

<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%。