什么是HTML 头部?

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

增加一个标题

元素 <title> 是用来表示整个HTML文档大致内容的元数据

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

元素 <h1>  它被用来标记你的页面内容的标题

元素 <title> 也被以其他的方式使用着。 比如说，如果你尝试为某个页面添加书签，（Bookmarks > Bookmark This Page， 在火狐浏览器中），你会看到 <title> 的内容被作为建议的书签名。

元素 <title> 的内容也被用在搜索的结果中

元数据：<meta>元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据——  <meta> 元素。

指定你的文档中字符的编码

<meta charset="utf-8">
这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。 这意味着你的web页面可以显示任意的语言

添加作者和描述

许多<meta> 元素包含了name 和 content 特性：

name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息

content 指定了实际的元数据内容

指定作者在某些情况下是很有用的：如果你需要联系页面的作者，问一些关于页面内容的问题

指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多 

 许多 <meta> 特性已经不再使用。 例如，keyword <meta> 元素（<meta  name="keywords" content="fill, in, your, keywords, here">）— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果

其他类型的 metadata

元数据可以专有创作，旨在向某些网站(如社交网站)提供可使用的特定信息。

在你的站点增加自定义图标

可以在元数据中添加对自定义图标的引用

页面添加图标的方式有：

将其保存在与网站的索引页面相同的目录中，以.ico格式保存

将以下行添加到HTML <head>中以引用它：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
如今还有很多其他的图标类型可以考虑

在HTML中应用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>

为文档设定主语言

可以通过添加lang属性到HTML开始标签中来实现设定语言

<html lang="en-US">

如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)，对于那些使用屏幕阅读器的视障人士也很有用(比如， 法语和英语中都有“six”这个单词，但是发音却完全不同)。

你还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