《30分钟重学HTML》之HTML头部（二）

时间 2020-06-27

原文原文链接

什么是 HTML 头部?

让咱们简单的回顾下上一章提到的 HTMLcss

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
复制代码

HTML 头部即包含在<head>元素里面的内容。html

<head>元素里面的内容不会在浏览器中显示。前端

`<head>`元素

它包含了像页面的标题,CSS，指向自定义图标的连接,元数据(描述 HTML 的数据，好比，做者，和描述文档的重要关键词), 脚本等。浏览器

即如下几类标签:bash

<title>元素
<meta>元素
<link>元素
<script>元素

下面分别介绍。服务器

`<title>`元素

咱们以前已经了解过<title>，它能够用来给 html 文档添加一个标题。布局

你可能会将它和给 body 添加标题的 <h1>元素混淆，有些时候<h1>也会被称做网页标题。可是它们是不一样的。优化

当被加载到浏览器中的时候，元素 <h1> 会出如今页面中 —— 一般它应该在一个页面中只被使用一次，它被用来标记你的页面内容的标题（故事的标题，新闻标题或者任何适当的方式）。网站
元素 <title> 是用来表示整个 HTML 文档标题的元数据（不是文档的内容）。ui
1. 被做为建议的书签名。
2. 被用在搜索的结果中。

`<meta>`元素

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

HTML <meta> 元素表示那些不能由其它 HTML 元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息`。

有不少不一样种类的<meta>元素能够被包含进你的页面的<head>元素。

若是设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
若是设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与相似命名的 HTTP 头部相同。
若是设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪一种字符编码。
若是设置了 itemprop 属性，meta 元素提供用户定义的元数据。

注意: 全局属性 name 在<meta>元素中具备特殊的语义；另外，在同一个<meta>标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。

下面分别介绍:

1.设置了 name 属性

name 属性通常和 content 属性一块儿使用。

以名-值对的方式给文档提供元数据。

其中 name 做为元数据的名称，content 做为元数据的值。

即：name="" content=""

几个经常使用的 name 属性:

author，就是这个文档的做者名称，能够用自由的格式去定义。
description，其中包含页面内容的简短和精确的描述。一些浏览器，如 Firefox 和 Opera，将其用做书签页面的默认描述。

description 也被使用在搜索引擎显示的结果页中。下面经过一个例子来讲明：
1. 访问 MDN Web Docs。
2. 查看网页源代码（经过鼠标右键点击网页在弹出的菜单中选择[查看网页源代码]）
3. 找到 name = "description" 的 meta 标签。
4. 在你喜欢的搜索引擎里搜索“MDN Web Docs”。
5. 仔细观察<meta>中的 description 和 <title> 元素如何在搜索结果里显示

viewport, 它提供有关视口初始大小的提示，仅供移动设备使用。

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，一般这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每一个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户能够经过平移和缩放来看网页的不一样部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其余手机浏览器也基本支持。

示例:<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

下表是 name="viewport"时,content 的可能内容:

Value	可能值	描述
width	一个正整数或者字符串 device-width	以 pixels（像素）为单位，定义 viewport（视口）的宽度。
height	一个正整数或者字符串 device-height	以 pixels（像素）为单位，定义 viewport（视口）的高度。
initial-scale	一个 0.0 到 10.0 之间的正数	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。
maximum-scale	一个 0.0 到 10.0 之间的正数	定义缩放的最大值；它必须大于或等于 minimum-scale 的值，否则会致使不肯定的行为发生。
minimum-scale	一个 0.0 到 10.0 之间的正数	定义缩放的最小值；它必须小于或等于 maximum-scale 的值，否则会致使不肯定的行为发生。
user-scalable	一个布尔值（yes 或者 no）	若是设置为 no，用户将不能放大或缩小网页。默认值为 yes。

注意:关于 name="viewport" 虽然标准化程度不高，但因为事实上的支配地位，大多数移动浏览器都尊重这一声明。不一样设备和浏览器之间的默认值可能不一样。

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

在 standard metadata names 中查看在 HTML 规范中定义的标准元数据名称的更多细节。

2.设置了 http-equiv 属性

该属性定义了一个编译指示指令。这个属性叫作 http-equiv(alent) 是由于全部容许的值都是特定 HTTP 头部的名称，以下：

content-security-policy

它容许页面做者定义当前页的内容策略。内容策略主要指定容许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
content-type

若是使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于 MIME 类型为 XML 的文档。
default-style

设置默认 CSS 样式表组的名称。
x-ua-compatible

X-ua-compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不一样的页面渲染模式，对于 ie8 以外的浏览器是不识别的若是指定则，则需设置 content=""
refresh

这个属性指定: 若是 content 只包含一个正整数,则是从新载入页面的时间间隔(秒); 若是 content 包含一个正整数而且跟着一个字符串 ';url=' 和一个合法的 URL，则是重定向到指定连接的时间间隔(秒)

示例：
```

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
复制代码
```

3.设置了 charset 属性

<meta charset="utf-8">
复制代码

这个元素简单的指定了文档的字符编码 —— 在这个文档中被容许使用的字符集。

4.设置了 itemprop 属性

itemprop 是全局属性被用于向一个物体中添加属性

meta 元素中也可使用。

如：

<meta itemprop="description" content="my description" />
复制代码

注意: 全局属性 name 在<meta>元素中具备特殊的语义；另外，在同一个 <meta> 标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。如：

// 正确
<meta name="description" content="my description" />

// 正确
<meta itemprop="description" content="my description" />

// 错误
<meta itemprop="description" name="description" content="" />
复制代码

`<link>`元素

HTML 外部资源连接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最经常使用于连接样式表，此外也能够被用来建立站点图标(好比 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

<link> 元素常常位于文档的头部。这个 link 元素有 2 个属性，rel="stylesheet"代表这是文档的样式表，而 href 包含了样式表文件的路径：

要连接一个外部的样式表，你须要像这样在你的中包含一个元素：
```
<link href="main.css" rel="stylesheet">
复制代码
```

增长自定义图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
复制代码

`<script>元素`

<script> 部分不必非要放在文档头部；实际上，把它放在文档的尾部（在标签以前）是一个更好的选择，这样能够确保在加载脚本以前浏览器已经解析了 HTML 内容（若是脚本加载某个不存在的元素，浏览器会报错)。

<script src="my-js-file.js"></script>
复制代码

注意： <script>元素看起来像一个空元素，但它并非，所以须要一个结束标记。您还能够选择将脚本放入<script>元素中，而不是指向外部脚本文件。

总结

理解 HTML 头部
理解 HTML 头部的<title>元素
理解 HTML 头部的<meta>元素
理解 HTML 头部的<link>元素
理解 HTML 头部的<script>元素

参考资料

<head>标签里有什么? Metadata-HTML 中的元数据, developer.mozilla.org/zh-CN/docs/…
<head>: The Document Metadata (Header) element, developer.mozilla.org/zh-CN/docs/…
<link>: The External Resource Link element, developer.mozilla.org/en-US/docs/…
<meta>: The Document-level Metadata element, developer.mozilla.org/en-US/docs/…
<title>: The Document Title element, developer.mozilla.org/en-US/docs/…
<script>: The Script element, developer.mozilla.org/en-US/docs/…
移动前端开发之 viewport 的深刻理解, www.cnblogs.com/2050/p/3877…
<meta>标签 name="viewport" 详解, www.jianshu.com/p/32f076126…