目录导航

元数据标签用于设置文档的剩余内容的显示方式或行为。元数据标签还可用于设置文档与其他文档的关系。使用元数据标签来提供有关HTML文档的其他信息。
以下是元数据标签的列表:

  • title
  • base
  • link
  • command
  • meta
  • script
  • noscript
  • style

下面让我们来学习上述所有元数据标签。

1. HTML title标签

title标记包含显示在Web浏览器标题栏中的HTML文档的标题。 搜索引擎使用此标签来选择文档并将其显示在搜索结果中。 每个HEAD标签应包含一个title标签。

注意 - 请记住使标题文本简短,因为某些浏览器可能会难以处理超过256个字符的标题。

示例
以下代码片段显示了HTML文档中title标记的用法:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>这是网页的标题</title>    
</head>
<body>
</body>
</html>

下面是使用HTML标题标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程(网页标题)</title>    
</head>
<body>
    <h2>HTML元数据示例</h2>        
    <p>Hello, Welcome to xntutor.com</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML title标签属性

下表中列出了title标记的属性:

属性 描述
id 指定唯一的字母数字标识符。
class 指定HTML文档中标签的类。
style 指定内联样式以在文档中呈现标签。
lang 指定标签使用的语言

2. HTML base标签

base标记用于为HTML文档中的所有链接指定默认URL和目标。此标记出现在文档的HEAD标记内,应用作HEAD标记中的第一个标记。 这使<head>中的其他标签可以使用BASE标签的信息。

示例
以下代码片段显示了HTML文档中BASE标记的用法:

<!doctype html>
<html>
<head>
    <base href="url" target="value"/>
</head>
</html>

下面是使用HTML base标记的示例:

<!DOCTYPE html>
<html>
<head>
    <title>HTML base标签示例</title>
    <base href="http://www.xntutor.com/" />
</head>
<body>
    <img src="/uploads/logo/2019/11/04/213626_63023.png" alt="color pic" width="125" height="125" />
    <a href="/html/metadata-elements.html">HTML元数据标签教程</a> 
</body>
</html>

如果将基本URL更改为其他名称,例如,如果基本URL为http://www.xntutor.com/,则图像和第二个链接将变为:http://www.xntutor.com/uploads/logo/2019/11/04/213626_63023.pnghttp://www.xntutor.com/html/html-metadata-elements.html

在浏览器中打开上面代码文件,显示结果如下:

HTML base标记属性

下表描述了base标签的属性:

属性 描述
href 指定HTML文档中的URL
target 指定打开HTML文档链接的位置。target属性有四个值:_blank,_parent,_self,_top和指定文件名称

link标签用于将HTML文档链接到其他HTML文档。 它还定义了两个不同的HTML文档之间的关系。 link标签包含href属性,以指定链接的目标URL。 href属性是必填属性,必须具有有效的URL。 link标签还包含rel属性,该属性定义链接文档的关系。

示例
以下代码片段显示了link标签的用法:

<head>
    <link href="filename.html" rel="stylesheet">
</head>

下面是使用HTML link标记的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>HTML元数据示例</h2>        
    <p>Hello, Welcome to xntutor.com</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML link标记属性
下表描述了link标记的属性:

属性 描述
href URL 指定单击链接后导航到的目标URL
hreflang 语言代码 定义目标URL的基本语言
media screen, tty, tv, projection, handheld, print, braille, aural, all 指定在其上显示HTML文档的设备。
rel alternate, archives, author, first, feed, icon, help, index, license, last, next, pingback, prev, prefetch, search, stylesheet, sidebar, tag, up 指定HTML文档和目标URL或另一个HTML文档之间的关系。
type mime_type例如 :text/javascripttext/css 指定目标URL的多用途Internet主要扩展(MIME)类型。 MIME类型决定HTML页面(例如JavaScript或CSS)应遵循的语言规则类型。
sizes 任何数字 定义链接的HTML文档的大小

4. HTML command标签

command标记是HTML5中引入的新标记,当表单控件(例如单选按钮或复选框)触发事件时,可用于执行命令。 可以将command标记与上下文菜单或工具栏一起使用。
以下HTML代码片段显示了command标记的用法:

<MENU label="Cars">
    <command type="radio" radiogroup="cars" label="大众">
    <command type="radio" radiogroup="cars" label="丰田">
    <command type="radio" radiogroup="cars" label="奔驰">
</MENU>

HTML command标记属性

下表列出了command标记的属性和描述:

