head中有什么? HTML中的元數(shù)據(jù)

2018-09-14 16:12 更新
當(dāng)頁面加載完成的時(shí)候，標(biāo)簽head里的內(nèi)容，是不會(huì)在頁面中呈現(xiàn)出來的。它包含了像頁面的<title>（標(biāo)題），引入CSS（如果你想用CSS來美化頁面內(nèi)容），圖標(biāo)和其他的元數(shù)據(jù)（比如 作者，關(guān)鍵詞，摘要）。在本文中，我們將覆蓋所有上述的事情，為您提供一個(gè)良好的基礎(chǔ)，在head標(biāo)簽中，處理標(biāo)記和其他代碼。


前提： 基本熟悉HTML，可以從 HTML入門了解。
目的： 學(xué)習(xí)head標(biāo)簽，它的目的是什么，包含哪些元素以及它對頁面有什么影響。

什么是Head標(biāo)簽？

讓我們簡單的回顧下上一章提到的HTML：

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

head 標(biāo)簽是 <head> 元素的內(nèi)容。不像 <body> 元素的內(nèi)容可以顯示在瀏覽器中，head 的內(nèi)容不會(huì)在瀏覽器中顯示，它的作用是包含一些頁面的元數(shù)據(jù)。在下面的例子中，head 的內(nèi)容很少。

<head>  <meta charset="utf-8">  <title>My test page</title></head>

當(dāng)然，在大型的頁面中，head 會(huì)包含很多的元數(shù)據(jù)。你可以用 developer tools 去查看你喜歡的網(wǎng)頁的 head 的內(nèi)容。在這里，我們會(huì)告訴你怎么將必須的內(nèi)容包含在 head 里，而不是將所有能夠包含在 head 里的內(nèi)容都告訴你。讓我們開始吧。

添加一個(gè)標(biāo)題

我們之前已經(jīng)看到<title>，它可以用來給 html 文檔添加一個(gè)標(biāo)題。你可能會(huì)將它和給 body 添加標(biāo)題的<h1>元素混淆，有些時(shí)候 h1 也會(huì)被稱作網(wǎng)頁標(biāo)題。但是它們是不同的。

  • 當(dāng)被加載到瀏覽器中的時(shí)候，元素 <h1> 會(huì)出現(xiàn)在頁面中——通常它應(yīng)該在一個(gè)頁面中只被使用一次, 它被用來標(biāo)記你的頁面內(nèi)容的標(biāo)題（故事的標(biāo)題，新聞標(biāo)題或者任何適當(dāng)?shù)姆绞剑?/span>
  • 元素 <title> 是用來表示整個(gè)HTML文檔大致內(nèi)容的元數(shù)據(jù)（不是文檔的內(nèi)容）。

主動(dòng)學(xué)習(xí)：檢查一個(gè)簡單的例子

1.為了開始這個(gè)主動(dòng)學(xué)習(xí)，我們希望你到我們的Github庫中下載一份我們的 title-example.html page。這樣你可以：
  • 使用你的代碼編輯器，從頁面中拷貝粘貼代碼到一個(gè)新的文本文件中，然后將其保存到一個(gè)適當(dāng)?shù)牡胤健?/span>
  • 按下頁面中的 "Raw" 按鈕, 從瀏覽器的菜單中選擇 File > Save Page As... ，然后選擇一個(gè)地方來保存這個(gè)文件。
2.在瀏覽器中打開文件，你會(huì)看到類似這樣效果：

現(xiàn)在很明顯的可以看到 <h1> 出現(xiàn)的地方，和 <title> 出現(xiàn)的地方！

3.你應(yīng)該嘗試著在你的代碼編輯器中打開這些代碼，編輯這些元素的內(nèi)容，然后在你的瀏覽器中刷新頁面。祝你玩得開心。


元素 <title> 也被以其他的方式使用著。比如說，如果你嘗試為某個(gè)頁面添加書簽，（Bookmarks > Bookmark This Page, 在火狐瀏覽器中），你會(huì)看到 <title> 的內(nèi)容被作為建議的書簽名。

元素 <title> 的內(nèi)容也被用在搜索的結(jié)果中，正如你下面看到的那樣。

元數(shù)據(jù)：<meta> 元素

