脑袋里是什么？HTML中的元数据

最新推荐文章于 2022-11-20 12:00:00 发布

淋风沐雨

最新推荐文章于 2022-11-20 12:00:00 发布

阅读量372

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_50414588/article/details/109259541

版权

笔记专栏收录该内容

177 篇文章 7 订阅

订阅专栏

这个头HTML文档是网页加载时未在网页浏览器中显示的部分。它包含诸如页面之类的信息。，链接到CSS(如果选择使用CSS对HTML内容进行样式设置)、指向自定义图标和其他元数据的链接(关于HTML的数据，例如作者，以及描述文档的重要关键字)。在本文中，我们将介绍上述所有内容以及更多内容，以便为您处理标记提供一个良好的基础。

先决条件：
基本的HTML熟悉性，如开始使用HTML.
目标：
要了解HTML头，它的用途，它可以包含的最重要的项目，以及它能对HTML文档产生什么影响。
HTML头是什么？
让我们重温一下简单的我们在上一篇文章中介绍的HTML文档:

<！DOCTYPE html>

<头> <元字符集="乌特夫-8"> <标题>我的测试页面

<头>
<元字符集=“乌特夫-8”>
<标题>我的测试页面</标题>
</头>
然而，在较大的页面中，头部会变得相当满。尝试访问一些您最喜欢的网站，并使用开发工具看看他们的头像。我们在这里的目的不是向你展示如何使用所有可能被放入头脑中的东西，而是教你如何使用你想要包含在头脑中的主要元素，并给你一些熟悉。我们开始吧。

添加标题
我们已经看到元素的作用–这可以用于向文档添加标题。但是，这可能会与<h1>元素，用于向正文内容中添加顶级标题–有时也称为页面标题。但它们是不同的东西！</h1>

这个

元素在浏览器中加载时显示在页面上–通常每页使用一次，以标记页面内容的标题(故事标题或新闻标题，或任何适合您使用的内容)。
这个元素是表示整个HTML文档(而不是文档内容)标题的元数据。<br/> 主动学习：检查一个简单的例子<br/> 为了开始这一积极的学习，我们希望您到我们的GitHub回购网站下载一份我们的标题-example.html页面。去做这件事<br/> 将代码从页面复制并粘贴到代码编辑器中的新文本文件中，然后将其保存在合理的位置。<br/> 按GitHub页面上的“原始”按钮，这会导致原始代码出现(可能在一个新的浏览器选项卡中)。接下来，选择浏览器的文件>将页面保存为…。菜单并选择一个保存文件的合理位置。<br/> 现在在浏览器中打开文件。你应该看到这样的东西：<br/> 现在应该完全清楚地看到<h1>内容出现，以及<title>内容出现！

您还应该尝试在代码编辑器中打开代码，编辑这些元素的内容，然后在浏览器中刷新页面。玩得开心点。
这个元素内容也以其他方式使用。例如，如果您尝试对页面进行书签(书签>此页的书签或者Firefox中URL栏中的星型图标)，您将看到<title>作为建议的书签名称填写的内容。

这个内容也用于搜索结果，如下所示。

元数据：元素
元数据是描述数据的数据，而HTML有一种将元数据添加到文档中的“官方”方法-元素。当然，我们在本文中讨论的其他内容也可以被认为是非元数据。有很多不同类型的可以包含在页面的中的元素，但是在这个阶段我们不会尝试解释它们，因为它会变得太混乱。相反，我们将解释一些你可能经常看到的东西，只是为了给你一个想法。

指定文档的字符编码
在上面看到的示例中，包括了这一行：

<元字符集=“乌特夫-8”>
此元素仅指定文档的字符编码–文档允许使用的字符集。乌特夫-8是一个通用字符集，它包含了几乎任何人类语言中的任何字符。这意味着您的网页将能够处理显示任何语言；因此，这是一个好主意，设置在每个网页您创建！例如，您的页面可以很好地处理英语和日语：

如果将字符编码设置为ISO-8859-1例如(拉丁字母的字符集)，您的页面呈现可能会出现所有混乱：

