HTML5 Metadata content（文档元数据）

最新推荐文章于 2022-02-27 16:57:22 发布

耳东蜗牛

最新推荐文章于 2022-02-27 16:57:22 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.csdn.net/it_rod/article/details/78323996

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Metadata content（文档元数据）

1. base

指定用于一个文档中包含的所有相对URL的基本URL。一个文档中只能有一个base元素起作用。如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值, 其余都会被忽略。

HTML5不能有结束标签。XHTML需要在结尾添加斜杠<base />。

一个base元素（如果它有一个href属性）必须在树中的任何其他元素之前定义为使用URL定义的属性，除了html元素（其manifest属性不受base 元素影响）。

base元素必须具有一个href 属性，target属性，或两者。如果二者都没有是不符合html5的标准的。

href

用于文档中相对 URL 地址的基础 URL。如果指定了该属性，这个元素必须写在其他任何属性值是 URL 的元素之前。允许绝对和相对URL（但是请查看下面的注意节段）。

<html>
<head>
<base target="_blank" href="/Content/themes/base/images/" <meta="" charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Base</title>
</head>
<body>
<span>
<!--相对 base href的路径-->
<img src="customer/bg.bmp">
<!--相对项目根目录-->
<img src="/Content/themes/base/images/customer/bg.bmp">
<!--绝对路径-->
<img src="192.168.232.148/Content/themes/base/images/customer/bg.bmp" <="" span="">
</span>
</body>
</html>

* html5中的base标签可以帮助你快速的定义页面的相对路径，你不需要在链接或者图片地址中添加冗长的url地址，而简单的使用图片名称或者文件名称即可，但是注意不是任何情况下都适用，如果你的页面没有在一个统一的资源路径下管理的话，最好不要去使用

target

为没有显示target引用属性的元素指定一个名字或关键字，当元素的超链接或导致导航的形式被激活时，指定显示结果的默认位置。在HTML4中，其值是一个框的名字或者在关键字。在HTML5中，其值是一个浏览上下文（例如标签页，窗口或者内联框）的名字或者关键字。以下的关键字指定特殊的意思：

_self: 载入结果到当前的HTML4框（或者HTML5的浏览上下文）。如果没有指定该属性，那该值是元素的默认值属性值。
_blank: 载入结果到一个新的未命名HTML4窗口，或者一个新的HTML5的浏览上下文。

下面的两个主要和iframe相关
_parent: 对于HTML4，载入结果到当前框的父级框；对于HTML5，载入结果到父级浏览上下文。如果没有父级结构，该选项的行为和_self一样。
_top: 在HTML4中，载入结果到全部原始窗口，并且取消其他所有框。在HTML5中，载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。

2. link

HTML 中<link>元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。

<link rel="stylesheet" type="text/css" href="theme.css" />

2.1 charset

该属性定义了被链接资源的字符编码. 默认值为 iso-8859-1.
使用注意: 该属性已废弃并不能再被使用. 要达到同样的效果, 在被链接资源的 HTTP 头中设置相应的 Content-Type.

2.2 crossorigin

该枚举属性指定在加载相关图片时是否必须使用 CORS. 启用 CORS 的图片可以在 <canvas> 元素中使用, 并避免其被污染. 可取的值如下:

"anonymous"

会发起一个跨域请求(即包含 Origin: HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 这张图片就会被污染并限制使用.

"use-credentials"

会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 Origin: HTTP 头). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 这张图片就会被污染并限制使用.

普通的img对于跨域访问是完全支持的，这是一种在internet网络上需找资源的过程，如果我们将img加上了crossorigin属性，img访问会失败。

2.3 disabled

该属性被用于禁用链接关系. 配合脚本使用, 该属性可以用来启用或禁用多个样式表链接.

虽然在 HTML 标准中没有 disabled 属性（firefox不支持）但在 HTMLLinkElement DOM 对象中确实存在 disabled 属性.
使用 disabled 作为 HTML 属性是非标准的, 并且只有部分浏览器使用, 不要使用. 要达到类似的效果, 可以选用以下方法:

