【元信息标签】

最新推荐文章于 2024-01-26 19:24:31 发布

Hey_Coder

最新推荐文章于 2024-01-26 19:24:31 发布

阅读量954

点赞数

分类专栏：【HTML】

本文链接：https://blog.csdn.net/VickyTsai/article/details/89422277

版权

【HTML】专栏收录该内容

26 篇文章 11 订阅

订阅专栏

元信息标签

1. 文档信息标签
结束语

1. 文档信息标签

1.1 文档信息标签有哪些 ?

标签名	用于
① `<head>`	定义关于文档的信息。
② `<meta>`	定义关于 HTML 文档的元信息(文档数据的信息)。
③ `<base>`	定义页面中所有链接的默认地址或默认目标。
④ ~~basefont~~	已废弃。定义页面中文本的默认字体、颜色或尺寸。

1.2 ★ head 文档的头部 (所有头部元素的容器 )

文档的头部
- 如何定义文档的头部 ?
- 什么是所有头部元素的容器 ?
  - 使用 <head> 头部标签
  - 文档头部包含内容: 包含文档相关的配置信息 , 机器可读信息(元数据)，如 ❶ 标题、❷ 脚本和 ❸ 样式表。
- 使用范围:
  - 机器处理的信息: <head>元素主要保存用于机器处理的信息，而不是为了人的可读性。
  - 用户可见的标题等: 对于用户可见的信息，如顶级标题和列出的作者，参见分区头部<header>元素,通常是 header > h1~h6。
文档的头部描述了什么 ?
- 文档的各种属性和信息，包括
  - 文档的标题
  - 在 Web 中的位置
  - 和其他文档的关系等。
文档头部内容不显示:
- 绝大多数文档头部包含的数据 , 都不会作为内容显示给读者。
文档头部 <head> 标签的 6个限定子元素
- ① <base> 链接基准地址和目标标签
- ② <link>链接标签
- ③ <meta> 元信息标签
- ④ <script>脚本标签
- ⑤ <style> 文档内部样式标签
- ⑥ <title> 文档标题标签
文档头部 <head> 标签的必需子元素
- 文档标题 <title>标签 , 定义 文档的标题
  - 文档不能没有标题,这个一般能让用户清楚明了的知道内容的主题,明确知道该不该继续浏览.
文档头部 <head> 标签的位置
- 文档的开始处
- 第一个子元素: 紧跟在文档根标签 <html>的后面,第一个子元素
- 并处于<body> 文档主体标签或 <frameset> 框架集标签之前。
省略<head>头部标签对应浏览器的处理
- 自动创建: 如果在文档中忽略了 <head> 标签，则大部分浏览器会自动创建一个<head>元素。当然，有一些不会。
- 不会自动创建: 下面这些浏览器经测试不会自动创建一个 head 元素：
  - Android <=1.6, iPhone <=3.1.3, Nokia 90, Opera <=9.27, and Safari <=3.2.1。
- 不能省略: 所以,文档头部标签head,一定要写上,免得造成不必要的麻烦.

1.2.1 head 文档头部标签的可选的属性

属性名	属性值	用于
~~profile~~	=URL	已废弃. 一个由空格分隔的 URL 列表，这些 URL 包含着有关页面的元数据信息 , 配置文件的 URL.

⑴ profile 属性: 配置文件地址url (已废弃)

<head>头部标签的 profile 配置文件属性
- 配置文件地址:
  - profile 配置文件属性提供了什么信息 ?
    - 与当前文档相关联的 配置文件的 URL。
- 保留的占位符: 配置文件的格式以及浏览器使用它们的方式都还没有进行定义
  - 这个属性主要是为
    - 将来的开发而保留的占位符。

1.2.2 head 文档头部标签的 6个限定子元素

哪 6 个标签可放在 <head> 头部标签中 ?
- ① <base> 链接基准地址和目标标签
- ② <link> 链接标签
- ③ <meta> 元信息标签
- ④ <script>脚本标签
- ⑤ <style> 样式标签
- ⑥ <title> 文档标题标签

⑴ title 标签: 文档标题

⑴ head> <title>文档标题标签
一个简单的 HTML 文档，带有最基本的必需的元素：

<html>

	<head>
	  <title>文档的标题</title>
	</head>
	
	<body>
	  文档的内容... ...
	</body>

</html>

显示位置: 文档的标题,不会显示在页面中,一般显示在标题栏
为搜索引擎服务: 主要是给搜索引擎看的,告诉搜索引擎这个网页的内容重点是什么.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>标题不会显示在文档区</title>
</head>

<body>
<p>这段文本会显示出来。</p>
</body>

</html>

⑵ base 标签: 链接默认地址和打开位置 (搭配 target 属性)

⑵ head-<base>链接默认地址和打开位置标签
- 所有链接的默认地址或目标的标签
- 使用 <base> 链接默认地址和打开位置标签使页面中的所有标签在新窗口中打开。
  - base-target="_blank"

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="Content-Language" content="zh-cn" />
		
		<base target="_blank" />
	</head>
	
	<body>
	
		<p>
			<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。
		</p>
		
		<p>
			<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。
		</p>
		
	</body>
</html>

⑶ style 标签: 文档内部样式 (搭配 type 属性)

⑶ head-<style> 样式标签
使用 <head>头部标签的子元素 <style> 样式标签,给元素设置样式

<head>
	<style type="text/css">
		h1 {color: red}
		p {color: blue}
	</style>
</head>

