HTML <meta>元素

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。在本教程中，您将学习如何使用META标记来提供有关网页的元数据。

定义<meta>元数据

<meta>标签通常用于提供结构化元数据，例如文档的关键字、描述、作者姓名、字符编码和其他元数据。可以在HTML 或 XHTML 文档的head 部分中放置任意数量的元标记。

元数据不会显示在网页上，但可以被机器解析，并且可以被浏览器、搜索引擎（如谷歌）或其他网络服务使用。

以下部分描述了<meta>标记用于各种目的。

 

<meta>在 HTML 中声明字符编码

Meta 标签通常用于在 HTML 文档中声明字符编码。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Declaring Character Encoding</title> 
    <meta charset="utf-8">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

要在 CSS 文档中设置字符编码，使用@charset规则。

注意： UTF-8是一种非常通用且推荐选择的字符编码。但是，如果未指定，则使用平台的默认编码。

 

<meta>定义文档的作者

您还可以使用元标记来明确定义谁是网页的作者或创建者。

作者可以是个人、公司整体或第三方。

<head>
    <title>Defining Document's Author</title>
    <meta name="author" content="Alexander Howick">
</head>

注意： meta 标签的name属性定义了一段文档级元数据的名称，而content属性给出了相应的值。属性值可能包含文本和实体，但content不能包含 HTML 标记。

 

<meta>定义搜索引擎的关键字和描述

一些搜索引擎使用<meta>元数据，尤其是关键字和描述来索引网页；然而，这不一定是真的。为文档的关键字和描述赋予额外权重的关键字提供了页面的简短概要。请看下面例子：

<head>
    <title>Defining Keywords and Description</title>  
    <meta name="keywords" content="HTML, CSS, javaScript">
    <meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more..."> 
</head>

提示：当页面出现在搜索结果中时，搜索引擎通常会使用页面的<meta>元描述来为页面创建简短的概要。

 

<meta>为移动设备配置Viewport视口

您可以使用视口元标记viewport在移动设备上正确显示网页。

如果没有视口元标记viewport，移动浏览器会以典型的桌面屏幕宽度呈现网页，然后将其缩小以适应移动屏幕。因此，在移动设备上需要捏合缩放才能正常查看网页，非常不方便。

下面的演示展示了两个网页——一个带有视口元标记viewport，另一个没有设置视口元标记viewport。在移动设备上打开这些链接，看看它是如何工作的。

为移动设备配置Viewport视口

视口元标记viewport允许您为在移动设备上查看网页设置最佳视口大小和缩放限制。典型的视口元标记定义如下所示：

<head>
    <title>Configuring the Viewport</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

content属性内的width=device-width键值对将视口的宽度设置为与设备的屏幕宽度相同，当浏览器首次加载页面时，initial-scale=1将初始比例或缩放级别设置为 100%。

 

提示：始终在您的网页中使用视口标签<meta>。它将使您的网站对用户友好，并且在手机和平​​板电脑等移动设备上更易于访问。