我們在“HTML基本結構”這一小節論述了HTML的文檔結構,也大概說了<head>標簽的作用。上一節已經說過,<head>標簽是比較特殊的,只有一些比較特殊的標簽才能放在<head>標簽內,其他大部分標簽都是放在body標簽內。
這一節課可能比較抽象,對於初學者也缺乏實操性,因為這幾個標簽一般都是“前端學習中期”或者“建站時期”才用得到,一般讀者在剛剛接觸HTML的過程中,實際用到並不多。但是為什麼要在課程初給大家講解<head>標簽呢?這也是讓大家有一個很流暢的學習思路,先把“頁頭”學了,然後再學“頁身”。這一小節大家如果只需要記得<head>標簽的內部標簽有什麼,都有什麼用就足夠了,如果你實在記不住,至少也要有個大概印象。等到我們把整一套前端教程學完,我們再回過頭來看這一節,我們會受益匪淺的。
一般來說,只有6個標簽能放在<head>標簽內:
① <title>;
② <meta>;
③ <link>;
④ <style>;
⑤ <script>
⑥ <base>;
在上一節我們知道,<title>標簽唯一的作用就是定義網頁的標題,標題的內容都是放在<title>標簽內,如本節課頁面標題是:
<title>HTML head標簽_HTML入門教程_ 學習網</title>
大家在浏覽器可以看到本頁的標題效果
<meta>標簽又叫“元信息標簽”,是<head>標簽內的一個輔助性標簽。<meta>標簽提供的信息不顯示在頁面中,一般用來定義頁面的關鍵字、頁面的描述等,以方便搜索引擎蜘蛛(如百度蜘蛛、谷歌蜘蛛)來搜索到你這個頁面的信息。通俗點說,meta標簽就是用來告訴“搜索蜘蛛”這個頁面是干嘛的。
:在互聯網中,我們一般很形象地稱搜索引擎為“搜索蜘蛛”或“搜索機器人”。
meta標簽有兩個重要的屬性name和http-equiv。
我們先看一個實例:
<head> <!--網頁關鍵字--> <meta name="keywords" content=" 學習網"/> <!--網頁描述--> <meta name="description" content=" 學習網是一個富有活力的技術學習網站"/> <!--本頁作者--> <meta name="author" content="helicopter"> <!--版權聲明--> <meta name="copyright" content="本站所有教程均為原創,版權所有,禁止轉載。否則將追究法律責任。"/> </head>
下面我們來總結一下meta標簽name屬性的主要屬性值:
上面只是列舉了最常用的meta標簽的name屬性值,而name屬性值遠遠不止以上那幾個,對於初學者,我們僅僅了解上面幾個就完全足夠了。
學習meta標簽的http-equiv屬性,我們只需要了解它的兩個作用就行了:
一,定義頁面所使用的語言
二,實現頁面的自動刷新跳轉
語法:
<head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> </head>
說明:
這段代碼告訴浏覽器該頁面所使用的字符集是gb2312,即國際漢字碼。我們不需要記住,只需要了解就行了。
語法:
<head> <meta http-equiv="refresh" content="6;url=http:/www.baidu.com"/> </head>
舉例:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="refresh" content="6;url=http://www.baidu.com"/> </head> <body> <p>這個頁面在6秒之後自動跳轉到百度首頁</p> </body> </html>
<meta>標簽對於一般頁面制作者來說,實際意義不大,在前期過程中我們幾乎涉及不到,只有在整站設計開發的實戰中,我們才會用到非常多的meta標簽屬性。讀者只需要了解meta標簽的基本功能就行了,哪怕代碼不會寫都沒關系,以後不會再回過頭來看就行了。
<head>標簽內的<style>標簽用於定義元素的CSS樣式。在“CSS入門課程”我們會詳細給大家介紹,在“HTML入門教程”中我們不需要深入探究。
語法:
<head> <style type="text/css"> <!--這裡寫CSS樣式--> </style> </head>
舉例:
<head> <style type="text/css"> div { font-size:14px; color:red; border:1px solid gray; } </style> </head>
<head>標簽內的<script>標簽用於定義頁面的腳本。在“jQuery入門教程”我們會詳細給大家介紹,在“HTML入門教程”中我們不需要深入探究。
語法:
<head> <script type="text/javascript"> alert(" 學習網HTML入門教程!"); </script> </head>
<head>標簽內的<link>標簽用於外部文件的鏈接,一般用於鏈接外部CSS樣式表文件和JS文件。<link>標簽是屬於“CSS入門課程”的內容,在“HTML入門教程”中我們不需要深入探究。
語法:
<head> <link rel="stylesheet" type="text/css" title="temp" href="/temp.css/"> </head>
<head>標簽內的<base>標簽為整個頁面定義所有鏈接的基礎定位,其主要的作用是為了確保文檔中所有的相對URL,都可以被分解成正確的文檔地址,使在文檔本身被移動或重命名的情況下也可以正確解析。
語法:
<head> <base href="http://lvyestudy"/> </head>
<base>標簽經常使用在創建文檔集合中,為了不破壞文檔中任何鏈接,使用者通過在每個文檔中放置正確的<base>標簽,便可以再目錄甚至服務器之間移動整個文檔集合。
:<base>標簽用得非常少,可以幾乎忽略。
總結1、<head>標簽內部標簽
這些標簽不記住沒關系,感性認知即可。以後在碰到的時候至少要有一個印象。