HTML 页面中有哪些不同的 <meta> 标签用于定义特殊的元信息?

htmlweb developmentfront end technology更新于 2024/6/7 11:24:17

元数据是指关于数据的信息。HTML 中的 <meta> 标签提供了关于 HTML 文档的完整信息。

在创建网页或网站时添加元标签是一种很好的做法，因为搜索引擎会使用元标签来理解网站的相关信息。在搜索特定网站时，元标签也很有用，因为搜索结果页面会显示在搜索结果中。这些标签主要用于添加作者姓名和值对，以描述 HTML 文档的属性，例如到期日期、作者姓名等。也就是说，它用于指定字符集、页面描述和视口设置。

此标签的属性包含与网页相关的所有信息。

我们可以根据信息添加一个或多个元标签，这不会影响网页文档的物理外观。

<meta> 标签接受四个属性。

Name - 用于定义属性的名称。
http-equiv - 用于获取 HTTP 响应消息标头。
Content - 用于指定属性值。
Charset - 用于指定 HTML 文件的字符编码。

语法

以下是 HTML 中 meta 标签的语法。

<meta attribute-name="value">

示例 1

以下是添加元信息并使用 <meta> 标签的不同方法 - 例如:

关键词− 该属性对应的值定义了搜索引擎的关键词。

<meta name="keywords" content="HTML, CSS, JavaScript">

字符集− 该属性对应的值定义了 character_set - HTML 文档的字符编码。

<meta charset="UTF-8">

以下是在 HTML 中使用元标签的示例，添加了关键词和字符集的元信息。



<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="keywords" content="meta tag">
</head>
<body>
   <p>In this example we have added two meta tags. For</p>
   <ol>
      <li>character_set</li>
      <li>keyword</li>
   </ol>
   <p>Meta tag contents are not visible on your browser.They are just added to give additional information about the HTML document. The mata tag is added inside the head tag</p>
</body>
</html>

以下是上述示例程序的输出。

示例 2

以下是添加元信息和使用 <meta> 标签的不同方法 - 例如:

Author- 使用以下语法添加网页的作者。

<meta name="author" content="Amit">

Description- 使用以下语法定义网页的说明。

<meta name="description" content="从文本和视频教程中学习">

以下是 HTML 中元标签的示例。



<!DOCTYPE html>
<html>
<head>
   <meta name="description" content="meta tag in HTML">
   <meta name="author" content="lokesh">
</head>
<body>
   <p>In this example we have added two meta tags. For</p>
   <ol>
      <li>description</li>
      <li>author name</li>
   </ol>
   <p>Meta tag contents are not visible on your browser. They are just added to give additional information about the HTML document. The mata tag is added inside the head tag</p>
</body>
</html>

以下是上述示例程序的输出。

示例 3

以下是 HTML 中元标记的语法。

Refresh− 对应于定义 refresh 属性的值 - 每隔指定时间(以秒为单位)刷新文档。

<meta http-equiv="refresh" content="30">

Viewport− 对应于定义 viewport 属性的值 - 布局根据设备的尺寸和功能而变化。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以下是 HTML 中元标记的示例。



<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="30">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>In this example we have added two meta tags. For</p>
   <ol>
      <li>refresh - for refreshing the page </li>
      <li>viewport - layout changes based on the size and capabilities of the device </li>
   </ol>
   <p>Meta tag contents are not visible on your browser. They are just added to give additional information about the HTML document. The mata tag is added inside the head tag</p>
</body>
</html>

以下是上述示例程序的输出。

我们可以根据信息添加一个或多个元标记，这不会影响网页文档的物理外观。

示例 4

以下是添加元信息和使用 <meta> 标记的不同方法 - 例如:

作者- 使用以下语法添加网页的作者。

<meta name="author" content="Amit">

Description- 使用以下语法定义网页的说明。

<meta name="description" content="从文本和视频教程中学习">

Keywords− 使用以下语法将关键词添加到网页。

<meta name="keyword" content="Java, WordPress, Drupal, Android, iOS">

viewport− 视口用于控制移动浏览器上的布局。它位于 <meta> 标签内，用于指示浏览器如何控制网页的尺寸和缩放比例。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以下是 HTML 中元标签的示例。


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Meta tag contents are not visible on your browser. They are just added to give additional information about the HTML document. </p>
</body>
</html>