元數(shù)據(jù)是描述數(shù)據(jù)的數(shù)據(jù)，而HTML有一個(gè)“官方的”方式來為一個(gè)文檔添加元數(shù)據(jù)——<meta> 元素。當(dāng)然，我們在本文中討論的其他東西也可以被認(rèn)為是元數(shù)據(jù)。有很多不同類型的<meta> 元素可以包含在你的頁面的<head>元素里，但是現(xiàn)在我們還不會(huì)嘗試去解釋它們，這只會(huì)引起混亂。我們會(huì)解釋一些你會(huì)經(jīng)常看到的東西，會(huì)給你一個(gè)想法。

指定文檔中字符的編碼

在上面的例子中，我們看到了這一行：

<meta charset="utf-8">

這個(gè)元素簡單的指定了文檔的字符編碼——在這個(gè)文檔中被允許使用的字符集。utf-8 是一個(gè)通用的字符集，它包含了任何人類語言中的大部分的字符。這意味著你的web頁面可以顯示任意的語言；所以對于你的每一個(gè)頁面，使用這個(gè)設(shè)置是很好的！比如說，你的頁面可以很好的處理英語和日語：

比如說，如果你將你的字符集設(shè)置為ISO-8859-1（拉丁字母的字符集），那么你的頁面會(huì)是亂碼的：

主動(dòng)學(xué)習(xí)：體驗(yàn)字符集

為了進(jìn)行這個(gè)練習(xí)，重新到你在前面<title>章節(jié)中獲取的HTML模板 （ title-example.html page），試著改變其字符集的值為ISO-8859-1，然后將日語添加到頁面中。這就是我們使用的代碼：

<p>Japanese example: ご飯が熱い。</p>

添加作者（author）和描述（description）

許多<meta> 元素包括 name 和content特性：

  • name特性指定了meta 元素的類型；說明該元素包含了什么類型的信息。
  • content指定了實(shí)際的元數(shù)據(jù)內(nèi)容。

這兩個(gè)meta元素對于定義你的頁面的作者和提供頁面的內(nèi)容描述是很有用的。讓我們看一個(gè)例子：

<meta name="author" content="Chris Mills"><meta name="description" content="The MDN Learning Area aims to providecomplete beginners to the Web with all they need to know to getstarted with developing web sites and applications.">

指定作者在以下幾個(gè)方面是有用的：如果你需要聯(lián)系頁面的作者，問一些關(guān)于頁面內(nèi)容的問題。一些內(nèi)容管理系統(tǒng)能夠自動(dòng)獲取頁面作者的信息，然后用于某種目的。

指定包含關(guān)于頁面內(nèi)容的關(guān)鍵字的頁面內(nèi)容的描述是很有用的，因?yàn)樗赡芑蜃屇愕捻撁嬖谒阉饕娴南嚓P(guān)的搜索出現(xiàn)得更多（這些行為術(shù)語上被稱為 Search Engine Optimization，即SEO。）

主動(dòng)式學(xué)習(xí)：在搜索引擎中description的使用

description也被使用在搜索引擎顯示的結(jié)果頁中。下面通過一個(gè)例子來說明：

  1. <meta name="description" content="The Mozilla Developer Network (MDN) providesinformation about Open Web technologies including HTML, CSS, and APIs for bothWeb sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
  • 現(xiàn)在，在你喜歡的搜索引擎里搜索”Mozilla Developer Network“ （下圖展示的是在雅虎搜索里的情況）。你會(huì)看到description <meta> 和 <title> 元素如何在搜索結(jié)果里顯示—很值得這樣做哦！

注意：在Google搜索中，在主頁面鏈接下面，你將看到一些相關(guān)子頁面 — 這些是站點(diǎn)鏈接，可以在 Google's webmaster tools 配置：一種可以使你的站點(diǎn)對搜索引擎更友好的方式。
注意：許多<meta>特性已經(jīng)不再使用。例如， keyword <meta> 元素——提供關(guān)鍵詞給搜索引擎，根據(jù)不同的搜索詞，查找到相關(guān)的網(wǎng)站——被搜索引擎忽略了。因?yàn)樽鞅渍咛畛淞舜罅筷P(guān)鍵詞到keyword，引導(dǎo)搜索結(jié)果。

其他類型的元數(shù)據(jù)

