其他类型的元数据

周洋硕 · 发表于 2021-4-17 17:23:40

当您在网络上旅行时，也会发现其他类型的元数据。您将在网站上看到的许多功能都是专有作品，旨在为某些网站（例如社交网站）提供可以使用的特定信息。

例如，Open Graph Data是Facebook发明的一种元数据协议，旨在为网站提供更丰富的元数据。在MDN Web文档源代码中，您将找到以下代码：

这样的效果是，当您链接到facebook上的MDN Web Docs时，该链接会与图像和说明一起显示：为用户带来更丰富的体验。

Twitter还具有自己类似的专有元数据，称为Twitter Cards，当在URL.com上显示站点的URL时，其具有类似的效果。例如：

为了进一步丰富您的网站设计，您可以在元数据中添加对自定义图标的引用，这些图标将在某些上下文中显示。其中最常用的是favicon（“收藏夹图标”的缩写，指的是它在浏览器的“收藏夹”或“书签”列表中的使用）。

不起眼的图标已经存在很多年了。这是该类型的第一个图标：在多个地方使用的16像素正方形图标。您可能会在浏览器选项卡中看到（取决于浏览器）显示的图标，这些图标包含每个打开的页面，并且在书签面板中的书签页面旁边。

可以通过以下方式将收藏夹图标添加到您的页面：

将其保存在与网站索引页相同的目录中，并以.ico格式保存（大多数浏览器将以更常见的格式（例如.gif或）支持网站.png图标，但使用ICO格式将确保其可追溯到Internet Explorer6。）
将以下行添加到您的HTML<head>块中以对其进行引用：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

这是书签面板中的图标图标的示例：

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

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"><link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"><link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

这些注释解释了每个图标的用途-这些元素涵盖了诸如提供一个精美的高分辨率图标之类的功能，以便将网站保存到iPad主屏幕时使用。

现在就不必太担心实现所有这些类型的图标-这是一项相当高级的功能，并且不会期望您在整个课程中对此有所了解。这里的主要目的是让您知道这些东西是什么，以防您在浏览其他网站的源代码时遇到它们。

注意：如果您的站点使用内容安全策略（CSP）增强其安全性，则该策略适用于网站图标。如果您在无法加载收藏夹图标时遇到问题，请验证Content-Security-Policy标题的img-src指令是否阻止了对其的访问。

将CSS和JavaScript应用于HTML

当今您将使用的几乎所有网站都将使用CSS使它们看起来很酷，并使用JavaScript来支持交互式功能，例如视频播放器，地图，游戏等。这些元素最常分别使用和<link>元素应用于网页<script>。

该<link>元素应始终位于文档的头部。它具有两个属性，，rel="stylesheet"指示这是文档的样式表，和href，其包含样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
该<script>元素也应该放在头部，并且应该包含一个src属性，该属性包含要加载的JavaScript的路径，并且defer基本上指示浏览器在页面HTML的同时加载JavaScript。这很有用，因为它可以确保在运行JavaScript之前已全部加载HTML，这样就不会因JavaScript尝试访问页面上尚不存在的HTML元素而导致错误。实际上，有多种方法可以处理页面上的JavaScript加载，但这是现代浏览器最安全的方法（对于其他浏览器，请阅读Script加载策略）。
<script src="my-js-file.js" defer></script>
注意：<script>元素可能看起来像一个空元素，但不是，因此需要一个结束标记。除了指向外部脚本文件之外，您还可以选择将脚本放入<script>元素中。

主动学习：将CSS和JavaScript应用于页面

要开始这种主动学习，请获取我们的meta-example.html，script.js和style.css文件的副本，并将它们保存在本地计算机上的同一目录中。确保使用正确的名称和文件扩展名保存它们。
在浏览器和文本编辑器中打开HTML文件。
通过遵循上述信息，在HTML中添加<link>和<script>元素，以便将CSS和JavaScript应用于HTML。

如果操作正确，当您保存HTML并刷新浏览器时，您应该能够看到情况已发生变化：

JavaScript已在页面上添加了一个空列表。现在，当您单击列表上的任意位置时，将弹出一个对话框，要求您为新列表项输入一些文本。当您按下OK按钮时，一个新的列表项将被添加到包含文本的列表中。当您单击现有列表项时，将弹出一个对话框，允许您更改项目的文本。
CSS使背景变绿，并且文本变大。它还对JavaScript已添加到页面的某些内容进行了样式设置（带有黑色边框的红色条是CSS已添加到JS生成的列表中的样式。）

注意：如果您在本练习中陷入困境，并且无法应用CSS / JS，请尝试查看我们的css-and-js.html示例页面。

本帖寻求最佳方案

，目前已有 0 个回复我要奖励

		自动登录	找回密码
密码			立即注册

[技术交流] 其他类型的元数据

本帖寻求最佳方案

本帖子中包含更多资源