我們在“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>標簽內部標簽
這些標簽不記住沒關系,感性認知即可。以後在碰到的時候至少要有一個印象。