當(dāng)你在網(wǎng)絡(luò)上漫游時(shí)，你也會(huì)發(fā)現(xiàn)其他類型的元數(shù)據(jù)。你在網(wǎng)站上看到的許多功能都是專有創(chuàng)作，旨在向某些網(wǎng)站（例如社交網(wǎng)站）提供他們可以使用的特定信息。

例如， Open Graph Data 是Facebook發(fā)明的元數(shù)據(jù)協(xié)議，用于為網(wǎng)站提供更豐富的元數(shù)據(jù)。在MDN源代碼中，你會(huì)發(fā)現(xiàn)：

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"><meta property="og:description" content="The Mozilla Developer Network (MDN) providesinformation about Open Web technologies including HTML, CSS, and APIs for both Web sitesand HTML5 Apps. It also documents Mozilla products, like Firefox OS."><meta property="og:title" content="Mozilla Developer Network">

上面代碼展現(xiàn)的一個(gè)效果是，當(dāng)你在Facebook上鏈接到MDN時(shí)，該鏈接會(huì)顯示一個(gè)圖像和描述：為用戶提供更豐富的體驗(yàn)。

 

Twitter也有自己的類似的專有元數(shù)據(jù)，當(dāng)網(wǎng)站的URL顯示在twitter.com上時(shí)，會(huì)產(chǎn)生類似的效果。例如：

<meta name="twitter:title" content="Mozilla Developer Network">

給你的網(wǎng)站添加自定義圖標(biāo)

為了進(jìn)一步豐富你的網(wǎng)站設(shè)計(jì)，你可以在元數(shù)據(jù)中添加對自定義圖標(biāo)的引用，這些引用將在特定上下文中顯示。

favicon這個(gè)不起眼的圖標(biāo)已經(jīng)存在很多很多年了，16 x 16 像素是這種圖標(biāo)的第一種類型。你可以看見這些圖標(biāo)出現(xiàn)在瀏覽器每一個(gè)打開的頁面的標(biāo)簽頁中，以及在書簽面板的書簽頁面中。

頁面添加圖標(biāo)的方式有：

  1. 將其保存在與網(wǎng)站的索引頁面相同的目錄中，以.ico格式保存（大多數(shù)瀏覽器將支持更通用的格式，如.gif或.png，但使用ICO格式將確保它能在如Internet Explorer 6一樣久遠(yuǎn)的瀏覽器顯示）。
  2. 將以下行添加到HTML <head>中以引用它： 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

現(xiàn)代瀏覽器在各種地方使用favicons，例如在打開的頁面標(biāo)簽頁和書簽面板中的書簽頁面。下面是一個(gè)favicon出現(xiàn)在書簽面板中的例子：

還有很多其他的圖標(biāo)類型可以考慮。例如，你可以在MDN首頁的源代碼中找到:

<!-- third-generation iPad with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="144x144"  rel="external nofollow" target="_blank" ><!-- iPhone with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="114x114"  rel="external nofollow" target="_blank" ><!-- first- and second-generation iPad: --><link rel="apple-touch-icon-precomposed" sizes="72x72"  rel="external nofollow" target="_blank" ><!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --><link rel="apple-touch-icon-precomposed"  rel="external nofollow" target="_blank" ><!-- basic favicon --><link rel="shortcut icon"  rel="external nofollow" target="_blank" >

這些注釋解釋了每個(gè)圖標(biāo)的用途 - 這些元素涵蓋的東西提供一個(gè)高分辨率圖標(biāo)，這些高分辨率圖標(biāo)在網(wǎng)站保存到iPad的主屏幕時(shí)使用。

不用急于現(xiàn)在去實(shí)現(xiàn)所有這些類型的圖標(biāo) - 這是一個(gè)相當(dāng)高級的功能，你無需在此課程中進(jìn)一步學(xué)習(xí)這些知識(shí)。這里的主要目的是讓你提前了解有這一樣?xùn)|西以防當(dāng)你瀏覽其他網(wǎng)站的源代碼時(shí)不理解源代碼的含義。

將HTML中應(yīng)用CSS和JavaScript

