<meta> | HTML元数据标签的定义与用法

由 hcduguo

定义与用法

  • <meta>标签用于指定HTML文档相关的元数据。它定义了页面描述，关键字，版权，语言，文档作者等；
  • 元数据不会显示在网页上，但搜索引擎、浏览器或其他Web服务通过扫描元数据来了解网站或网页。
  • <meta> 标签永远位于 head 元素内部。

语法格式

１、< meta charset = “ utf-8” >

它定义了字符编码。charset的值为“ utf-8”，表示它将支持显示所有语言。

2、< meta name = “ keywords” content = “ HTML，CSS，JavaScript，教程” >

它指定给搜索引擎使用的关键字列表。

3、< meta name = “ description” content = “免费在线教程” >

它定义了网站描述，可用于提供由搜索引擎执行的相关搜索。

4、< meta name = “ author” content = “ 作者” >

它指定页面的作者，通过内容管理系统自动提取作者信息很有用。

5、< meta name = “refresh” content = “ 50” >

它指定浏览器以每50秒（或任何给定时间）自动刷新内容。

6、< meta http-equiv = “refresh” content = “ 5; url = https://www.runoon.com/tags” >

在上面的示例中，我们设置了指向url，页面将在指定的时间后自动重定向到给定的页面。

7、< meta name = “ viewport” content = “width=device-width, initial-scale=1.0” >

它指定了通过窗口大小来控制页面尺寸和缩放比例，让网站在所有设备都可以浏览，如果看到此标记，则表明此页面支持移动设备。

示例代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="keywords" content="HTML，CSS，JavaScript，免费教程">  
    <meta name="description" content="免费在线教程">  
    <meta name="author" content="作者">  
    <meta http-equiv="refresh" content="5; url=https://www.runoon.com/tags">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
</head>  
<body>  
<h2>Meta标签示例</h2>  
<p>以上展示了META标签的使用方式，因为META元素内容，不在浏览页面展示，因此我们无法看到展示效果。</p>  
</body>  
</html>

HTML 4.01 与 HTML5差异

HTML5 不支持 scheme 属性。

在 HTML5 中，有一个新的 charset 属性，它使字符集的定义更加容易：

  • HTML 4.01： <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • HTML5： <meta charset=”UTF-8″>

HTML 与 XHTML 之间的差异

  • 在 HTML 中 <meta> 标签没有结束标签。
  • 在 XHTML 中 <meta> 标签必须包含结束标签。

浏览器支持

所有浏览器都支持 <meta> 标签。

标签属性

: HTML5新属性。

属性值描述
charsetcharacter_set定义文档的字符编码。
contenttext定义与 http-equiv 或 name 属性相关的元信息。
http-equivcontent-type
default-style
refresh		把 content 属性关联到 HTTP 头部。
nameapplication-name
author
description
generator
keywords		把 content 属性关联到一个名称。
schemeformat/URIHTML5不支持。 定义用于翻译 content 属性值的格式。

全局属性

<meta> 标签支持所有 HTML全局属性。

事件属性

<meta> 标签支持所有 HTML事件属性。

相关