HTML Meta 元素

meta 元素用于提供有关网页的结构化元数据。

HTML 元素

<meta> 元素通常提供元数据,例如文档的*关键字*, *描述*和 *最后修改的作者*,以及其他元数据。可以在 HTML 或 XHTML 文档的头部放置任意数量的 meta 元素。

META 的 name 属性提供属性名称,而 content 属性提供相应的值。content 属性值可以包含文本和实体,但它可能不包含 HTML 标签。没有标准的元属性列表,因此你可以定义他们喜欢的任何元数据。这是一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="John Carter">
    <title>Defining Document's Author</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

上例中的 <meta> 标记只是定义了文档的作者。

注意: 元数据不会显示在页面上,但可以进行机器分析,并且可以被浏览器,搜索引擎或其他 Web 服务使用。

HTML 中定义字符编码

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

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

但是,要在 CSS 文档中设置字符编码,请使用 @charset AT-规则。

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

搜索引擎的关键字和描述

一些搜索引擎使用元数据,特别是关键字和描述来索引网页; 然而,这可能不一定是真的。为文档的关键字和描述赋予额外权重的关键字提供了页面的简短概要。以下示例中的元标记定义了页面的关键字和描述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="HTML, CSS, References">
    <meta name="description" content="Tutorials on HTML and CSS"> 
    <title>Defining Keywords and Description</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

提示: 搜索引擎通常会使用页面的元描述为页面在搜索结果中显示时创建简短概要。了解更多

启用移动设备上的缩放功能

你可以使用元视区标记在移动设备上启用网站缩放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="HTML, CSS, References">
    <meta name="description" content="Tutorials on HTML and CSS"> 
    <title>Defining Keywords and Description</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

提示: 始终在网页中使用 <meta> viewport 标记。它将使你的网站更容易在手机和平板电脑等移动设备上访问。