其他类型的元数据
当您在网络上旅行时，也会发现其他类型的元数据。您将在网站上看到的许多功能都是专有作品，旨在为某些网站（例如社交网站）提供可以使用的特定信息。例如，Open Graph Data是Facebook发明的一种元数据协议，旨在为网站提供更丰富的元数据。在MDN Web文档源代码中，您将找到以下代码：<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"><meta property="og:description" content="The Mozilla Developer Network (MDN) providesinformation about Open Web technologies including HTML, CSS, and APIs for both Web sitesand HTML5 Apps. It also documents Mozilla products, like Firefox OS."><meta property="og:title" content="Mozilla Developer Network">这样的效果是，当您链接到facebook上的MDN Web Docs时，该链接会与图像和说明一起显示：为用户带来更丰富的体验。Twitter还具有自己类似的专有元数据，称为Twitter Cards，当在URL.com上显示站点的URL时，其具有类似的效果。例如：<meta name="twitter:title" content="Mozilla Developer Network">将自定义图标添加到您的网站为了进一步丰富您的网站设计，您可以在元数据中添加对自定义图标的引用，这些图标将在某些上下文中显示。其中最常用的是favicon（“收藏夹图标”的缩写，指的是它在浏览器的“收藏夹”或“书签”列表中的使用）。不起眼的图标已经存在很多年了。这是该类型的第一个图标：在多个地方使用的16像素正方形图标。您可能会在浏览器选项卡中看到（取决于浏览器）显示的图标，这些图标包含每个打开的页面，并且在书签面板中的书签页面旁边。可以通过以下方式将收藏夹图标添加到您的页面：
[*]将其保存在与网站索引页相同的目录中，并以.ico格式保存（大多数浏览器将以更常见的格式（例如.gif或）支持网站.png图标，但使用ICO格式将确保其可追溯到Internet Explorer6。）
[*]将以下行添加到您的HTML<head>块中以对其进行引用：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
这是书签面板中的图标图标的示例：这些天，还有很多其他图标类型需要考虑。例如，您可以在MDN Web Docs主页的源代码中找到此代码：<!-- third-generation iPad with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"><!-- iPhone with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"><!-- first- and second-generation iPad: --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"><!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --><link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"><!-- basic favicon --><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示例页面。
页:
[1]