[前端笔记——HTML介绍] 3.＜head＞标签里有什么？
[前端笔记——HTML介绍] 3.head标签里有什么？
- 1.标题
- 2.元数据：<meta>元素
- 3.在站点增加自定义图标
- 4.HTML中应用CSS和JavaScript
- 5.为文档设定主语言
<head>元素的内容不会再浏览器中显示，它的作用是保存页面的一些元数据。接下来介绍几个head中重要的常用元素：
1.标题
<title>元素可以为文档添加标题。
注意<h1>和<title>的区别：
<h1>元素在页面加载完毕时显示在页面中，是为body添加标题的，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要等等）。
<title>元素是一项元数据，用于表示整个HTML文档的标题。
<title>元素还有别的作用。比如，在添加某个页面为书签的时候，会看到<title>内容被作为默认的书签名。
<title>元素的内容也被用在搜索的结果中。
2.元数据：元素
元数据就是描述数据的数据， HTML 有一个“官方的”方式来为一个文档添加元数据—— 元素。
可以添加指定的文章字符编码，比如：
<meta charset="utf-8'>
这个元素简单的指定了文档的字符编码——在这个文档中被允许使用的字符集。
也可以添加作者和描述，比如：许多 元素包含了 name 和 content 属性。name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。content 指定了实际的元数据内容。
<meta name="Chris" content="Chris Mills">
指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多。这些行为在术语上被称为：搜索引擎优化，或 SEO。
3.在站点增加自定义图标
为了进一步丰富网站设计，可以在元数据中添加对自定义图标的引用，这将在特定的场合中显示，比如浏览器的收藏或书签列表。
页面添加图标的方式有：
- 将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器将支持更通用的格式，如 .gif 或 .png）
- 将以下行添加到 HTML 的 中以引用它：
<link rel="icon" href="favicon.ico" type="image/x-icon">
4.HTML中应用CSS和JavaScript
几乎所有网站都会使用 CSS 来让网页更加炫酷，并使用 JavaScript 来让网页有交互功能，比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link> 元素以及 <script> 元素。
<link>元素经常位于文档的头部。这个 link 元素有 2 个属性，rel=“stylesheet” 表明这是文档的样式表，而 href 包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
<script>元素没必要非要放在文档的<head>中，并包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容（如果脚本尝试访问某个不存在的元素，浏览器会报错）。实际上还有很多方法可用于处理加载 JavaScript 的问题，但这是现代浏览器中最可靠的一种方法。
<script src="my-js-file.js" defer></script>
5.为文档设定主语言
可以通过添加 lang 属性到 HTML 开始的标签中来实现为站点设定语言。比如：
<html lang="zh-CN">
如果 HTML 文档的语言设置好了，那么HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。
还可以将文档的分段设置为不同的语言。比如：
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>