《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…

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。