属性 描述
type command (默认), checkbox, radio 指定命令类型
label 指定文本 指定要在HTML页面上显示的命令的名称
icon URL 指定要显示为HTML页面图标的图像的位置
disabled [空字符串],disabled 指定一个值,该值指示是否禁用命令
checked [空字符串],checked 指定一个值,以指示是否选择了命令
radiogroup 指定文本 指定一个字符串值,该字符串值表示type属性以radio为值的命令组的名称。
title 指定文本 指定命令的标题

5. HTML script标签

script标记用于声明脚本,例如HTML文档中的JavaScript。 script标记包含脚本声明或通过src属性指向外部脚本文件的指针。可以使用script标记来验证Web表单以及处理这些表单上显示的内容和图像。script标记具有以下五个属性:

  • async
  • type
  • charset
  • defer
  • src

如果async属性的值为true,则脚本异步执行。在这种情况下,脚本在文档解析时执行。 并且,如果async属性的值为false,而defer属性的值为true,则在文档分析完成后执行脚本。如果asyncdefer属性的值为false,则立即执行脚本,并且HTML页面在继续解析之前等待脚本完成执行。

以下HTML代码片段显示了如何在HTML文档中使用script标记:

<head>
    <script type="text/javascript">
        // javascript 代码
    </script>
</head>

下面是使用HTML script标签的示例:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Metadata标签示例</title>
    <script type="text/javascript">
        function myFunction()
        {
            alert("HTML Metadata标记教程!");
        }
    </script>
</head>
<body>
    <input type="button" onclick="myFunction();" name="button_test" value="确定"  />
</body>
</html>

上述HTML script标记示例的输出如下:
HTML script标签

当单击确定按钮时,它将在浏览器中显示以下内容:
HTML script标签2

HTML script标记属性
下表描述了script标记的属性:

属性 描述
async truefalse 指定脚本是否应该异步执行
type text/ecmascript,text/javascript,application/ecmascript 指定脚本的MIME类型
charset charset 指定脚本中使用的字符编码
defer truefalse 指定浏览器是否可以继续解析HTML文档
src URL 指定包含脚本的文件的URL

6. HTML noscript标签

noscript标记用于在不支持JavaScript或禁用JavaScript的Web浏览器上显示替代内容。 并且,如果Web浏览器启用或支持JavaScript,则不会考虑使用noscript标签。

以下HTML代码片段显示了noscript标记的用法:

<script type="text/javascript">
    document.write("使用Javascript乱写了一行内容.")
</script>
<noscript>
    您的浏览器已禁用或不支持JavaScript(noscript做这个用的)。
</noscript>

7. HTML style标签

HTML style标记用于在HTML文档中声明样式表。该标签指定如何在浏览器中呈现HTML标签。style标记具有以下三个属性:

  • type
  • media
  • scoped

以下HTML代码片段演示了style标记的用法:

<head>
    <style type="text/css">
        // Style code here
    </style>
</head>

下面是使用HTML style标签的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <style type="text/css">
        .class_a
        {
            background-color: blue;
            padding-left: 12px;
            padding-right: 10px;
            color: white;
            font-size: 16px;
        }

        .class_b
        {
            padding-top: 12px;
            padding-bottom: 10px;
            color: #333333;
            font-size: 16px;
            border: 2px solid #eee;
        }

    </style>
</head>
<body>
    <h2>HTML元数据示例</h2>        
    <p class="class_a">Hello, HTML元数据 style 标签示例(class_a)</p>
    <p class="class_b">Hello, HTML元数据 style 标签示例</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML style标签

可以使用HTML style属性更<h1><h2>标签的颜色。示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>
    <style type="text/css">

        .class_p
        {
            padding-top: 12px;
            padding-bottom: 10px;
            padding-left: 24px;
            color: #333333;
            font-size: 16px;
            border: 2px solid #eee;
        }

    </style>
</head>
<body>
    <h2 style="color:blue;font-size:18px;">HTML元数据示例</h2>            
    <p>在这里您将找到并学习在HTML中所有可用的元数据标签。</p>
    <h2 style="color:green;">HTML Metadata Tags Example</h2>
    <p class="class_p">在这里您将找到并学习在HTML中所有可用的元数据标签。</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML style标签

注意:要了解级联样式表的工作方式,请参阅CSS教程

HTML style标记属性
下表描述了style标记的属性:

属性 描述
type text/css 指定内容的类型,例如:HTML文档中的简单文本或样式表
media screen, tty, tv, projection, handheld, print, braille, aural, all 指定显示样式的目标媒体
scoped scoped 指定样式标签,即父标签及其子标签

8. HTML元数据标签示例

下面是scriptnoscript标签的示例:

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML元数据标签教程</title>
    <script type="text/javascript">
        document.write("HTML元数据标签示例");
    </script>
</head>
<body>

<noscript>
    此浏览器禁用或不支持Javascript。
</noscript>

</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML元数据标签示例