如果 disabled 属性已经直接加入到页面元素中, 可以改为不引入这个 <link> 元素;
通过脚本为该样式表 DOM 对象设置 disabled 属性.

<link href="~/Content/Site.css" type="text/css" rel="stylesheet" disabled/>
$("[href='/Content/Site.css']")[0].disabled = true

除了chorme不会加载diabled的css文件，其他的都会加载对应的文件。

2.4 href

该属性指定被链接资源的URL. URL 可以是绝对的或相对的.

2.5 hreflang

该属性指明了被链接资源的语言. 其意义仅供参考，咨询作用. 仅当设置了 href 属性时才应设置该属性.
<link href="tag_link.asp" rel="parent" rev="subsection" hreflang="en" />

2.6 integrity

它是一个用浏览器获取的资源文件的哈希值,以base64编码的方式加的密,这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改

Subresource Integrity：子资源完整性(SRI)是允许浏览器检查其获得的资源（例如从 CDN 获得的）是否被篡改的一项安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

浏览器根据以下步骤处理 SRI：
当浏览器在 <script> 或者 <link> 标签中遇到 integrity 属性之后，会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。
当脚本或者样式表的哈希值和期望的不一致时，浏览器必须拒绝执行脚本或者应用样式表，并且必须返回一个网络错误说明获得脚本或样式表失败。

2.7 media

这个属性指定了连接资源提供的媒体类型。它的值一定得是一个媒体查询。这个属性在允许浏览器为设备选择最合适的连接样式表时比较有作用。

一个媒体查询由一个可选的媒体类型(example: TV)和零个或多个使用媒体功能(example: min-width: 700px)的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

语法：
媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

注意：当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false，<link> 标签指向的样式表也将会被下载(但是它们不会被应用)

逻辑运算符

and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。
not操作符用来对一条媒体查询的结果进行取反。
only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。
逗号表达式，只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。
*若使用了not或only操作符，必须明确指定一个媒体类型。

and

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。
一个基本的媒体查询，即一个媒体属性与默认指定的all媒体类型，可能像这样子：

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

如果只想在横屏时应用这个，可以使用 and 操作符合并媒体属性：

<link href="~/Content/Site.css" type="text/css" rel="stylesheet" media="(min-width: 700px) and (orientation: landscape)" />

上面这行代码的意义在于：当width>hight,并且width >= 700px的情况下才会应用当前的css。

具体的版本信息以及属性值请参照： html5 media

逗号分隔列表

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

@media (min-width: 700px), handheld and (orientation: landscape)

not

not关键字应用于整个媒体查询，在媒体查询为假时返回真。分为两种情况。
逗号表达式中使用not：在逗号媒体查询列表中not仅会否定它应用到的媒体查询上而不影响其它的媒体查询

@media not screen and (color), print and (color) =》 @media (not (screen and (color))), print and (color)

非逗号表达式运用not

@media not all and (monochrome) =》 @media not (all and (monochrome))

only

only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

2.8 rel

这个属性表明了链接的文档对于当前文档的关系。这个属性一定得是一个由空格分开的链接类型值的列表. 这个属性最通常的用法是指向一个连接到外部样式表的链接：将rel的值设置为stylesheet，href属性设置为外部样式表的URL来构造网页。

rel 属性规定当前文档与被链接文档/资源之间的关系。
只有当使用 href 属性时，才能使用 rel 属性。

2.8.1 alternate

alternate关键字可以与被使用link， a和area元件。此关键字的含义取决于其他属性的值。

(1) 如果是<link>元素，并且rel属性包括stylesheet, 则这个link定义为alternate样式表;那样的话 title 属性不能为空.
link的alternate定义了一个可替换的样式表，它和第一个link元素同时使用，第一个定义了首选样式，而alternate则让用户可选择替换的样式。替换操作可以使用之前提到的disabled属性来操作。

在这里，一组link元素提供了一些样式表：

<！ - 首选样式表 - >
<link rel =“stylesheet”href =“green.css”title =“绿色样式”>

<！ - 一些备用样式表 - >
<link rel =“alternate stylesheet”href =“contrast.css”title =“High contrast”>
<link rel =“alternate stylesheet”href =“big.css”title =“Big fonts”>
<link rel =“alternate stylesheet”href =“wide.css”title =“Wide screen”>