注：有些浏览器(比如Chrome)会自动修复不正确的编码，因此根据您使用的浏览器的不同，您可能不会看到这个问题。您仍然应该将编码设置为乌特夫-8为了避免其他浏览器中的任何潜在问题，您的页面无论如何都要进行调整。

主动学习：字符编码实验
要尝试这一点，请重新访问在上一节中获得的简单HTML模板。()标题-example.html页面)，尝试将元字符集值更改为ISO-8859-1，并将日语添加到您的页面中。这是我们使用的代码：

日本的例子：ご飯が熱い。

添加作者和描述许多元素包括名字和含量属性：

名字指定元元素的类型；它包含的信息类型。
含量指定实际的元内容。
包含在页面中的两个这样的元元素定义了页面的作者，并提供了页面的简明描述。让我们看一个例子：

<元名字=“作者” 含量=“克里斯·米尔斯”>
<元名字=“描述” 含量=“MDNWebDocs学习领域的目标是为网络的初学者提供他们需要知道的一切，以开始开发网站和应用程序。”>
指定一个作者在很多方面都是有益的：如果你对内容有任何疑问，并且想联系他们，了解谁写的页面是很有用的。一些内容管理系统具有自动提取页面作者信息并将其用于此类目的的功能。

指定包含与页面内容相关的关键字的描述是有用的，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高(这些活动称为搜索引擎优化，或SEO.)

主动学习：描述在搜索引擎中的应用
该描述也用于搜索引擎结果页。让我们通过一个练习来探索这个

去Mozilla开发人员网络首页.
查看页面的源(右/克特+单击页面，选择视图页源)
找到描述元标签。它看起来像这样(尽管它可能随着时间的推移而改变)：
<元名字=“描述” 含量=“MDNWebDocsSiten提供了有关OpenWeb技术的信息，包括Web站点和n个渐进Web应用程序的HTML、CSS和API。”>
现在，在您最喜欢的搜索引擎中搜索“MDNWebDocs”(我们使用了Google)。你会注意到描述和元素内容使用在搜索结果-绝对值得拥有！

注：在Google中，您将看到主主页链接下面列出的MDN Web Docs的一些相关子页面–它们称为sitelinks，可配置在谷歌网站管理员工具-使你的网站的搜索结果更好地在谷歌搜索引擎。

注*许多功能不再被使用了。例如，关键字元素(<元名称=“关键字”内容=“填写，在，你的，关键字，这里”>)–它应该为搜索引擎提供关键词，以确定该页面对于不同搜索词的相关性–被搜索引擎忽略了，因为垃圾邮件发送者只是用数百个关键字填充关键字列表，偏倚结果。

其他类型的元数据
当你在网上旅行时，你也会发现其他类型的元数据。你会在网站上看到的很多功能都是专有的创造，旨在为特定网站(如社交网站)提供他们可以使用的特定信息。

例如,开放图数据是Facebook发明的一种元数据协议，目的是为网站提供更丰富的元数据。在MDN Web Docs源代码中，您会发现以下内容：

<元财产=“Og：图像” 含量=“Https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png”>
<元财产=“描述” 含量=“MozillaDeveloperNetwork(MDN)为两个Web站点NANDHTML 5应用程序提供了有关开放Web技术(包括HTML、CSS和API)的nInformation信息。它还记录了Mozilla产品，比如Firefox OS。”>
<元财产=“OG：标题” 含量=“Mozilla开发人员网络”>
这样做的一个效果是，当您链接到Facebook上的MDN Web Docs时，该链接将与图像和描述一起出现：这是用户更丰富的体验。

Twitter也有自己类似的专有元数据，名为推特卡，当站点的URL显示在twitter.com上时，会产生类似的效果。例如：

<元名字=“Twitter：标题” 含量=“Mozilla开发人员网络”>
向站点添加自定义图标
为了进一步丰富网站设计，您可以在元数据中添加对自定义图标的引用，这些图标将在特定上下文中显示。其中最常用的是偏袒(缩写为“收藏夹图标”，指其在浏览器中的“收藏夹”或“书签”列表中的使用)。

这位卑微的宠儿已经存在多年了。它是这种类型的第一个图标：在多个地方使用的16像素方形图标。您可能会看到(取决于浏览器)在Browser选项卡中显示的图标，其中包含每个打开的页面，以及书签面板中的书签页面旁边。

