免费AI编程助手
HTML 元数据
HTML元数据
title
title 元素设置文档的标题。
浏览器通常会在浏览器窗口或选项卡的顶部显示此元素的内容。
每个HTML文档应该只有一个标题元素。
标题文本应该对用户有意义。
以下代码显示了正在使用的标题元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example from www.w3cschool.cn</title>
</head>
<body>
<p>This is a test.</p>
<a href="https://www.w3cschool.cn">Visit www.w3cschool.cn</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.w3cschool.cn/listings/"/>
</head>
<body>
<p>This is a test.</p>
<a href="https://www.w3cschool.cn">Visit www.w3cschool.cn</a>
<a href="/javascript.html">JavaScript</a>
</body>
</html>上面的代码将基本URL设置为//www.w3cschool.cn/listings/
www.w3cschool.cn 是服务器的名称，和listings是服务器上的目录。
稍后在文档中，它使用相对URL创建一个超链接javascript.html
当用户单击超链接时，浏览器将组合基本URL和相对的URL来创建组合网址 //www.w3cschool.cn/listings/javascript.html
如果不使用 base 元素，那么浏览器将假设它应该解析与当前文档的URL的任何相对链接。
例如，如果从中加载文档URL //www.w3cschool.cn/app/mypage.html 和它包含相对网址为 myotherpage.html 的超链接，那么浏览器将尝试加载第二页从完全限定的网址 //www.w3cschool.cn/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.w3cschool.cn"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<a href="https://www.w3cschool.cn">Visit www.w3cschool.cn</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.w3cschool.cn"/>
<meta name="description" content="A simple example"/>
<meta charset="utf-8"/>
</head>
<body>
<p>This is a test.</p>
<a href="https://www.w3cschool.cn">Visit www.w3cschool.cn</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.w3cschool.cn">Visit www.w3cschool.cn</a>
</body>
</html>您可以使用 http-equiv 属性指定要模拟的标题，和 content 属性以提供要使用的值。
在上面的代码中， refresh 头设置为5，它要求浏览器每五秒重新加载页面。
Jump
如果使用分号和URL跟随刷新间隔，浏览器将在间隔过去之后加载指定的URL。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="3; http://www.www.w3cschool.cn"/>
</head>
<body>
<p>This is a test.</p>
<a href="https://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>以下列出了 http-equiv 属性的三个允许值。
- 属性值:refresh
设置一个周期（以秒为单位），之后，将从服务器重新加载当前页面。您还可以指定要加载的其他URL。 例如：<meta http-equiv="refresh" content="5; https://www.www.w3cschool.cn"/> - 属性值:default-style
设置应该用于此页面的首选样式表。 content属性的值必须与同一文档中的脚本或链接元素上的title属性匹配。 - 属性值:content-type
这是一种指定HTML页面的字符编码的替代方法。例如:<meta http-equiv="content-type" content="text/html charset=UTF-8"/>
更多建议：