关于html:head标签到底能做些什么事情

5次阅读

共计 2112 个字符，预计需要花费 6 分钟才能阅读完成。

在页面加载实现的时候，标签 head 里的内容，是不会在页面中显示进去的。它蕴含了像页面的<title>(题目) ,CSS(如果你抉择用 CSS 来为 HTML 内容增加款式)，指向自定义图标的链接和其余的元数据(形容 HTML 的数据，比方，作者，和形容文档的重要关键词)。

HTML 头部是蕴含在 <head> 元素外面的内容。不像 <body> 元素的内容会显示在浏览器中，head 外面的内容不会在浏览器中显示，它的作用是蕴含一些页面的元数据。

元素 <title> 是用来示意整个 HTML 文档题目的元数据（不是文档的内容）。
元素 <title> 也能够用在：当你尝试给某个网页增加书签，<title>标签包裹的内容被作为倡议的书签名。
元素 <title> 的内容也被用在搜寻的后果中。

元数据就是形容数据的数据，而 HTML 有一个“官网的”形式来为一个文档增加元数据 –> <meta> 元素。

元素<meta>：能够指定以后文档中的字符编码。

<!-- 这个元素简略的指定了文档的字符编码 —— 在这个文档中被容许应用的字符集。-->
<meta charset="utf-8">

元素<meta>：能够天啊及作者和形容

元素 <meta> 蕴含了 name 和content个性：

+ `name`：制订了 meta 元素的类型；阐明该元素蕴含了什么类型的信息。+ `content`：指定了理论的元数据内容

```html
<!-- 指定作者在某些状况下是很有用的：如果你须要分割页面的作者，问一些对于页面内容的问题。一些内容管理系统可能主动获取页面作者的信息，而后用于某些用处。-->

<!-- 指定蕴含对于页面内容的关键字的页面内容的形容是很有用的，因为它可能或让你的页面在搜索引擎的相干的搜寻呈现得更多（这些行为术语上被称为 Search Engine Optimization, or SEO.）-->
<meta name="author" content="webxiang">
<meta name="description" content="A web developtor is learning HTML.">
```

其余类型的元数据之 Facebook 编写的元数据协定 Open Graph Data 为网站提供了更丰盛的元数据。

<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">

其余类型的元数据之 Twitter 还领有本人的类型的专有元数据协定，当网站的 URL 显示在 twitter.com 上时，它具备类似的成果。
```
<meta name="twitter:title" content="Mozilla Developer Network">
```

为了进一步丰盛你的网站设计，你能够在元数据中增加对自定义图标的援用，这些将在特定的场合中显示。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

现在，简直所有网站都会应用 CSS 让网页更加好看，应用 JavaScript 让网页具备交互性能，比方视频播放器，地图，游戏以及更多功能。这些利用在网页中很常见，它们别离应用 <link>元素以及 <script> 元素。

<link>元素常常位于文档的头部。这个 link 元素有 2 个属性，rel=”stylesheet” 表明这是文档的样式表，而 href 蕴含了样式表文件的门路：
```
<link rel="stylesheet" href="my-css-file.css">
```
<script>局部没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body> 标签之前）是一个更好的抉择，这样能够确保在加载脚本之前浏览器曾经解析了 HTML 内容（如果脚本加载某个不存在的元素，浏览器会报错）。
```

<script src="my-js-file.js"></script>
```