<body>
	<h1>header 1</h1>
	<p>A paragraph.</p>
</body>

⑷ link 标签: 链接外部资源 (搭配 rel,type,href 属性)

⑷ head-<link> 链接标签
- 如何链接到一个外部样式表 ?
  - 通过 <link>链接标签

<head>
	<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
	<h1>我通过外部样式表进行格式化。</h1>
	<p>我也一样！</p>
</body>

⑸ meta 标签: 文档附加信息 (搭配 http-equiv, name, content 属性)

⑸ head-<meta>元信息标签
- 用来告诉浏览器
  - 关于 文档的附加信息
  - 使用 <meta> 元信息标签
① 如何说明文档的作者 / 文档的修订 / 文档的编辑软件 ?
- 使用 <meta> 元信息标签

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	
	<meta name="author" content="w3school.com.cn">
	
	<meta name="revised" content="David Yang,8/1/07">
	 
	<meta name="generator" content="Dreamweaver 8.0en">

</head>

<body>
	<p>本文档的 meta 属性标识了创作者和编辑软件。</p>
</body>

② 如何说明文档关键字 / 文档的描述 ?
- 使用 <meta> 元信息标签

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	
	<meta name="description" content="HTML examples">
	
	<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

</head>

<body>
	<p>本文档的 meta 属性描述了该文档和它的关键词。</p>
</body>

③ 重定向网址
- 如何在网址已经变更的情况下，将用户重定向到另外一个地址 ?
- 使用 <meta> 元信息标签

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
	对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

⑹ script 标签: 嵌入/引用脚本 (可搭配 src 属性)

⑹ head-<script>元信息标签
- 用于嵌入或引用可执行脚本。
- 脚本语句 / 外部脚本文件: script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
- MIME 类型: 必需的 type 属性规定脚本的 MIME 类型。
指向外部脚本,用 src 资源地址属性

<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">

<!-- HTML5 -->
<script src="javascript.js"></script>

文档内部脚本语句

<script type="text/javascript">
   document.write("<h1>Hello World!</h1>")
</script>

1.3 ★ meta 关于文档的元信息 (文档信息的信息)

文档元信息: (关于文档信息的信息)
- 有关页面的元信息（meta-information），比如
  - 元数据信息: <meta> 元素表示不能由其它相关元素 (<base>, <link>, <script>, <style>或 <title>) 之一表示的任何元数据信息.
  - 元数据/元信息: 关于数据的数据 (描述文档信息的信息)
<meta> 元信息标签的限定位置
- 文档头部 <head>头部标签中,作为子元素.
空标签: <meta> 元信息标签包含内容吗 ?
- 空标签,不包含任何内容。
正确关闭: <meta> 元信息标签,HTML 与 XHTML 之间的差异
- 在 HTML 中，<meta> 元信息标签没有结束标签。
- 在 XHTML 中，<meta> 元信息标签必须被正确地关闭。
<meta> 元信息的使用说明
- <meta> 提供针对搜索引擎的文档的描述和关键词
- 使用 <meta> 定义与文档相关联的名称/值对

1.3.1 meta 文档元信息标签的属性

必需属性

属性名	属性值	用于
content	=some_text	定义与 `http-equiv` 或 `name` 属性相关的元信息

可选属性

属性名	属性值	用于
① http-equiv	=content-type , expires , refresh , set-cookie	把 `content` 属性关联到 HTTP 头部。
② name	= author , description , keywords , generator , revised , others	把 `content` 属性关联到一个名称`name`。
③ scheme	=some_text	用于翻译 `content` 属性值的格式。
④ charset	MIME name	声明当前文档所使用的字符编码.

⑴ content 属性: 名称/值对中的值 (搭配 http-equiv ,name 属性)

⑴ <meta> 元信息标签的 content 内容属性
- 名称/值对中的值
  - 如何提供名称/值对中的值 ?
    - 使用 meta-content 内容属性
  - 谁的值: 此属性包含http-equiv或name属性的值，具体取决于所使用的值。
- meta-content 内容属性值
  - 任何有效的字符串
- meta-content 内容属性的使用要搭配什么属性 ?
  - 属性搭配: meta-content 内容属性必须和 meta-name名称属性或 meta-http-equiv 属性一起使用。

⑵ http-equiv 属性: 服务器传给浏览器的名称/值对的名称 (搭配 content 属性)

<meta> 元信息标签的 http-equiv 属性
- 服务器(在发送文档前先发的) 名称/值对的名称
  - http-equiv 属性为名称/值对提供了名称。
- 名称/值对: 如何让 (服务器在发送实际的文档之前先) 在要传送给浏览器的 MIME 文档头部 包含名称/值对。
  - 使用 http-equiv 超文本传输协议头部属性
  - 服务器发送的名称/值对: 当服务器向浏览器发送文档时
    - 文档发送前发送的: 会先发送许多名称/值对。
    - 为什么要先发送这些值对信息给浏览器 ?
      - 正确显示网页内容: 相当于 http 的文件头作用，可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
- meta标签的 http-equiv 属性语法格式是：
  - <metahttp-equiv="参数" content="参数变量值">；

示例1: 告诉浏览器准备接受一个 HTML 文档,并告知了文档的字符编码。

content-type:text/html。
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

使用
- 使用带有 http-equiv 属性的 <meta> 标签时
  - 服务器将把名称/值对添加到
    - 发送给浏览器的内容头部。
例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样 , 发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

★ http-equiv 属性常用范围

