明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML之head上端的完成

發(fā)表時間：2023-09-12 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本文主要為大家分享一篇HTML之head頭部的實現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧。HTML頭部head元素用于定義文檔的頭部信息，出現(xiàn)在 <head>...</head> 標(biāo)簽之間的內(nèi)容，是文檔的頭部信息。頭部定義的內(nèi)容不會在瀏覽器窗...
本文主要為大家分享一篇HTML之head頭部的實現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧。

HTML頭部

head元素用于定義文檔的頭部信息，出現(xiàn)在 <head>...</head> 標(biāo)簽之間的內(nèi)容，是文檔的頭部信息。頭部定義的內(nèi)容不會在瀏覽器窗口的正文部分顯示出來。

head元素比較特殊，只有一些特定的標(biāo)簽才允許放在 <head> 標(biāo)簽內(nèi)，它們分別是 <title>、<base>、<meta>、<scirpt>、<link>、<style>，接下來對這些標(biāo)簽進(jìn)行分別介紹。

<title>標(biāo)簽

<title>標(biāo)簽的唯一作用，就是定義頁面的標(biāo)題，標(biāo)題是對當(dāng)前頁面核心內(nèi)容的一個簡短的、概括性描述。如：

<title> Hello world! </title>

在大多數(shù)瀏覽器中，頁面的標(biāo)題被顯示在瀏覽器窗口或標(biāo)簽頁的標(biāo)題欄，還會出現(xiàn)在訪問者瀏覽歷史列表和書簽中。

更重要的是，搜索引擎會通過頁面的標(biāo)題來大致了解頁面的內(nèi)容，并將頁面的標(biāo)題作為搜索結(jié)果中每一個條目的鏈接文本，也是判斷搜索結(jié)果中頁面相關(guān)度的重要因素。因此，頁面標(biāo)題是SEO的重要內(nèi)容，一個好的頁面標(biāo)題可以提升搜索引擎的結(jié)果排名，并能獲得更好的用戶體驗。

<base>標(biāo)簽

<base>標(biāo)簽是一個單標(biāo)簽，它為頁面上的所有鏈接規(guī)定默認(rèn)地址和默認(rèn)目標(biāo)窗口，并通過 href 屬性設(shè)置默認(rèn)URL地址，通過 target 屬性設(shè)置默認(rèn)目標(biāo)窗口。

規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)窗口后，點擊頁面上的任何鏈接時：對未帶http的鏈接，瀏覽器會在地址前插入base中 href 設(shè)置的URL地址；對未設(shè)置 target 屬性的鏈接，會按base中 target 設(shè)置的目標(biāo)打開窗口。如：

<!DOCTYPE html>
<html>
<head>
<base href="http://www.abc.wcom
<body>
<a href="http://www.abc.com/ ">首頁</a>
<a href="bbs/index.html" target="_self ">論壇</a>
</body>
</html>

上述代碼中，表示在新窗口打開鏈接。

“首頁”的鏈接帶有http，未設(shè)置target，會在新窗口打開新網(wǎng)站�！罢搲钡逆溄游磶ttp，但設(shè)置了target屬性，會在地址前插入http://www.abc.com/

<base>標(biāo)簽的主要作用，是確保網(wǎng)頁中所有的相對URL都可以被解析為正確的地址，以便在文檔被移動的情況下，所有的相對URL都能夠被正確解析。

<meta>標(biāo)簽

<meta>標(biāo)簽又叫“元數(shù)據(jù)標(biāo)簽”，是網(wǎng)頁頭部的一個輔助性標(biāo)簽，用于為網(wǎng)頁定義元數(shù)據(jù)（metadata）信息，一般用來定義頁面的關(guān)鍵字、頁面的描述等。

<meta>標(biāo)簽提供的信息對用戶不可見，也不會顯示在頁面上，但卻對搜索引擎可見，可以方便搜索引擎蜘蛛搜索到這個頁面上的信息。因此，這些信息都是SEO的重要內(nèi)容，可以大大提高網(wǎng)站被搜索引擎搜索到的可能性。

<meta>標(biāo)簽共有兩個重要屬性，分別是 name 屬性和 http-equiv 屬性，并通過 name 或 http-equiv屬性來指定元數(shù)據(jù)的類型，通過 content 來指定元數(shù)據(jù)的內(nèi)容，不同的元數(shù)據(jù)實現(xiàn)了不同的網(wǎng)頁功能。

1、name屬性