如今，幾乎你使用的所有網(wǎng)站都會(huì)使用 CSS 讓網(wǎng)頁更加炫酷，使用 JavaScript 讓網(wǎng)頁有交互功能，比如視頻播放器，地圖，游戲等。這些應(yīng)用在網(wǎng)頁中很常見，他們分別使用<link>元素和<script>元素。

  • <link>元素始終位于文檔的開頭。這需要兩個(gè)屬性，rel ="stylesheet"，表明這是文檔的樣式表，而href包含樣式表文件的路徑： 

    <link rel="stylesheet" href="my-css-file.css">

  • <script>部分沒必要非要放在文檔頭部；實(shí)際上，把它放在文檔的尾部（在</body> 標(biāo)簽之前）是一個(gè)更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經(jīng)解析了HTML內(nèi)容（如果腳本加載某個(gè)不存在的元素，瀏覽器會(huì)報(bào)錯(cuò)）。 

    <script src="my-js-file.js"></script>

    注意：<script> 元素可能看起來像一個(gè)空元素，但它不是，因此需要一個(gè)結(jié)束標(biāo)記。 你也可以選擇將腳本放在<script> 元素中，而不是指向外部腳本文件。

主動(dòng)：在網(wǎng)頁中應(yīng)用CSS和JavaScript

  1. 開始操作之前， 先拷貝我們的 meta-example.html， script.js 和 style.css 文件，并把它們保存到本地電腦的同一目錄下，確保使用了正確的文件名和文件格式
  2. 使用瀏覽器和文字編輯器同時(shí)打開你的HTML文件。
  3. 根據(jù)上面的信息，添加<link>和<script>部分到你的HTML文件中，這樣你的HTML就可以應(yīng)用CSS和JavaScript了。

如果按照上述步驟正確地執(zhí)行，當(dāng)你保存HTML文件并重新刷新瀏覽器時(shí)，你會(huì)發(fā)現(xiàn)頁面已經(jīng)變樣了：

  • 在頁面中添加了一個(gè)空列表?，F(xiàn)在當(dāng)你點(diǎn)擊列表中的任何地方，瀏覽器會(huì)彈出一個(gè)對話框要求你為新列表項(xiàng)輸入一些文本內(nèi)容。當(dāng)你點(diǎn)擊OK按鈕，剛剛那個(gè)新的列表項(xiàng)會(huì)添加到頁面上，當(dāng)你點(diǎn)擊那些已有的列表項(xiàng)，會(huì)彈出一個(gè)對話框允許你修改列表項(xiàng)的文本。
  • CSS使頁面背景變成了綠色，文本變得大了一點(diǎn)。它還將JavaScript添加到頁面中的一些內(nèi)容進(jìn)行了樣式化（帶有黑色邊框的紅色條是CSS添加到j(luò)s生成的列表中的樣式）。
注意：如果你在本練習(xí)中遇到困難，無法正常應(yīng)用的CSS和JavaScript，嘗試查看一下我們的css-and-js.html示例頁面。

為文檔設(shè)定主語言

最后，值得一提的是，你可以（而且確實(shí)應(yīng)該）為你的站點(diǎn)設(shè)定語言。這個(gè)可以通過添加 lang屬性到HTML開始標(biāo)簽中來實(shí)現(xiàn)（參考 meta-example.html ），如下所示：

<html lang="en-US">

這在許多方面是有用的。如果你的HTML文檔的語言設(shè)置好了，那么你的HTML文檔就會(huì)被搜索引擎更有效的索引（例如，允許它在特定于語言的結(jié)果中顯示正確），對于那些使用屏幕閱讀器的視覺障礙人士很有用（例如，法語和英語中都有“six”這個(gè)單詞，但發(fā)音卻完全不同。)

你還可以將文檔的分段設(shè)置為不同的語言。例如，我們可以把日語部分設(shè)置為日語，如下所示：

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

這些代碼由 ISO 639-1 標(biāo)準(zhǔn)定義。有關(guān)詳情，請參閱 HTML和XML中的語言標(biāo)記。

總結(jié)

已經(jīng)到了我們快速學(xué)習(xí)HTML head標(biāo)簽的尾聲 — 你還能學(xué)到更多相關(guān)的，但是現(xiàn)階段詳盡的講的太多會(huì)無聊且迷惑，我們只希望你現(xiàn)在在這學(xué)到最基本的概念！下一篇我們將要學(xué)習(xí)HTML 文本基礎(chǔ)。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)