HTML-head頭部淺析

鐵樂貓發表於2018-05-25
HTML

HTML結構

在sublime或HBuildr新建HTML檔案，輸入html:5,按下tab鍵後，自動生成的程式碼大致如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

文件宣告頭

標準的HTML頁面，第一行以

<!DOCTYPE...

開頭，而這一行就被稱為文件宣告頭。
DocType Declaration，簡稱DTD。
此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。

HTML4.01一共有6種DTD，也就是說HTML第一行語句一共有6種：
HTML-head頭部淺析

上圖中的三種小規範進行解釋：

  • strict：表示“嚴格的”，這種模式裡面的要求更為嚴格。
  • Transitional：表示“普通的”，這種模式就是沒有一些別的規範。
  • Frameset：表示“框架”，在框架的頁面使用。

strict這種嚴格體現在哪裡？有一些標籤不能使用。
比如，u標籤，就是給一個本文加下劃線，但是這和HTML的本質有衝突，
因為HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。
所以，在strict中是不能使用u標籤的。那怎麼給文字增加下劃線呢？
可以使用css屬性來解決。
XHTML1.0更為嚴格，因為這個體系本身規定比如標籤必須是小寫字母、必須嚴格閉合標籤、必須使用引號引起屬性等等。

頭標籤(head)

head標籤是所有頭部元素的容器。

<head>內的元素可包含指令碼，指示瀏覽器在何處可以找到樣式表，提供元資訊等。
可新增到head部分的標籤：<title>、<base>、<meta>、<link>、<script>、<style>:
<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<base>:為頁面上的所有連結規定預設地址或預設目標(target)。
<meta>：提供有關頁面的基本資訊。
<link>：定義文件與外部資源的關係。
<script>:定義客戶端指令碼，如JavaScript。
<style>:定義內部樣式表與網頁的關係。

meta標籤

可提供有關頁面的原資訊（mata-information）,
針對搜尋引擎和更新頻度的描述和關鍵詞。
後設資料（metadata）是關於資料的資訊。

<meta> 標籤提供關於 HTML 文件的後設資料。
後設資料不會顯示在頁面上，但是對於機器是可讀的。
典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他後設資料。
<meta> 標籤始終位於 head 元素中。
後設資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
  • http-equiv屬性
    • 用來向瀏覽器傳達一些有用的資訊，幫助瀏覽器正確地顯示網頁內容。
    • 與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。
    <!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文件的內容型別和編碼型別 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高階模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
  • name屬性
    • 用於頁面的關鍵字和描述，是寫給搜尋引擎看的，
    • 關鍵字可以有多個，用 ‘,’號隔開。
    • 與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。
    <meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,簡訊" />
<meta name="Description" content="網易是中國領先的網際網路技術公司，為使用者提供免費郵箱、遊戲、搜尋引擎服務，
開設新聞、娛樂、體育等30多個內容頻道，及部落格、視訊、論壇等互動交流，網聚人的力量。" />
<!-- 只要設定Description頁面描述，那麼百度搜尋結果，就能夠顯示這些語句，
這個技術叫做SEO（search engine optimization，搜尋引擎優化） -->
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- 讓網頁支援移動端，移動裝置優先 -->

title 標籤

<title> 標籤定義文件的標題。

title 元素在所有 HTML/XHTML 文件中都是必需的。
title 元素能夠：

  • 定義瀏覽器工具欄中的標題
  • 提供頁面被新增到收藏夾時顯示的標題
  • 顯示在搜尋引擎結果中的頁面標題
    • 告訴使用者和搜尋引擎這個網頁的主要內容是什麼，
    • 搜尋引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。

base 標籤

<base> 標籤為頁面上的所有連結設定預設的地址或預設的目標（target）：
例：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

例項2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意這裡我們設定了圖片的相對地址。
能正常顯示是因為我們在 head 部分設定了 base 標籤，
該標籤指定了頁面上所有連結的預設 URL，
所以該圖片的訪問地址為 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> -
注意這個連結會在新視窗開啟，即便它沒有 target="_blank" 屬性。
因為在 base 標籤裡我們已經設定了 target 屬性的值為 "_blank"。
</body>
</html>

w3cschool

<link> 標籤定義文件與外部資源之間的關係。
<link> 標籤最常用於連線樣式表：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

style 標籤

<style> 標籤用於為 HTML 文件定義樣式資訊。
您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

注：link和style詳細會在講到樣式和css時再詳解和列例項。

script標籤

script 標籤用於定義客戶端指令碼，比如JavaScript。

HTML頭部元素   標籤描述
<head>        定義關於文件的資訊。
<title>         定義文件標題。
<base>        定義頁面上所有連結的預設地址或預設目標。
<link>        定義文件與外部資源之間的關係。
<meta>        定義關於 HTML 文件的後設資料。
<script>        定義客戶端指令碼。
<style>             定義文件的樣式資訊。

參考：

1、w3cschool

2、小馬哥

相關文章