HTML元数据
title
title
元素设置文档的标题。
浏览器通常显示此元素的内容浏览器窗口或标签的顶部。
每个HTML文档应该只有一个标题元素。
标题文本应该对用户有意义。
以下代码显示了正在使用的标题元素。
<!DOCTYPE HTML> <html> <head> <title>Example from www.ancii.com</title> </head> <body> <p>This is a test.</p> <a href="https://www.ancii.com">Visit www.ancii.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="https://www.ancii.com/listings/"/> </head> <body> <p>This is a test.</p> <a href="https://www.ancii.com">Visit www.ancii.com</a> <a href="page2.html">Page 2</a> </body> </html>点击查看实例
上面的代码将基本URL设置为https://www.ancii.com/listings/。
www.ancii.com
是服务器的名称,和listings
是服务器上的目录。
稍后在文档中,它使用相对URL创建一个超链接 page2.html
。
当用户单击超链接时,浏览器将组合基本URL和相对的URL来创建组合网址 //www.w3cschool.cn/listings/page2.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.ancii.com"/> <meta name="description" content="A simple example"/> </head> <body> <a href="https://www.ancii.com">Visit www.ancii.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.ancii.com"/> <meta name="description" content="A simple example"/> <meta charset="utf-8"/> </head> <body> <p>This is a test.</p> <a href="https://www.ancii.com">Visit www.ancii.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.ancii.com">Visit www.ancii.com</a> </body> </html>点击查看实例
您可以使用 http-equiv
属性指定要模拟的标题,和 content
属性以提供要使用的值。
在上面的代码中, refresh
头设置为5,它要求浏览器每五秒重新加载页面。
Jump
如果使用分号和URL跟随刷新间隔,浏览器将在间隔过去之后加载指定的URL。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="refresh" content="3; https://www.ancii.com"/> </head> <body> <p>This is a test.</p> <a href="https://www.ancii.com">www.w3cschool.cn</a> </body> </html>点击查看实例
以下列出了 http-equiv
属性的三个允许值。
属性值:refresh设置一个周期(以秒为单位),之后,将从服务器重新加载当前页面。您还可以指定要加载的其他URL。 例如:
<meta http-equiv="refresh" content="5; https://www.ancii.com"/>
属性值:default-style设置应该用于此页面的首选样式表。 content属性的值必须与同一文档中的脚本或链接元素上的title属性匹配。
属性值:content-type这是一种指定HTML页面的字符编码的替代方法。例如:
<meta http-equiv="content-type" content="text/html charset=UTF-8"/>