可以通过以下方式将偏袒图标添加到您的页面中：

将其保存在与站点索引页相同的目录中，保存在.ico格式(大多数浏览器将支持更常见格式的图标，如.gif或.png，但使用ICO格式将确保它可以追溯到InternetExplorer 6。)
将以下一行添加到HTML中<头>块以引用它：
<链接雷尔=“快捷图标” href=“Favicon.ico” 类型=“图像/x图标”>
下面是书签面板中的一个图标示例：

现在还有很多其他的图标类型需要考虑。例如，您可以在MDN Web Docs主页的源代码中找到这一点：

<！
<链接雷尔=“苹果-触控图标-预制件” 尺寸=“144x144” href=“Https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png”>
<！！–具有高分辨率Retina显示器的iPhone：->
<链接雷尔=“苹果-触控图标-预制件” 尺寸=“114 x 114” href=“Https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png”>
<！–第一代和第二代iPad：–>
<链接雷尔=“苹果-触控图标-预制件” 尺寸=“72x72” href=“Https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png”>
<！–非Retina iPhone、iPodTouch和Android2.1+设备：->
<链接雷尔=“苹果-触控图标-预制件” href=“Https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png”>
<！-基本偏袒->
<链接雷尔=“快捷图标” href=“Https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png”>
这些评论解释了每个图标是用来做什么的–这些元素涵盖了一些东西，比如当网站被保存到iPad的主屏幕上时，可以提供一个很好的高分辨率图标来使用。

现在不要太担心实现所有这些类型的图标–这是一个相当高级的特性，您不需要了解这一点才能在课程中取得进展。这里的主要目的是让你知道这些东西是什么，以防你在浏览其他网站的源代码时碰到它们。

注：如果您的网站使用内容安全策略(CSP)来增强其安全性，则该策略将应用于偏好图标。如果在未加载的情况下遇到问题，请验证内容-安全-策略标头IMG-src指令并不是阻止他们进入。

CSS和JavaScript在HTML中的应用
几乎所有你在现代使用的网站都会使用CSS让他们看起来很酷，而且JavaScript增强交互功能，如视频播放器、地图、游戏等等。最常用的方法是使用元素和

这个元素应该始终位于文档的头部。这需要两个属性，Rel=“样式表”，这表明它是文档的样式表，并且href，它包含样式表文件的路径：

<链接雷尔=“样式表” href=“My-css-file.css”>
这个

<剧本 SRC=“My-js-file.js” 推迟></剧本>
注*

主动学习：将CSS和JavaScript应用于页面
要开始主动学习，请获取我们的Meta-example.html, Script.js和Style.css文件，并将它们保存在同一目录下的本地计算机上。确保用正确的名称和文件扩展名保存它们。
在浏览器和文本编辑器中打开HTML文件。
通过遵循上面提供的信息，添加和

JavaScript向页面添加了一个空列表。现在，当您单击列表上的任何位置时，会弹出一个对话框，要求您为新的列表项输入一些文本。按“确定”按钮时，将向包含文本的列表中添加新的列表项。单击现有列表项时，将弹出一个对话框，允许您更改项目的文本。
CSS使背景变绿，文本变得更大。它还对JavaScript添加到页面中的一些内容进行了样式化(带有黑色边框的红色栏是CSS添加到JS生成列表中的样式)。
注：如果您被困在这个练习中，无法让CSS/JS应用，请尝试查看我们的Css-and-js.html示例页。

设置文档的主要语言
最后，值得一提的是，您可以(而且确实应该)设置页面的语言。这可以通过添加朗属性指向开头的HTML标记(如Meta-example.html如下所示)

您还可以将文档的子部分设置为不同的语言。例如，我们可以将日语部分设置为日语，如下所示：

日本的例子：<跨距朗="佳">ご飯が熱い。

摘要
这标志着我们对HTML Head的快速浏览的结束–在这里您可以做更多的事情，但是在这个阶段，一次详尽的访问将是令人厌烦和困惑的，我们只想给您一个概念，您现在可以在那里找到最常见的东西！在下一篇文章中，我们将介绍HTML文本的基本原理。