HTML 头部

在 HTML 布局的文章中，我已经提到过网页主要的结构就两部分，一个是 head 部分，一个是 body 部分。这里 head 部分包含的并不是人类可读的信息，话句话说，在 head 部分的内容，网站一般是不会显示出来的，所有显示的内容一般都放在 body 部分。

head 部分是给机器读的，body 部分是给人类读的。head 部分主要包含了一些元数据信息，包括不限于网站的标题、页面样式、字符集、脚本数据、SEO 引导等等。

head 内部经常使用的标签如下：<title>、<base>、<link>、<style>、<meta>、<script>、<noscript> 等等。

title 元素

title 元素用来定义文档的标题，这个标题并不是网站页面上显示的标题。该元素被放在 head 元素内部，并且一个文档只运行有一个 title 元素，title 元素内部不能嵌套任何其它的标签，只能是纯文本内容。

该元素最终会显示在如下几个地方：

下面是使用的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

虽然 HTML 对标题的长度没有什么要求，但是标题的好坏可能会影响网站 SEO 的效果，所以标题的规范最好参考搜索引擎的规范名命。

base 元素主要用于文档中链接的定位。base 提供基准 URL 地址，文档的后续链接都是以该基准链接为基础。例如：

<head>
	<base href="https://www.example.com/">
</head>
<body>
	<a href="#anchor">Anker</a>
</body>

则 <a> 标签最终指向的位置是：https://example.com/#anchor。该元素每个文档只能定义一个，并且必须出现在任何引用外部资源的元素之前。如果存在多个，则会遵循首次的声明内容。如果没有设置 base 元素，则页面基于 location.href 的值。

link 元素主要用于指定当前文档和外部文档之间的关系。最常用的是使用 link 元素引入外部样式表，除此之外也可以设置站点图表样式等等。

link 元素可以包含多个，例如下面的代码：

<link href="main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">

第一行用于指定页面样式，浏览器看到这一行会主动加载 main.css 文件，并将文件中的样式应用在该页面上。第二行用于指定网站的图标，该图标会显示在浏览器的标题栏、状态栏以及收藏栏中。

style 元素主要是用于书写当前网页的 CSS 样式表，但是因为不能复用，所以并不是很推荐。使用 style 元素设置的样式表的优先级高于外部引用的 CSS 样式，所以你可以通过该方式覆盖掉外部引入的样式效果。

一个简单使用案例：

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

meta 元素用于提供 HTML 文档的元数据。元数据是一组数据，用于提供一些额外的描述信息。例如下面这个例子，描述了文档的作者信息：

<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">
    <meta name="author" content="John Smith">
</head>

更多相关的信息，我们单独抽出一个章节来讲解。

script 元素用于引入当前页面的脚本信息，你可以通过该元素引入外部脚本文件可以直接将脚本放到该元素内部：

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

或

<script>
  alert("Hello World!");
</script>

不过这里有个问题，假如浏览器不支持脚本解析怎么办？

为了解决这种状况，浏览器又引入了一个 noscript 元素，该元素的内容会在不支持脚本解析的浏览器上显示，如果脚本解析没有被禁用，那么 noscript 元素包含的内容不会被解析。