meta-http-equiv 服务器发送值对的属性值
- 枚举属性 ,
  - http-equiv(alent),因为所有允许的值都是特定 HTTP header 的名称:
- 向浏览器传递信息: 相当于 http 的文件头作用，可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
- 搭配属性: 与之对应的属性为content，content 中的内容其实就是各个参数的变量值。
- 这个编译值使用 content来定义,，如下：

① 内容安全策略: content-security-policy

★ 内容安全策略: meta-http-quiv="content-security-policy"
- 定义当前页的内容策略。
- 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击

② 首选/默认样式表: default-style

★ 首选/默认样式表: meta-http-quiv="default-style"
- 指定了在页面上使用的首选样式表.
  - <meta http-equiv="default-style" content="the document's preferred stylesheet">
- 上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。

③ 到期时间: expires ( gmt 时间格式)

到期时间: expires (期限)
- 设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
用法：<metahttp-equiv="expires" content="Fri,12Jan200118:18:18GMT">
时间格式：必须使用 GMT的时间格式。
- 世界时钟
- GMT 时间格式

④ 无法离线浏览 (无缓存): pragma

无法离线浏览: pragma(cache模式)
- 禁止浏览器从本地计算机的缓存中访问页面内容。
- 用法：<metahttp-equiv="pragma" content="no-cache"> 无缓存.
  - 美 /p’ræɡmə/
- 注意：这样设定，访问者将无法脱机/离线浏览。

⑤ 刷新时间间隔和重定向链接和时间间隔: refresh

★ 重新载入和重定向: meta-http-quiv="refresh"
- 重新载入(刷新)时间: 如果搭配的content内容值属性只包含一个正整数,则是重新载入页面的时间间隔(秒);
- 重定向到指定链接和时间间隔: 如果content包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)
  - <metahttp-equiv="refresh" content="2;URL=http://www.jb51.net">
  - 格式: <meta http-equiv="refresh" content="时间;url=网址参数">
- 值 “refresh” 应该慎重使用，因为它会使得页面不受用户控制。

⑥ 窗口打开位置: window-target

window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
- <metahttp-equiv="window-target" content="_top">
- 用来防止别人在框架里调用自己的页面。

⑦ 请求和响应的缓存机制: cache-control

缓存机制: cache-control指定请求和响应遵循的缓存机制。
- 在请求消息或响应消息中设置cache-control, 并不会修改另一个消息处理过程中的缓存处理过程。
- 请求时的缓存指令: 包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached
- 响应消息中的指令: 包括 public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。指令含义, 如下
  - public
    - 指示响应 可被任何缓存区缓存
  - private
    - 指示对于单个用户的整个或部分响应消息，不能被共享缓存 处理。
    - 这允许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其他用户的请求无效 .
  - no-cache
    - 指示请求或响应消息 不能缓存
  - no-store
    - 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都 不使用缓存。
  - max-age
    - 指示客户机可以接收生存期 不大于指定时间（以秒为单位）的响应
  - min-fresh
    - 指示客户机可以接收响应时间小于当前时间加上指定时间的响应
  - max-stale
    - 指示客户机可以接收 超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

⑧ 图片工具栏的显示: imagetoolbar

http-equiv="imagetoolbar"
- <metahttp-equiv="imagetoolbar" content="false"/>
指定是否显示图片工具栏，当为false 代表不显示，当为 true 代表显示。

⑨ 文档的脚本类型 : content-script-type

content-script-type
- <meta http-equiv="content-script-type" content="text/JavaScript">
- W3C 网页规范，指明页面中脚本的类型。

⑩ 设置缓存: set-cookie (已废弃,用 HTTP 的 Set-Cookie 头部)

~~设置缓存~~: meta-http-quiv="set-cookie" 已过时
- 为页面定义cookie。其内容必须遵循 IETF HTTP Cookie 规范中定义的语法。
- 如果网页过期，那么存盘的 cookie 将被删除。
  - 用法：<metahttp-equiv="Set-Cookie" content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
  - 注意：必须使用GMT的时间格式。
- Note: 警告：请勿使用此说明，因为它已过时。请改用 HTTP 的 Set-Cookie 头部。

⑪ 文档默认语言: content-language (已废弃,html 标签的 lang 属性替代)

~~文档默认语言~~: meta-http-quiv="content-language"已过时
- 这个指令定义页面使用的默认语言.
- 使用方式: 不要使用这个指令，因为它已经过时了。
- 替代标签: 使用<html>元素上全局的语言 lang 属性来替代它.

⑫ 文档 MIME type: content-type (已废弃, 用 charset 属性替代)

~~文档的 MIME type~~: meta-http-quiv="content-type" ,已过时
- 这个属性定义了文档的 MIME type , 实际上由它的字符编码决定。
- 属性搭配: http-quiv,content,charset
- 它遵循与 HTTPcontent-type头部字段相同的语法，但由于它位于 HTML 页面内，因此除了text /html之外的大多数值都不能使用。因此，其content的有效语法是字符串'text /html'
  - 废弃原因: 只有 HTML 文档可以使用content-type，所以大部分内容都是多余的:这就是为什么它被废弃并被charset属性替换的原因。
- 替代属性:
  - 后跟一个具有以下语法的字符集：’; charset=IANAcharset，其中IANAcharset是 IANA 定义的字符集的首选MIME名称。
  - 一般是 charset="utf-8"
- 总结: 不要使用 , 因为它已过时。使用<meta>元素的charset属性代替,定义meta-charset字符编码就可以了,不用定义 http-quiv="content-type,content"多此一举.

