HTML中的Head標籤學習

時間 2019-11-22

標籤 html head 標籤學習欄目 HTML 简体版

原文原文鏈接

在頁面加載完成的時候，標籤head裏的內容，是不會在頁面中顯示出來的。它包含了像頁面的<title>(標題) ,CSS(若是你想用CSS來美化頁面內容)，圖標和其餘的元數據(好比做者，關鍵詞，摘要)。在本文中，咱們將包含全部上述的事情，爲您在腦海中營造一個很好的基礎和代碼印象。css

1.1 什麼是Head標籤

head 標籤是 <head> 元素的內容。不像 <body> 元素的內容能夠顯示在瀏覽器中，head 的內容不會在瀏覽器中顯示，它的做用是包含一些頁面的元數據。在下面的例子中，head 的內容不多。html

固然，在大型的頁面中，head 會包含不少的元數據。你能夠用 developer tools 去查看你喜歡的網頁的 head 的內容。在這裏，咱們會告訴你怎麼將必須的內容包含在 head 裏，而不是將全部可以包含在 head 裏的內容都告訴你。咱們開始吧。web

1.2 標題

咱們以前已經看到了 <title>，它能夠用來給 html 文檔添加一個標題。你可能會將它和給 body 添加標題的 <h1> 元素混淆，有些時候 h1 也會被稱做網頁標題。可是它們是不一樣的。瀏覽器

當被加載到瀏覽器中的時候，元素 <h1> 會出如今頁面中 —— 一般它應該在一個頁面中只被使用一次, 它被用來標記你的頁面內容的標題（故事的標題，新聞標題或者任何適當的方式）app

元素 <title> 是用來表示整個HTML文檔大體內容的元數據（不是文檔的內容）。學習

1.3 <meta>元數據

元數據就是描述數據的數據，而HTML有一個「官方的」方式來爲一個文檔添加元數據（<meta> 元素）。固然，其餘在這篇文章中提到的東西也能夠被看成元數據。有不少不一樣種類的 <meta> 元素能夠被包含進你的頁面的<head>元素, 可是如今咱們還不會嘗試去解釋它們, 這隻會引發混亂。咱們會解釋一些你常會看到的東西，咱們只會給你一個想法。網站

字符的編碼

經過<meta charset="utf-8">指定字符編碼。搜索引擎

這個元素簡單的指定了文檔的字符編碼（在這個文檔中被容許使用的字符集）。 utf-8 是一個通用的字符集，它包含了任何人類語言中的大部分的字符。這意味着你的web頁面能夠顯示任意的語言; 因此對於你的每個頁面，使用這個設置是很好的!編碼

做者和描述

許多<meta> 元素包含了name 和 content 特性:spa

name 特性指定了meta 元素的類型; 說明該元素包含了什麼類型的信息。

content 指定了實際的元數據內容。

這兩個meta 元素對於定義你的頁面的做者和提供頁面的內容描述是頗有用的。讓咱們看一個例子：

指定做者在某些狀況下是頗有用的：若是你須要聯繫頁面的做者，問一些關於頁面內容的問題。一些內容管理系統可以自動獲取頁面做者的信息，而後用於某種目的。

指定包含關於頁面內容的關鍵字的頁面內容的描述是頗有用的，由於它可能或讓你的頁面在搜索引擎的相關的搜索出現得更多

其餘類型的 metadata

當你在網站上查看源碼時，你也會發現其餘類型的元數據。你在網站上看到的許多功能都是專有創做，旨在向某些網站（如社交網站）提供可以使用的特定信息。

1.4 自定義圖標

爲了進一步豐富你的網站設計，你能夠在元數據中添加對自定義圖標的引用，這些將在特定的場合中顯示。

這個不起眼的圖標已經存在不少不少年了，16 x 16 像素是這種圖標的第一種類型。你能夠看見這些圖標出如今瀏覽器每個打開的頁面中的標籤頁中中以及在書籤面板中的書籤頁面中。

頁面添加圖標的方式有：

將其保存在與網站的索引頁面相同的目錄中，以.ico格式保存（大多數瀏覽器將支持更通用的格式，如.gif或.png，但使用ICO格式將確保它能在如Internet Explorer 6同樣久遠的瀏覽器顯示）

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

現在還有不少其餘的圖標類型能夠考慮。例如，你能夠在 MDN 主頁的源代碼中找到它：

href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">

href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">

href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">

這些註釋解釋了每一個圖標的用途 - 這些元素涵蓋的東西提供一個高分辨率圖標，這些高分辨率圖標當網站保存到iPad的主屏幕時使用。

不用擔憂如今實現全部這些類型的圖標 - 這是一個至關先進的功能，你將不會被要求在這個課堂上學習這個知識點。這裏的主要目的是讓你提早了解有這同樣東西以防當你瀏覽其餘網站的源代碼時不理解源代碼的含義。

1.5 應用CSS和JavaScript

現在，幾乎你使用的全部網站都會使用 CSS 讓網頁更加炫酷, 使用JavaScript讓網頁有交互功能, 好比視頻播放器，地圖，遊戲以及更多功能。這些應用在網頁中很常見，它們分別使用 <link>元素以及 <script> 元素。

注意： < script >元素看起來像一個空元素，但它並非，所以須要一個結束標記。您還能夠選擇將腳本放入< script >元素中，而不是指向外部腳本文件。

1.6 設定主語言

最後，值得一提的是你能夠（並且確實應該）爲你的站點設定語言，這個能夠經過添加lang屬性到HTML開始標籤中來實現，以下所示：<html lang="zh-CN">

這在不少方面都頗有用。若是你的HTML文檔的語言設置好了，那麼你的HTML文檔就會被搜索引擎更有效地索引（例如，容許它在特定於語言的結果中正確顯示），對於那些使用屏幕閱讀器的視障人士也頗有用（好比, 法語和英語中都有「six」這個單詞，可是發音卻徹底不一樣)。

你還能夠將文檔的分段設置爲不一樣的語言。

相關標籤/搜索

每日一句

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