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 元素包含的内容不会被解析。