HTML元素<head>里有什么？

HTML根元素是<html>，一般情况下，它的第一个子元素就是<head>，那么这个标签中可以包含的内容不会出现在文档中，指示作为文档的部分元数据，如对文档的描述，关联的文件等等。

标题

<title>标签：简单明了，就是标题，它在很多地方都有用，比如，当我想收藏一个网页或者添加为书签的时候，显示的就是这个标题，另外，标题还会和搜索引擎的显示结果有关系。

元数据

<meta>标签：可以设置文档的元数据，对文档的一些属性设置，文档的简介等等。

指定文档的编码

<meta charset="utf-8">这个设置就是指定了文档的编码，浏览器会使用这个字符集来对文档解析，如果文档是其它的编码，网页可能无法解析，显示就会异常。现在大部分都是使用的utf-8编码，所以设置这个就可以了。

作者和描述

<meta name="author" content="yankewei">这个设置指定了这个文档的作者。档通过某种方式抓取这个文档的时候可以通过这个标签识别文档的作者。 <meta name="description" content="HTML元素，HTML概念，通过这一系列文章规范化学习HTML">这个表示针对文档的简单描述，设置之后，搜索引擎会识别，并且会在页面中展示这段描述。

逐渐不再使用的元数据

<meta name="keywords" content="HTML元素，HTML文档">这个设置也是用来表示文档的关键词，可以被搜索引擎搜索，但是由于很多网站的滥用，逐渐搜索引擎被抛弃，在这里，还是要呼吁大家，合适地创建自己的HTML文档，规范化HTML结构。

自定义网站图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 这个元素可以让网站加上图标。另外，还可以针对不同的设备设置不同尺寸的icon。

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

应用css和JavaScript

css可以让网站变得更加绚烂和整洁，JavaScript可以让网站的交互更加友好。

<link rel="stylesheet" href="my-css-file.css">

这个元素可以引入想要的css，一般位于head元素中，也就是在body元素的上边，有两个属性，rel="stylesheet"表明这个是文档的样式，href属性表明这个css的路径，可以是相对路径，也可以是绝对路径。

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

这个元素可以引入想要的css，它有结束标签，所以也可以直接在标签中写入内容。虽然放在了<head>元素来介绍，但是通常我们会把它放在<body>元素中，在文档末尾，</body>前边，这样档文档加载完之后再去加载JavaScript脚本，可以避免js脚本加载时间过长而导致文档加载异常或者白页面。

为文档设置主语言

<html lang="en-US">

每个文档都应该有它的主要语言，这样对搜索引擎更友好，如果浏览器对不同的语言做了特殊的处理，也可以更好的服务用户。

yankewei / blog