⑬ ★ IE 浏览器 (解析网页时) 使用的文档模式: X-UA-Compatible

点击查看【meta 标签的 http-equiv=“X-UA-Compatible” 使用说明】

⑶ name 属性: 元数据的名称 (搭配 content 属性)

<meta> 元信息标签的 name 名称属性
- 元数据的名称
  - 如何提供名称/值对中的名称 ?
    - 使用 meta-name名称属性
  - name的特殊语义: 全局属性 name在 <meta>元素中具有特殊的语义；
    - 该属性定义文档级元数据的名称。
  - 冲突的 4个属性,不能同时使用:
    - 如果以下其中一个属性设置了itemprop, http-equiv or charset ，就不能设置这个属性了。
    - 同理，在同一个 <meta>标签中，name, http-equiv或者 charset三者中任何一个属性存在时，itemprop 属性不能被使用。
- HTML 和 XHTML 标签 , 都没有指定meta-name名称属性的属性值
  - 没有任何预先定义的 name名称属性的属性值
- name名称属性的属性值怎么写 ?
  - 可以自由使用对自己和源文档的读者来说富有意义的名称,就是 meta-name名称属性的属性值。
- 如何为文档定义一组关键字。
  - 使用 name="keywords"
  - 关键字有什么作用 ?
    - (某些搜索引擎在遇到这些关键字时) 会用这些关键字对文档进行分类(分类文档)。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 meta-name 属性 , 名称/值对中的名称会采用什么呢 ?
- meta-http-equiv http 头部属性的值。
<meta>元信息标签中的 值对的搭配使用
- 搭配属性: meta-content 内容属性,作为: 值
- meta- name 名称属性和 meta-http-equiv http 头部信息作为: 名称,和 content 在一起搭配使用.

★ 元数据的名称 name 的常用值

meta-name的属性值
- 元数据名称 meta-name与content属性包含的值相关联。name属性的可能值为：

① (文档上运行的) 应用名称: application-name

( 在该网页上运行的) 应用名称: meta-name="application-name";
- 区分应用: 浏览器可能会通过使用该属性去区分应用
- 通常由应用程序名称组成，但也可能包含特定的信息，如文档名称或状态;
- 简单的网页不应该去定义application-name 属性值的 meta 标签。

② 文档作者名称: author

文档作者名称: meta-name="author";
- 这个文档的作者名称，可以用自由的格式去定义；
- w3school的作者名称:
  - <meta name="author" content="w3school.com.cn" />

③ 文档内容的描述: description

页面内容的描述: meta-name="description";
- 其中包含页面内容的简短和精确的描述。
- 用作书签默认描述: 一些浏览器，如 Firefox 和Opera，将其用作书签页面的默认描述。
- 淘宝网的文档内容描述:
  - <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />

④ 生成文档的编辑器: generator

生成文档的编辑器: meta-name="generator";
- 包含生成页面的软件的标识符。

⑤ 文档内容的关键词: keywords

文档内容的关键词: meta-name="keywords";
- 逗号分隔的页面内容相关的关键单词。
- 例如,淘宝网的关键词:
  - <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

⑥HTTP Referer 首部的内容: referrer (实验中属性值,不要使用)

!!! HTTP Referer 首部的内容: meta-name="referrer";实验中的属性值,暂时不要使用
- 控制所有从该文档发出的 HTTP 请求中 HTTP Referer 首部的内容：

⑦ 创建者名称: creator (可以是机构名称)

创建者的名称: meta-name="creator";
- 以自由格式定义文档创建者的名称。
- 注意，它可以是机构的名称。如果有多个，应该使用几个<meta>元素

⑧ 谷歌索引爬虫: googlebot

