HTML 基础
HTML 高级教程
HTML5 特征
HTML5 示例
HTML5 参考手册

HTML 元标签

在本教程中,您将学习如何使用元标签来提供有关网页的元数据。

定义元数据

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

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

以下部分描述了元标签用于各种目的。

在 HTML 中声明字符编码

元标签通常用于在 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 是一种非常通用且推荐选择的字符编码。 但是,如果未指定,则使用平台的默认编码。


定义文档的作者

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

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

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

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


搜索引擎的关键字和描述

一些搜索引擎使用元数据,尤其是关键字和描述来索引网页; 然而,这不一定是真的。 为文档的关键字和描述赋予额外权重的关键字提供了页面的简短概要。 这是一个例子:

<head>
    <title>定义关键字和描述</title>  
    <meta name="keywords" content="HTML, CSS, javaScript">
    <meta name="description" content="易于理解的关于 HTML、CSS、javaScript 等的教程和参考资料..."> 
</head>

提示:当页面出现在搜索结果中时,搜索引擎通常会使用页面的元描述为页面创建简短的概要。 请参阅元描述指南


为移动设备配置视口

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

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

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

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

<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> viewport 标签。 它将使您的网站对用户友好,并且在手机和平板电脑等移动设备上更易于访问。

Advertisements