加载的时候所有的文件都会加载

(2) 如果type设置为application/rss+xml或application/atom+xml，则链接定义syndication feed.
先来了解这个Syndicating content with RSS。这个主要是和订阅相关的，最直观的例子就是订阅博客。

Rss 与 Feed 的概念区别
Feed：消息来源（英文：web feed、news feed、syndicated feed）是一种资料格式，网站透过它将最新资讯传播给用户。用户能够订阅网站的先决条件是，网站提供了消息来源。消息来源受到网志及新闻网站的广泛采用，这类型的网站经常更新内容。消息来源又译为源料、馈送、资讯提供、供稿、摘要、源、新闻订阅、网源。

RSS（简易信息聚合）：是一种消息来源格式规范，用以发布经常更新数据的网站，例如博客文章、新闻、音频或视频的网摘。RSS文件（或称做摘要、网络摘要、或频更新，提供到频道）包含了全文或是节录的文字，再加上发用者所订阅之网摘布数据和授权的元数据。网络摘要能够使发行者自动地发布他们的数据，同时也使读者能更够定期更新他们喜欢的网站或是聚合不同网站的网摘。RSS摘要可以借由RSS阅读器、feed reader或是aggregator等网页或以桌面为架构的软件来阅读。

具体的RSS教程 http://www.runoob.com/rss/rss-publishing.html，然后在asp.net mvc上可以直接生成rssfeed。
这边只是了解一下有样的功能。

(3) 如果alternate关键字与hreflang属性一起使用，并且该属性的值与文档元素的语言不同，则表示所引用的文档是翻译

例如你拥有一个网站，这个网站同时拥有英语和西班牙语两个版本，英语的版本是
http://www.example.com/
西班牙的url是
http://es.example.com/

这个时候你就需要把上面提到的那一行代码，放到www.example.com上，也就是英文版的网站head当中，告诉搜索引擎我还有一个西班牙语的版本，并且告诉搜索引擎他的地址是什么。

反之亦然，同样可以在西班牙语的网站上加上英语版本的url。

(4) 其它情况link定义为alternate页面:
另一种介质,例如手持设备(如果设置了 media 属性),
另一种格式, 例如PDF (如果设置了type 属性)

2.8.2 stylesheet

文档的外部样式表。

2.8.3 author

定义一个超链接到一个描述作者信息的页面或者提供一个方法联系作者。
Note: 这个方法可能是mailto:邮箱链接, 但不推荐这样，这样可能导致机器人发送大量的垃圾邮件到这个邮箱. 这种情况下，最好带一个包含联系方法的页面.。
在<a>, <area> or<link> 标签的rev属性上，虽然能够识别 made，但并不正确，应该用rel 属性替换.

在google搜索中，可以在搜索的网址后面加上文章的作者个人信息（google profile），参考

2.8.4 icon

快捷方式小图标

<link href="~/Images/icon.jpg" rel="icon" type="image/x-icon" />

然后保存为书签，然后看一下书签的小图标就是我们使用的图片。

Note: 苹果iOS不支持此链接类型, 也不支持 sizes属性, 就像其他移动端浏览器一样，为了Web Clip或者启动点位符选择一个页面图标。分别可使用不是标准方法的apple-touch-icon 和apple-touch-startup-image 替代.在之前，经常可以看到shortcut,但他不是标准的，应该不再使用。

2.8.5 help

表明这个链接，链接到一个关于整个页面的进一步帮助资源.

<link rel="help" href="http://www.aaaa.net/help.html" />

2.8.6 manifest

表示链接到的文件是 Web App Manifest.

2.8.7 pingback

<link rel="pingback" href="https://example.com/xmlrpc.php">

应用wordpress.

2.8.8 search

<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

2.8.9 canonical

<link rel="canonical" href="http://blog.csdn.net/websites/"/>

一般推荐使用绝对地址，因为使用canonical目的就是为规范链接，所以采用绝对地址是最妥当的，但是要注意的是：不能跨域名指向，也就是不能指向不同的域名，这点要谨记。