name屬性主要用于描述網(wǎng)頁，最常見的就是描述網(wǎng)頁的關(guān)鍵字、網(wǎng)頁內(nèi)容描述、搜索引擎向?qū)�、作者、版�?quán)聲明等，以便搜索引擎對網(wǎng)頁的信息進(jìn)行查找和分類。如：

<head>
<meta name="keywords" content="HTML, CSS, RWD" />
<meta name="description" content="Study HTML, CSS, RWD for free" />
<meta name="robots" content="all" />
<meta name="author" content="歪脖網(wǎng), www.waibo.wang" />
<meta name="copyright" content="創(chuàng)意共享，只要保持署名和非商用，可以自由轉(zhuǎn)載" />
</head>

name屬性的主要取值及功能見表 1?1：

表 1?1 name屬性的取值及功能

360截圖20180329140213938.jpg

2、http-equiv屬性

顧名思義，http-equiv 就相當(dāng)于HTTP頭部的作用，用于向瀏覽器提供一些有用的信息，以幫助瀏覽器正確和精確地顯示網(wǎng)頁內(nèi)容。

http-equiv屬性主要用定義網(wǎng)頁的編碼字符集、刷新頻率、網(wǎng)頁的有效期等：

1）網(wǎng)頁的編碼字符集

在HTML4中，通過Content-Type屬性值來指定文件的媒體格式類型（MIME類型）和所使用的編碼字符集，瀏覽器將以此來決定以什么形式、什么編碼來讀取這個文件，并顯示文件的內(nèi)容。

HTML文件的MIME類型固定為text/html，而編碼字符集可以根據(jù)需要來指定。如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

到了HTML5，一切化繁為簡，只需在 meta 元素中，直接使用 charset 屬性來定義網(wǎng)頁所使用的編碼字符集即可。如：

<meta charset="utf-8" />

在HTML5中，上述兩種方式均有效，但只能使用一種，不能同時混合使用兩種方式。并且，推薦使用 utf-8 編碼字符集。

2）刷新頻率Refresh

通過 refresh 屬性值來指定讓網(wǎng)頁多長時間（秒）刷新自己，或在多長時間后自動跳轉(zhuǎn)到指定的網(wǎng)頁。如，讓網(wǎng)頁在當(dāng)前頁面停留 5 秒后，自動跳轉(zhuǎn)到 http://www.abc.com/：

<meta http-equiv="refresh" content="5; url=http://www.abc.com/" />

3）網(wǎng)頁的有效期

通過Expires屬性值來指定網(wǎng)頁在緩存中的過期時間，一旦網(wǎng)頁過期，必須從服務(wù)器上重新加載。時間必須使用GMT格式（格林威治時間格式）。如：

<meta http-equiv="Expires" content="Mon, 20 Jul 2099 23:00:00 GMT" />

說明：

網(wǎng)頁頭部的這些元素中，title、keywords、description的作用非常重要，因為搜索引擎的機器人會自動檢索頁面的keywords和decription，并將其加入到自己的數(shù)據(jù)庫，再根據(jù)關(guān)鍵詞的密度對網(wǎng)站進(jìn)行排序。

對于任何站長而言，可能都有同樣的感受，無論網(wǎng)站做得再精彩，在浩如煙海的網(wǎng)絡(luò)世界中，也如一葉扁舟，不為人知。

人們往往忙于在搜索引擎中提交自己的網(wǎng)站，或在知名網(wǎng)站加入自己網(wǎng)站的鏈接，或在各大論壇中發(fā)帖子宣傳自己的網(wǎng)站，忙得不亦樂乎，卻忽視了 <meta>標(biāo)簽的強大功效。

因此，要讓網(wǎng)站獲得很好的排名，必須充分利用 meta標(biāo)簽，設(shè)置好每個頁面的 keywords 和 decription，來增加網(wǎng)站對各大搜索引擎的曝光率，提高網(wǎng)站的訪問量，進(jìn)而提升網(wǎng)站的收益。

樣式表

樣式表，即CSS（Cascading Style Sheet層疊樣式表），用它來控制網(wǎng)頁的表現(xiàn)，如果要讓網(wǎng)站看起來很吸引人，就離不開CSS。

在HTML文檔的頭部，可以通過兩種方式來為網(wǎng)頁定義樣式：

(1) 使用link元素

在HTML文檔的頭部，可以通過link元素鏈接到外部樣式表，讓網(wǎng)頁應(yīng)用該外部樣式表定義的樣式規(guī)則。

在link 標(biāo)簽中，通過的 rel 屬性來定義本HTML文檔與被鏈接文檔之間的關(guān)系，rel = "stylesheet" 表明引入的文件是樣式表；通過href屬性定義外部資源（即CSS文件）的URL地址，URL可以是相對路徑，也可以是相對路徑，相對路徑是相對于本HTML文檔而言的。