谷歌索引爬虫: meta-name="googlebot";
- 这是机器人的同义词，但后面只有 Googlebot，谷歌的索引爬虫 crawler ['krɔlɚ];

⑨ 发布者名称: publisher (可以是机构名称)

⑨ 发布者的名称: meta-name="publisher";
- 以自由格式定义文档发布者的名称。注意，它可以是 机构的名称.

⑩ 爬虫程序行为: robots

爬虫程序行为: meta-name="robots";
定义协作爬虫程序应该具有的页面行为。
- 它是一个以逗号分隔的列表，其中的值取自以下列表:
<meta name="robots">搭配的 content的属性值

属性值	描述	用于
index	允许索引. 允许爬虫索引页面	All
noindex	阻止索引. 阻止爬虫索引页面	All
follow	允许跟踪链接. 允许爬虫跟踪页面上的链接	All
nofollow	阻止跟踪 . 阻止爬虫跟踪页面上的链接	All
noodp	防止使用打开目录项目描述(如果有的话) 作为搜索引擎结果页面中的页面描述	Google, Yahoo, Bing
noarchive	防止缓存(存档). 防止搜索引擎缓存页面的内容	Google, Yahoo
nosnippet	防止在搜索引擎结果页中显示页面的任何描述	Google
noimageindex	防止该页作为索引图像的引用页出现	Google
noydir	防止使用 Yahoo目录描述(如果有的话)作为搜索引擎结果页面中的页面描述	Yahoo
nocache	防止缓存(存档). 和 noarchive 同义	Bing

⑪ 爬虫程序行为: slurp (仅用于Yahoo Search )

同上一个爬虫程序行为: meta-name="slurp";
- 与robots一样，但其仅使用于 Slurp -- Yahoo Search 的抓取工具。
- slurp ,美 /slɜːrp/

⑫ 窗口宽高和缩放比例: viewport

窗口宽高和缩放比例: meta-name="viewport";
- 它提供有关 窗口初始大小的提示，仅供移动设备使用。
- <meta name="viewport">搭配的content属性值

Value	可能值	描述
① width	一个正整数或者字符串 device-width	宽度: 以 pixels（像素）为单位，定义viewport（视口）的宽度。
② height	一个正整数或者字符串 device-height	高度: 以 pixels（像素）为单位，定义viewport（视口）的高度。
③ initial-scale	一个 0.0 到10.0之间的正数	缩放比例: 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的初始缩放比率。
④ maximum-scale	一个 0.0 到10.0之间的正数	最大缩放比例: 定义缩放的最大值；它必须大于或等于`minimum-scale`的值，不然会导致不确定的行为发生。
⑤ minimum-scale	一个 0.0 到10.0之间的正数	最小缩放比例: 定义缩放的最小值；它必须小于或等于`maximum-scale`的值，不然会导致不确定的行为发生。
⑥ user-scalable	一个布尔值（yes 或者no）	用户手动缩放: 如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。

缩放和使用: 通过将user-scalable设置为no来 禁用缩放 功能，会妨碍视力低下的人阅读和理解页面内容。

示例1: MDN 网站使用的窗口, 机器人爬虫
- 宽度: 设备宽度;
  - 设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率为1;
- 允许爬虫索引页面, 允许爬虫跟踪页面上的链接

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="index, follow">

在这里插入图片描述

⑷ scheme 属性: 解释 content 内容值的方案 (已废弃)

⑷ <meta> 元信息标签的 scheme 方案属性[已过时]
- scheme
  - [skim]
  - 计划,方案
- 解释content内容值的方案
  - 如何指定方案 ?
    - 使用 meta-scheme方案属性
- 此方案
  - 如何指定用来翻译属性值的方案 ?
    - 使用 meta-scheme方案属性
    - 此属性定义描述元数据的方案。方案是正确解释content内容值(如格式)的内容
  - meta-scheme方案属性的方案的定义在哪里 ?
    - 由 <head> 头部标签的 profile配置文件属性指定,成为配置文件,或概况文件.
      - head的这个配置文件属性也已经废弃了.
  - 使用说明:
    - 不要使用: 不要使用这个属性，因为它已经过时了。它没有替代品，因为它没有真正的用途。完全忽略它。

⑸ charset 属性: 文档的字符编码 (一定要设置,推荐 utf-8 属性值)

⑸ <meta> 元信息标签的 charset 字符编码属性
- 文档字符编码和覆盖:
  - 声明当前文档所使用的字符编码.
- meta-charset的属性值:
  - 字符编码名称: 此特性的值必须是一个符合由 IANA 所定义的字符编码首选 MIME 名称（preferred MIME name ）之一。
    - IANA: 互联网地址编码分配机构（Internet Assigned Numbers Authority）
- 字符编码使用说明: 尽管标准不要求必须使用某些特定的字符编码，但它还是给出了一些建议：
  - ❶ utf-8: 鼓励使用 UTF-8；
    - utf-8 为万国码支持所有语言字符
  - ❷ 不能使用和安全风险:
    - 不应该使用不兼容ASCII 的编码规范，以避免不必要的安全风险
      - 浏览器不支持他们 (这些不规范的编码)可能会导致浏览器渲染 html 出错. 比如JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB,ISO-2022 系列,EBCDIC系列等文字
  - ❸ 必须禁用和跨站脚本攻击:
    - 开发者必须禁用 CESU-8, UTF-7, BOCU-1或 SCSU这些字符集，因为这些字符集已经被证实存在跨站脚本攻击（XSS）的风险。
  - ❹ 避免使用:
    - 发者应尽量避免使用 UTF-32 字符集对网页进行编码，因为不是所有的 HTML5 编码算法, 能够将其与 UTF-16 编码区分开来。
  - ❺ 声明和保存相匹配:
    - 文档内声明的字符编码 , 必须与页面保存时所使用的编码相匹配，以避免乱码和安全漏洞.
  - ❻ <meta> 元素的位置:
    - <meta> 元素必须包含在 <head>元素中 ,并且在HTML代码的前 1024 个字节内，因为某些浏览器在选择编码之前只查看前面这些字节。
    - 尽量靠前: 所以,文档的字符编码越早定义越好,位置尽量靠前.
  - ❼ 优先级:
    - <meta>元素只是确定字符集的算法中的一部分。
    - HTTP的Content-Type头部以及任何 Byte-Order Marks元素都优先于此元素。
  - ❽ 定义字符集的必要性和网页脚本风险: 强烈建议使用该 meta-charset 字符集属性定义字符编码.
    - 如果未定义，某些跨脚本技术可能危害网页，如 UTF-7 fallback cross-scripting technique. 保持设置该属性以避免类似风险。
  - ❾ 另一种定义方式:
    - <meta>元素的charset属性和以下 HTML5 内容 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">等效
    - 其中, 在 content属性值中定义字符编码, IANAcharset = charset的属性值。
  - 后者的语法仍然是允许的，但是不再推荐。
涉及的常用字符编码
- ① gb2312，采用的编码是 简体中文；
- ② big5，采用的编码是 繁体中文；港澳台使用.
- ③ iso-2022-jp，采用的编码是日文；
- ④ ks_c_5601，采用的编码是韩文；
- ⑤ iso-8859-1，采用的编码是英文；
- ⑥ ★ utf-8，世界通用 的语言编码； (推荐使用的字符编码)
  - 包含全世界所有国家需要用到的字符
    - 强烈推荐 utf-8字符编码,可以很有效的预防,因为字符编码设置不同,而出现字符乱码的情况.
    - 不设置 charset属性,也很可能出现乱码的情况,所以这个属性,一定要设置,而且,最好设置为 charset="utf-8", 最大限度避免出现乱码.
  - 淘宝网,MDN, 用的都是这个字符编码:<meta charset="utf-8" />
- ⑦ gbk : gb2312一般是简体中文,gbk 在简体中文的范围上 扩展了繁体中文.适合香港台湾.
  - w3school 用是这个编码: <meta charset="gbk" />

总结: 元数据的种类
根据<meta>的不同属性，元数据的类型可以是以下类型之一:
- 整个页面: meta-name:
  - 如果设置了name，则它是文档级元数据，应用于整个页面。
- 如何服务页面: meta-http-equiv
  - 如果设置了http-equiv，它就是一个指令——通常由 web服务器提供关于如何服务 web 页面的信息。(发送文档前,传送给浏览器参考的值对,更精确显示网页)
- 字符编码: meta-charset
  - 如果设置了charset字符集，则它是一个字符集声明—网页使用的字符编码。
- 用户元数据: meta-itemprop(实验中的属性,不能工作中使用)
  - 如果设置了itemprop，则它是用户定义的元数据——对于用户代理来说是透明的，因为元数据的语义是特定于用户的.

示例1: <meta> 元数据标签的使用

<!-- 定义HTML4中的字符集 Defining the charset in HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- 在 HTML5 中定义字符集,更简洁 In HTML5 -->
<meta charset="utf-8">

<!-- 3秒后重定向页面 Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

问题:重定向有些不利于有视力问题的人
- 使用refresh 值设置的页面存在时间间隔过短的风险。使用辅助技术(如屏幕阅读器)导航的人可能无法在自动重定向之前阅读和理解页面内容。
- 突然的、未经宣布的页面内容更新也可能让视力低下的人感到困惑。

1.4 ★ base 指定所有链接的基础地址或打开位置 (搭配 href,target 属性)

指定所有链接的默认地址或打开位置
- 如何为页面上的所有链接规定默认地址或默认打开位置 ?
  - 使用<base>基准url或目标标签
    - 基本 url: HTML <base> 元素用于文档中包含的所有 相对url 的基本url。
    - 所有相对 URL 的根 UR
    - 仅限一个: 一个文档中只能有一个<base>元素。
      - 选择第一个: 如果使用多个<base>元素，则只遵从第一个 href 和第一个打开位置target —其他所有元素都被忽略。
    - 查询: 一个文档的基本 URL, 可以通过使用 document.baseURI的 JS 脚本查询。
    - 限定父元素: 任何不带有任何其他 <base>元素的 <head>元素
让浏览器使用指定的基本 URL, 来解析所有的相对 URL
- 使用 <base> 基准url 或打开位置标签
- 影响到的标签
  - ① <a>链接href
  - ② <img>图片 src
  - ③ <link>链接 href
  - ④ <form> 标签中的 URL。
- 不影响: Open Graph 标记不识别<base>，并且应该始终具有完整的绝对url。
  - og: Open Graph, 例如:
    - <meta property="og:image" content="https://example.com/thumbnail.jpg">
使用说明
- 限定位置: <base> 基准url 或目标标签必须位于什么位置 ?
  - 文档头部 <head> 元素的内部。
正确关闭: <base> 基准url 或打开位置标签 , HTML 与 XHTML 之间的差异
- 在 HTML 中，<base> 基准url 或目标标签没有结束标签；
- 在 XHTML 中，<base>基准url 或目标标签必须被正确地关闭。

1.4.1 base 基础 url 或打开位置标签的属性

必需的属性

属性名	属性值	用于
href	= URL	规定页面中所有相对链接的基准 URL。

可选的属性

属性名	属性值	用于
target	=_blank , _parent , _self , _top , framename	链接打开位置在何处打开页面中所有的链接。

把基准url ,规定为 url=http://www.w3school.com.cn/i/
- base-href=url

示例1: 把链接打开的目标位置,规定为新窗口中打开
- base-target="_blank"
- 淘宝网使用的就是这个,在新窗口中打开链接 <base target="_blank" />,作为 head 的最后一个元素.

<head>
	<base href="http://www.w3school.com.cn/i/" />
	<base target="_blank" />
</head>

<body>
	<img src="eg_smile.gif" /><br />
	<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
	<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
	
	<br /><br />
	<p><a href="http://www.w3school.com.cn">W3School</a></p>
	<p>请注意，链接会在 新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>

</body>

url 添加: 自动把基础url,添加到相对url上.

⑴ href 属性: 所有链接的基础 url (必需属性)

⑴ <base> 基准url 或目标标签的 href 超链接属性
- 链接的基础 url
  - 如何规定页面中所有相对链接的基准 URL 为绝对 url ?
    - 使用 base-href 超链接属性
      - abbr. 超文本引用（hypertext reference）；
    - 基础 url: 用于文档中相对 URL 地址的基础 URL。
    - 位置: 如果指定了该属性，这个元素必须写在其他任何属性值是 URL 的元素之前。允许绝对和相对URL.
    - 使用优先: 如果指定了多个<base>元素，只会使用第一个 href 和 target 值, 其余都会被忽略。
- <base> 基准url 或目标打开位置标签的 href 超链接属性的属性值
  - URL
    - 作为基准 URL 的绝对 URL
    - （比如 “http://www.example.com/”）。
特别: <meta>标签不承认基本url，并应始终有完整的 url。例如:

<meta property='og:image' content='http://example.com/thumbnail.jpg'>

⑵ target 属性: 所有链接的打开位置

⑵ <base> 基准 url 或目标标签的 target 目标打开位置属性
用于
- 如何规定在何处打开页面上的所有链接 ?
  - 使用 target 目标位置属性
  - 默认显示位置: 指定显示结果的默认位置
  - 位置: 如果指定了此属性，则此元素必须位于具有值为 url 的属性的任何其他元素之前。

target目标属性的属性值

属性值	用于
_blank	在新窗口中打开被链接文档。
_self	默认值。在相同的框架中 ,打开被链接文档。
_parent	在父框架集中打开被链接文档。如果没有父选项，则此选项的行为与`_self`相同。
_top	在整个窗口中打开被链接文档。(覆盖当前的窗口)加载到顶级框架中,没有父元素的祖先的位置.如果没有父选项，则此选项的行为与`_self`相同。
framename	在指定的框架中打开被链接文档。

示例1: 为页面上所有相对 URL 规定基准 URL：
为页面上所有链接规定默认目标打开位置：

<head>
	<base href="http://www.w3school.com.cn/i/" />
	<base target="_blank" />
</head>

<body>
	<img src="eg_smile.gif" /><br />
	<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
	<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
</body>

示例2: Anchor tags <a>和<base>的搭配使用
例如，给定这个基本URL:
- <base href="http://www.example.com/">
- … 和这个<a>标签:
  - <a href="#anchor">Anker</a>
- … 链接指向:
  - http://www.example.com/#anchor
  - 自动添加: 自动给a-href添加上基本url

示例3: 指定显示位置和基础url

<base href="http://www.example.com/">
<base target="_blank" href="http://www.example.com/">

可以分开指定href,target,也可以在一个<base>中指定两个属性

1.5 ★ basefont 设置默认文本颜色,字体和字体大小 (已废弃)

基础文本颜色,字体和字体大小
- 使用<basefont>基准字体标签 [已废弃]
  - 基本字体 : (<basefont>)为其父元素派生的其他元素设置 默认字体、大小和颜色。
  - 有了这个设置，就可以使用字体<font>元素来更改字体的大小，使之相对于基本大小有所不同。
已过时不要使用: 这个特性已经过时了。
- 尽管它在一些浏览器中仍然可以工作，但它的使用是不被鼓励的，因为它可以随时被删除。尽量避免使用它。
  - 不要再使用这个标签！尽管在HTML 3.2中曾经（不严格地）标准化，但是它并不被主流的浏览器所支持。
    - 而且，不同的浏览器、甚至同一浏览器的相邻版本，都没有使用相同的实现方式；实际上，使用这个标签总是导致不确定的结果。
- 从HTML 4起，HTML 不再传递样式信息（除<style>元素和所有元素的style属性内容外）。
替代的 css: 应该使用 CSS 属性
- (如font, font-family, font-size, ,color)来更改元素内容的字体配置。
basefont 标签的浏览器支持
- 只有 IE 支持 <basefont>基准字体标签。
- 应该避免使用该标签,浏览器基本上都不支持这个标签了.
已废弃: HTML 与 XHTML 之间的差异
- 在 HTML 4.01 中，不赞成使用 basefont 元素；
- 在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素。

1.5.1 basefont 标签可选的属性

属性名	属性值	用于
color	rgb(x,x,x) , #xxxxxx , colorname	不赞成使用。请使用样式取代它。规定文档中的默认文本颜色。
face	font_family	不赞成使用。请使用样式取代它。规定文档中的默认字体。
size	number	不赞成使用。请使用样式取代它。规定文档中的默认字体大小。使用数值或者相对值。数值值域为1～7，1最小，默认值为3。

示例1: 规定页面上的默认字体颜色和字号：

<head>
	<basefont color="red" size="5" />
</head>

<body>
	<h1>This is a header</h1>
	<p>This is a paragraph</p>
</body>

在这里插入图片描述

结束语

捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团表示鼓励和支持吧~❤
捐助二维码:

参考文档
- W3School 教程
- MDN HTML 教程
感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

转载请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/89422277
- 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【元信息标签】

元信息标签

1. 文档信息标签

1.1 文档信息标签 有哪些 ?

1.2 ★ head 文档的 头部 (所有 头部元素的 容器 )

1.2.1 head 文档头部 标签的 可选的属性

⑴ profile 属性: 配置文件 地址url (已废弃)

1.2.2 head 文档头部 标签的 6个 限定子元素

⑴ title 标签: 文档标题

⑵ base 标签: 链接 默认地址 和 打开位置 (搭配 target 属性)

⑶ style 标签: 文档 内部样式 (搭配 type 属性)

⑷ link 标签: 链接 外部资源 (搭配 rel,type,href 属性)

⑸ meta 标签: 文档 附加信息 (搭配 http-equiv, name, content 属性)

⑹ script 标签: 嵌入/引用 脚本 (可搭配 src 属性)

1.3 ★ meta 关于文档的 元信息 (文档信息的 信息)

1.3.1 meta 文档元信息 标签 的属性

⑴ content 属性: 名称/值对 中的 值 (搭配 http-equiv ,name 属性)

⑵ http-equiv 属性: 服务器 传给浏览器的 名称/值 对 的名称 (搭配 content 属性)

★ http-equiv 属性 常用范围

① 内容 安全策略: content-security-policy

② 首选/默认 样式表: default-style

③ 到期时间: expires ( gmt 时间格式)

④ 无法 离线浏览 (无缓存): pragma

⑤ 刷新时间 间隔 和 重定向链接和时间间隔: refresh

⑥ 窗口 打开位置: window-target

⑦ 请求和响应的 缓存机制: cache-control

⑧ 图片工具栏的 显示: imagetoolbar

⑨ 文档的 脚本类型 : content-script-type

⑩ 设置 缓存: set-cookie (已废弃,用 HTTP 的 Set-Cookie 头部)

⑪ 文档 默认语言: content-language (已废弃,html 标签的 lang 属性 替代)

⑫ 文档 MIME type: content-type (已废弃, 用 charset 属性 替代)

⑬ ★ IE 浏览器 (解析网页时) 使用的文档模式: X-UA-Compatible

⑶ name 属性: 元数据的 名称 (搭配 content 属性)

★ 元数据的 名称 name 的 常用值

① (文档上 运行的) 应用名称: application-name

② 文档 作者名称: author

③ 文档内容的 描述: description

④ 生成文档的 编辑器: generator

⑤ 文档内容的 关键词: keywords

⑥HTTP Referer 首部的内容: referrer (实验中 属性值,不要使用)

⑦ 创建者 名称: creator (可以是 机构名称)

⑧ 谷歌 索引爬虫: googlebot

⑨ 发布者名称: publisher (可以是 机构名称)

⑩ 爬虫程序 行为: robots

⑪ 爬虫程序行为: slurp (仅用于Yahoo Search )

⑫ 窗口宽高 和缩放比例: viewport

⑷ scheme 属性: 解释 content 内容值的 方案 (已废弃)

⑸ charset 属性: 文档的 字符编码 (一定要设置,推荐 utf-8 属性值)

1.4 ★ base 指定 所有链接的 基础地址 或 打开位置 (搭配 href,target 属性)

1.4.1 base 基础 url 或 打开位置 标签 的属性

⑴ href 属性: 所有链接的 基础 url (必需 属性)

⑵ target 属性: 所有链接的 打开位置

1.5 ★ basefont 设置 默认 文本颜色,字体和字体大小 (已废弃)

1.5.1 basefont 标签 可选的属性

结束语

1.1 文档信息标签有哪些 ?

1.2 ★ head 文档的头部 (所有头部元素的容器 )

1.2.1 head 文档头部标签的可选的属性

⑴ profile 属性: 配置文件地址url (已废弃)

1.2.2 head 文档头部标签的 6个限定子元素

⑵ base 标签: 链接默认地址和打开位置 (搭配 target 属性)

⑶ style 标签: 文档内部样式 (搭配 type 属性)

⑷ link 标签: 链接外部资源 (搭配 rel,type,href 属性)

⑸ meta 标签: 文档附加信息 (搭配 http-equiv, name, content 属性)

⑹ script 标签: 嵌入/引用脚本 (可搭配 src 属性)

1.3 ★ meta 关于文档的元信息 (文档信息的信息)

1.3.1 meta 文档元信息标签的属性

⑴ content 属性: 名称/值对中的值 (搭配 http-equiv ,name 属性)

⑵ http-equiv 属性: 服务器传给浏览器的名称/值对的名称 (搭配 content 属性)

★ http-equiv 属性常用范围

① 内容安全策略: content-security-policy

② 首选/默认样式表: default-style

④ 无法离线浏览 (无缓存): pragma

⑤ 刷新时间间隔和重定向链接和时间间隔: refresh

⑥ 窗口打开位置: window-target

⑦ 请求和响应的缓存机制: cache-control

⑧ 图片工具栏的显示: imagetoolbar

⑨ 文档的脚本类型 : content-script-type

⑩ 设置缓存: set-cookie (已废弃,用 HTTP 的 Set-Cookie 头部)

⑪ 文档默认语言: content-language (已废弃,html 标签的 lang 属性替代)

⑫ 文档 MIME type: content-type (已废弃, 用 charset 属性替代)

⑶ name 属性: 元数据的名称 (搭配 content 属性)

★ 元数据的名称 name 的常用值

① (文档上运行的) 应用名称: application-name

② 文档作者名称: author

③ 文档内容的描述: description

④ 生成文档的编辑器: generator

⑤ 文档内容的关键词: keywords

⑥HTTP Referer 首部的内容: referrer (实验中属性值,不要使用)

⑦ 创建者名称: creator (可以是机构名称)

⑧ 谷歌索引爬虫: googlebot

⑨ 发布者名称: publisher (可以是机构名称)

⑩ 爬虫程序行为: robots

⑫ 窗口宽高和缩放比例: viewport

⑷ scheme 属性: 解释 content 内容值的方案 (已废弃)

⑸ charset 属性: 文档的字符编码 (一定要设置,推荐 utf-8 属性值)

1.4 ★ base 指定所有链接的基础地址或打开位置 (搭配 href,target 属性)

1.4.1 base 基础 url 或打开位置标签的属性

⑴ href 属性: 所有链接的基础 url (必需属性)

⑵ target 属性: 所有链接的打开位置

1.5 ★ basefont 设置默认文本颜色,字体和字体大小 (已废弃)

1.5.1 basefont 标签可选的属性