Canonical标签是做什么用的？
canonical标签就是告诉搜索引擎哪个页面是权威页面。以我的理解，Canonical标签大致的作用如下。
　　第一，使用Canonical标签使网址规范化。
　　第二，避免内容重复页面，搜索引擎收录更准确。
　　第三，集中传递页面权重。
　　Canonical链接标签只能作用于同一个域名所在的网址，不能作用于不同域名上的重复内容。如果是跨站，可以使用301重定向。
　　网址不规范，会降低页面权重，是因为搜索引擎会认为页面内容有重复。做法是将这些不规范的网址，指向同一个页面。
　　后两个页面的内容会被搜索引擎认为是重复内容，就是告知搜索引擎把相关的搜索信号都传递到第一个网址。
　　这样任何含有这个标签的网页，不管它最终的URL是什么，搜索引擎最终都会只收录 canonical标签指定的那个页面。
　　这样做的好处是避免多个URL的存在，分散了页面权重，更加利于排名。

用好canonical标签，下面几点也是需要认识的。
　　第一，该链接标签可用于定义相对地址，也可用于定义绝对地址。但为了保险起见，建议使用绝对地址。
　　第二，如果使用了canonical链接标签的页面在整个网站中并无重复内容的页面，也无需担心，该标签暂时会被搜索引擎“束之高阁”。
　　第三，该链接具有可传递性。假如你在网址A中将网址B指定为首选地址，而在网址B中又将网址C指定为首选地址，那么搜索引擎会认为网址C才是A和B的首选页面。这种情况有时候在网址重定向中会发生。
　　第四，一个网页链向了有canonical标签的页面，会被当作像301转向到这一页的canonical页。
　　第五，一个页面可以用rel=canonical指向自己，一个网站的所有页面可以都有rel=canonical。在使用rel=canonical完全不用担心，只用在使用时指对了页面。
当然canonical不是万能的，对于大型重复页面出现的商城，例如淘宝，京东这些，要解决完美的url规范都不是那么容易的。

2.8.10 start next prev 属性值

next -- 记录文档的下一页.(浏览器可以提前加载此页)
prev -- 记录文档的上一页.(定义浏览器的后退键)
start -- 通知搜索引擎,文档的开始

这个值应该是给浏览器搜索引擎看的。

3. meta

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

3.1 属性content（必须属性）

此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称（preferred MIME name ）之一。尽管标准不要求必须使用某些特定的字符编码，
content 属性始终要和 name 属性或 http-equiv 属性一起使用。

鼓励使用 UTF-8；
不应该使用不兼容ASCII的编码规范
绝对不能使用CESU-8、UTF-7、BOCU-1以及SCSU这一类编码，由于这些编码而引起的跨站脚本攻击已经被记录在案。
不应该使用 UTF-31，因为不是所有的 HTML5 编码算法都能将它与 UTF-16 区分开来。

3.2 http-equiv（可选）

属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

3.3 name 属性(可选)

提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

3.4 scheme

属性用于指定要用来翻译属性值的方案，具体的用法也不用查看，在mdn上标注不要使用这个属性

4. noscript

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则HTML <noscript>元素定义要插入的html部分。

<noscript>
  <!-- anchor linking to external file -->
  <a href="http://www.mozilla.com/">External Link</a>
</noscript>
<p>Rocks!</p>

5. template

简介

是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。
可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。
虽然, 在加载页面的同时,解析器确实处理 <template>元素的内容，这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染。

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 现有数据可以可选地包括在这里 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

特性

标签内容隐藏性：自身特性，自身内有设置隐藏属性。
标签位置任意性：类似<script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中。
childNodes无效性： template.childNodes是一个空的数组，如果我们想访问的话就需要使用下面的属性content

属性content

只读的 content 属性，通过它可以读取模板内容。一般来说，可以通过判断 content 属性是否存在来判断浏览器是否支持 <template> 元素。
// 使用现有的HTML tbody实例化表和该行与模板

let t = document.querySelector('#productrow'),
td = t.content.querySelectorAll("td");

6. style & script & title

这个就不用介绍了