可以在一個HTML文檔中添加多個 link 元素，讓它們分別指向不同的樣式文件，就可以給一個網(wǎng)頁添加多個樣式表。

由于 link 元素為空元素，它只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽，所以，要在開始標(biāo)簽的結(jié)尾處加上 / 來結(jié)束該元素。如：

<link rel="stylesheet" href="reset.css" />

上述代碼表示，為本文檔引入文件名稱為 reset.css 的外部樣式表，該樣式表文件與本文檔位于相同目錄下。

(2) 使用style元素

可以在HTML文檔的頭部插入一個 style 元素，讓網(wǎng)頁應(yīng)用該 style 元素中定義的樣式規(guī)則。如：

<style>
body { background-color:yellow; }
p { color:blue; }
</style>

上述代碼表示，指定本HTML文檔的背景顏色為黃色（yellow）、本HTML文檔中的所有段落的文本顏色為藍(lán)色（blue）。

腳本

在HTML文檔中，可以通過Javascript 腳本主要用來定義特殊的行為，但Javascript并不是必需的。

大多數(shù)情況下，Javascript 都是在由HTML和CSS 構(gòu)建的核心體驗的基礎(chǔ)上，增強訪問者的體驗，主要用來增強頁面的交互性，如實現(xiàn)表單驗證、動態(tài)顯示隱藏內(nèi)容、加載數(shù)據(jù)并動態(tài)地更新頁面、操作 audio 和 video 元素控件等等。

HTML文檔中，有兩個用于標(biāo)識腳本的元素，它們是 script 元素和 noscript 元素：

1、script 元素

script 元素既可以直接在頁面中嵌入Javascript腳本，也可以從外部文件加載腳本。

(1) 嵌入腳本

就是直接在 script 元素中書寫Javascript代碼。如：

<script>
   alert("Hello, world!");
</script>

一個HTML文檔，也支持多個 script 元素。這種方式定義的腳本，只對本文檔有效，并且腳本代碼需要放在HTML文件，而不是腳本文件中，腳本通常會散落在多個地方，不便于維護(hù)，也容易出錯。所以，不推薦使用這種方法。

(2) 加載外部腳本

通過 script 元素的 src 屬性指定外部腳本文件的URL，可以把外部腳本加載到本HTML文檔中。URL可以是絕對路徑，也可以是相對路徑。相對路徑是相對本HTML文檔而言的。

在一個HTML文檔中，可以添加多個 script 元素，讓它們分別指向不同的腳本文件，就可以為一個網(wǎng)頁載入多個腳本文件。當(dāng)加載外部腳本時，script 元素必須是空元素，即在開始和結(jié)束標(biāo)簽之間不得有任何內(nèi)容。如：

<script src="engine.js"></script>

上述代碼表示，文檔會載入外部腳本，腳本文件名稱是engine.js，腳本文件與本HTML文檔位于相同目錄下。

這種方式是最好的引入的腳本方法，多個頁面可以加載同一個腳本文件。并且，腳本存放在單獨的文件中，需要對腳本進(jìn)行修改時，只需編輯一個文件，而不是在各個頁面中更新相似的腳本，維護(hù)起來極其方便。

2、noscript 元素

noscript 元素是一個檢測工具，當(dāng)檢測到 script 中的腳本內(nèi)容無法執(zhí)行時，即如果瀏覽器不支持Javascript或用戶禁用了Javascript時，就會顯示 noscript 元素中的文本。如：

<noscript>您的瀏覽器不支持Javascript</noscript>

注意：

默認(rèn)情況下，瀏覽器會按照腳本在HTML中出現(xiàn)的順序，依次對每個腳本進(jìn)行下載（對于外部腳本）、解析和執(zhí)行。

在處理腳本的過程中，瀏覽器既不會下載該 script 元素后面出現(xiàn)的內(nèi)容，也不會呈現(xiàn)這些內(nèi)容，這稱為阻塞行為（blocking behavior）。

這條規(guī)則對嵌入腳本和外部腳本都有效�？梢韵胂�，阻塞行為會影響頁面的呈現(xiàn)速度，影響的程度取決于腳本的大小和它執(zhí)行的動作。

因此，建議最好在頁面的最末尾加載腳本，即應(yīng)該盡可能地將腳本元素放在</body>的前面，而不是放在 head 元素中。

以上就是HTML之head頭部的實現(xiàn)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。




標(biāo)簽：HTML之head上端的完成