HTML 元数据

HTML元数据

title

title 元素设置文档的标题。

浏览器通常会在浏览器窗口或选项卡的顶部显示此元素的内容。

每个HTML文档应该只有一个标题元素。

标题文本应该对用户有意义。

以下代码显示了正在使用的标题元素。

<!DOCTYPE HTML>
<html>
<head>
   <title>Example from www.sxiaw.com</title>
</head>
<body>
    <p>This is a test.</p>
    <a href="https://www.sxiaw.com">Visit  www.sxiaw.com</a>
</body>
</html>

HTML Base

base 元素为相对链接设置基本URL。

相对链接是省略URL的协议，主机和端口部分的链接并且针对一些其他URL(由基本元素或由基本元素指定的URL)进行评估用于加载当前文档的URL。

base 元素也指定如何在用户单击链接时打开链接，以及在表单提交后浏览器的行为。

base 元素有两个局部属性

  • href
  • target

HTML文档最多只能包含一个基本元素。

href属性

href 属性指定基本URL将解析文档中的相对URL。

以下代码显示了正在使用的 base 元素和 href 属性。

<!DOCTYPE HTML>
<html>
<head>
   <title>Example</title>
   <base  href="//www.sxiaw.com/listings/"/>
</head>
<body>
   <p>This is a test.</p>
   <a href="https://www.sxiaw.com">Visit www.sxiaw.com</a>
   <a href="/javascript.html">JavaScript</a>
</body>
</html>

上面的代码将基本URL设置为//www.sxiaw.com/listings/

www.sxiaw.com 是服务器的名称，和listings是服务器上的目录。

稍后在文档中，它使用相对URL创建一个超链接javascript.html

当用户单击超链接时，浏览器将组合基本URL和相对的URL来创建组合网址 //www.sxiaw.com/listings/javascript.html

如果不使用 base 元素，那么浏览器将假设它应该解析与当前文档的URL的任何相对链接。

例如，如果从中加载文档URL //www.sxiaw.com/app/mypage.html 和它包含相对网址为 myotherpage.html 的超链接，那么浏览器将尝试加载第二页从完全限定的网址 //www.sxiaw.com/app/myotherpage.html

target属性

target 属性指示浏览器如何打开网址。

您为此属性指定的值表示浏览上下文。

HTML元数据

meta 元素定义文档的元数据。

您可以以不同的方式使用此元素，并且HTML文档可以包含多个元素元素。

meta 元素有局部属性，包括 name，content，charset，http-equiv 。

charset 属性是HTML5中的新功能HTML4 scheme 属性现在已过时。

元素的每个实例只能用于这些目的之一。

名称/值元数据对

meta 元素的第一个用途是定义名称/值对中的元数据，您使用 name 和 content 属性。

以下代码使用meta元素在名称/值对中定义元数据。

<!DOCTYPE HTML>
<html>
<head>
    <meta name="author" content="www.sxiaw.com"/>
    <meta name="description"  content="A simple example"/>
</head>
<body>
    <a href="https://www.sxiaw.com">Visit  www.sxiaw.com</a>
</body>
</html>

您可以使用 name 属性来指定元素引用的元数据类型，和content属性来提供一个值。

下表列出了可以与meta元素一起使用的预定义元数据类型。

元数据名称 描述
application name 当前页面所属Web应用程序的名称
author 当前页的作者的名称
description 当前页面的描述
generator 生成HTML的软件的名称
keywords 一组用逗号分隔的字符串，用于描述内容

除了五个预定义的元数据名称之外，您还可以使用元数据扩展。请访问http://wiki.whatwg.org/wiki/MetaExtensions，查看这些扩展程序的列表。

robots 元数据类型被广泛使用。它允许HTML文档的作者指定文档应如何被搜索引擎处理。例如:

<meta name="robots" content="noindex">

大多数搜索引擎将识别的三个值是

  • noindex - 不要索引此页面
  • noarchive - 不要创建此页面的存档或缓存版本
  • nofollow - 不要追踪（即抓取）此页面的链接

HTML字符集

要正确显示HTML页面，我们必须设置字符集(字符编码)。

meta 元素的另一个用途是声明字符编码。

下面的代码中显示了一个示例。

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
    <meta name="author" content="www.sxiaw.com"/>
    <meta name="description"  content="A simple  example"/>
    <meta charset="utf-8"/>
</head>
<body>
   <p>This is a test.</p>
   <a href="https://www.sxiaw.com">Visit  www.sxiaw.com</a>
</body>
</html>

字符集设置为UTF-8编码。UTF-8是一种常见的字符编码。

字符编码

  • ASCII是第一个字符编码标准。它定义127个字母数字字符。ASCII支持的数字（0-9），英文字母（A-Z）和一些特殊字符！ $ + - （）@ <>。
  • ANSI（Windows-1252）是原始的Windows字符集。它支持256种不同的字符代码。
  • ISO-8859-1是HTML 4的默认字符集。它支持256种不同的字符代码。
  • UTF-8（Unicode）涵盖了世界上几乎所有的字符和符号。HTML5的默认字符编码为UTF-8。

HTML http-equiv

元素的最终用途是覆盖HTTP（超文本传输​​协议）头之一的值。

HTTP通常用于在服务器和浏览器之间传输HTML数据。

来自服务器的每个HTTP响应都包含一系列描述内容的标题，您可以使用 meta 元素来模拟或替换其中的三个头。

以下代码使用meta元素来模拟HTTP标头

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="refresh"  content="5"/>
</head>
<body>
    <p>This is a test</p>
    <a href="https://www.sxiaw.com">Visit  www.sxiaw.com</a>
</body>
</html>

您可以使用 http-equiv 属性指定要模拟的标题，和 content 属性以提供要使用的值。

在上面的代码中， refresh 头设置为5，它要求浏览器每五秒重新加载页面。

Jump

如果使用分号和URL跟随刷新间隔，浏览器将在间隔过去之后加载指定的URL。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh"  content="3; http://www.www.sxiaw.com"/>
</head>
<body>
   <p>This is a test.</p>
   <a href="https://www.sxiaw.com">www.sxiaw.com</a>
</body>
</html>

以下列出了 http-equiv 属性的三个允许值。

  • 属性值:refresh
    设置一个周期（以秒为单位），之后，将从服务器重新加载当前页面。您还可以指定要加载的其他URL。 例如： <meta http-equiv="refresh" content="5; https://www.www.sxiaw.com"/>
  • 属性值:default-style
    设置应该用于此页面的首选样式表。 content属性的值必须与同一文档中的脚本或链接元素上的title属性匹配。
  • 属性值:content-type
    这是一种指定HTML页面的字符编码的替代方法。例如: <meta http-equiv="content-type" content="text/html charset=UTF-8"/>


www.sxiaw.com