HTMl 元素

2020-12-22 本文已影响0人 LXEP

HTML<head>和<body>元素不同，它的内容不会显示在浏览器中，它的作用是保存页面的一些元数据。上述示例的head元素非常简短：

<head>
    <meta charset="UTF-8">
    <title>我是这个页面的标题</title>
</head>

然而大型页面的head会包含很多元数据。可以用开发者工具查看网页的head信息。我们在这里只是初步介绍几项head中重要的常用元素。

添加标题

之前已经讲过 <title>，它可以为文档添加标题。别和<h1>元素搞混了，<h1>是为body添加标题的。有时候<h1>也叫做网页标题。但是两者并不相同。

<h1>元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要等等）
<title>元素是一项元数据，用于表示整个HTML文档的标题（而不是文档内容）。

来看一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是 title 元素</title>
</head>
<body>
    <p>我是 h1 元素</p>
</body>
</html>

title文档标题

现在我们就可以很明显的看到 <h1>出现的地方和<title>出现的地方！

元素<title>也可以被以其他的方式使用着。比如说，如果你尝试为某个页面添加书签，你就会看到<title>的内容被作为建议的书签名。

title被作为标签名

元素<title>的内容也被用在搜索的结果中。

元数据：<meta>元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta>元素。有很多不同种类的<meta>元素可以被包含进你的页面的<head>元素，在这里会解释一些你常会看到的类型，先有个概念。

指定你文档中字符的编码

在上面的例子中，这行是被包含的：

 <meta charset="UTF-8">

这个元素简单的指定来文档的字符编码——在这个文档中被允许使用的字符集。utf-8是一个通用的字符集，它包含了任何人类语言中的大部分字符，这个在上节课已经提到过，比如说，你的页面可以很好的处理英语和韩语：

utf-8字符集

比如说，如果你将你的字符集设置为 GBK（中国大陆国标字符集），那么页面将出现乱码：

GBK字符集

添加作者和描述

许多<meta>元素包含了name和content特性：

name指定了meta元素的类型；说明该元素包含了什么类型的信息。
content指定了实际的元数据内容。

这两个meta元素对于定义你的页面的作者和提供页面的简要描述是很有用的。让我们看一个例子：

<meta name="author" content="LXEP">
<meta name="description" content="这是HTML的学习教程">

指定作者在某些情况下是很有用的：如果您需要联系页面的作者，问一些关于页面内容的问题。一些内容管理系统能够自动获取页面作者的信息，然后用于某些用途。

指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现的更多（这些行为术语上被称为Search Engine Optimization，or SEO）。

其他类型的元数据

当你在网站上查看源码时，你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站（如社交网站）提供可使用的特定信息。
例如，Facebook编写的元数据协议Open Graph Data 为网站提供了更丰富的元数据。在MDN源代码中，你会发现：

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

上面代码展现的效果就是，当你在Facebook上链接到MDN时，该链接将显示一个图像和描述：这为用户提供更丰富的体验。

Twitter还拥有自己的类型的专有元数据协议，当网站的URL显示在twitter.com上时，它具有相似的效果。例如：

<meta name="twitter:title" content="Mozilla Developer Network">

在站点增加自定义图标

你可以在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。

这个不起眼的图标已经存在很多年了，16*16像素是这种图标的第一种类型。你可以看见这些图标出现在浏览器每一个打开的页面的标签页中，以及在书签面板的书签页面中。

页面添加图标的方式有：

将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer6一样久远的浏览器显示）
将以下行添加到HTML <head>中以引用它：
```
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
```
现在浏览器在各种场合使用favicons，如打开的页面标签页和书签面板中的书签页面。下面是一个favicon出现在书签面板中的例子：

favicons

现在还有很多其他的图标类型可以考虑。例如，你可以在 MDN 主页的源代码中找到它：

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

这些注释解释了每个图标的用途 - 这些元素涵盖的东西提供一个高分辨率图标，这些高分辨率图标当网站保存到iPad的主屏幕时使用。

不用担心现在实现所有这些类型的图标 - 这是一个相当先进的功能，我们在这里仅作了解。在这讲的主要目的是让你提前了解有这样一个东西，以防当你浏览其他网站资源代码的时候不理解源代码的含义。

在HTML中应用CSS和JavaScript

如今，几乎你使用的所有网站都会使用CSS让网页更加酷炫，使用JavaScript让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用<link>元素以及<script>元素。

<link>元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而href包含了样式表文件的路径：

<link rel="stylesheet" href="index.css">

<script>部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在<body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前，浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="index.js"></script>

注意：<script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。你还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

为文档设定主语言

最后值得一提的是可以（而且有必要）为站点设定语言，这个可以通过添加lang属性到HTML开始标签中来实现，如下所示：

<html lang="zh-CN" >

这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引（例如，允许它在特定语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用。

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

<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p>

小结

现在我们简单了解了head标签的概念、用途、基本组成，以及它对文档所起的作用。