DIV CSS 佈局教程網

3.2 head標簽
編輯:HTML入門知識     

我們在“HTML基本結構”這一小節論述了HTML的文檔結構,也大概說了<head>標簽的作用。上一節已經說過,<head>標簽是比較特殊的,只有一些比較特殊的標簽才能放在<head>標簽內,其他大部分標簽都是放在body標簽內。

這一節課可能比較抽象,對於初學者也缺乏實操性,因為這幾個標簽一般都是“前端學習中期”或者“建站時期”才用得到,一般讀者在剛剛接觸HTML的過程中,實際用到並不多。但是為什麼要在課程初給大家講解<head>標簽呢?這也是讓大家有一個很流暢的學習思路,先把“頁頭”學了,然後再學“頁身”。這一小節大家如果只需要記得<head>標簽的內部標簽有什麼,都有什麼用就足夠了,如果你實在記不住,至少也要有個大概印象。等到我們把整一套前端教程學完,我們再回過頭來看這一節,我們會受益匪淺的。

一般來說,只有6個標簽能放在<head>標簽內:

① <title>;

② <meta>;

③ <link>;

④ <style>;

⑤ <script>

⑥ <base>;

一、<head>標簽內的<title>標簽

在上一節我們知道,<title>標簽唯一的作用就是定義網頁的標題,標題的內容都是放在<title>標簽內,如本節課頁面標題是:

<title>HTML head標簽_HTML入門教程_ 學習網</title>

大家在浏覽器可以看到本頁的標題效果

二、<head>標簽內的<meta>標簽

<meta>標簽又叫“元信息標簽”,是<head>標簽內的一個輔助性標簽。<meta>標簽提供的信息不顯示在頁面中,一般用來定義頁面的關鍵字、頁面的描述等,以方便搜索引擎蜘蛛(如百度蜘蛛、谷歌蜘蛛)來搜索到你這個頁面的信息。通俗點說,meta標簽就是用來告訴“搜索蜘蛛”這個頁面是干嘛的。

:在互聯網中,我們一般很形象地稱搜索引擎為“搜索蜘蛛”或“搜索機器人”。

meta標簽有兩個重要的屬性name和http-equiv。

1、meta標簽name屬性

我們先看一個實例:

 
<head>    
    <!--網頁關鍵字-->
    <meta  name="keywords" content=" 學習網"/>
    <!--網頁描述-->
    <meta  name="description" content=" 學習網是一個富有活力的技術學習網站"/>
    <!--本頁作者-->
    <meta  name="author" content="helicopter">
    <!--版權聲明-->
    <meta  name="copyright" content="本站所有教程均為原創,版權所有,禁止轉載。否則將追究法律責任。"/>
    </head>

下面我們來總結一下meta標簽name屬性的主要屬性值:

meta標簽name主要屬性值及其作用 name屬性值 說明 keywords 網頁的關鍵字(關鍵字可以是多個,而不僅僅是一個) description 網頁的描述 author 網頁的作者 copyright 版權信息

上面只是列舉了最常用的meta標簽的name屬性值,而name屬性值遠遠不止以上那幾個,對於初學者,我們僅僅了解上面幾個就完全足夠了。

2、meta標簽http-equiv屬性

學習meta標簽的http-equiv屬性,我們只需要了解它的兩個作用就行了:

一,定義頁面所使用的語言

二,實現頁面的自動刷新跳轉

(1)定義頁面所使用的語言

語法:

 
<head>
    <meta  http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>

說明:

這段代碼告訴浏覽器該頁面所使用的字符集是gb2312,即國際漢字碼。我們不需要記住,只需要了解就行了。

(2)頁面自動跳轉

語法:

 
<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>標簽

<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>標簽

<head>標簽內的<script>標簽用於定義頁面的腳本。在“jQuery入門教程”我們會詳細給大家介紹,在“HTML入門教程”中我們不需要深入探究。

語法:

 
<head>
    <script type="text/javascript">
        alert(" 學習網HTML入門教程!");
    </script>
</head>
                        

五、<head>標簽內的<link>標簽

<head>標簽內的<link>標簽用於外部文件的鏈接,一般用於鏈接外部CSS樣式表文件和JS文件。<link>標簽是屬於“CSS入門課程”的內容,在“HTML入門教程”中我們不需要深入探究。

語法:

 
<head>
    <link  rel="stylesheet"  type="text/css"  title="temp"  href="/temp.css/">
</head>
                        

六、<head>標簽內的<base>標簽

<head>標簽內的<base>標簽為整個頁面定義所有鏈接的基礎定位,其主要的作用是為了確保文檔中所有的相對URL,都可以被分解成正確的文檔地址,使在文檔本身被移動或重命名的情況下也可以正確解析。

語法:

 
<head>
    <base  href="http://lvyestudy"/>
</head>
                        

<base>標簽經常使用在創建文檔集合中,為了不破壞文檔中任何鏈接,使用者通過在每個文檔中放置正確的<base>標簽,便可以再目錄甚至服務器之間移動整個文檔集合。

:<base>標簽用得非常少,可以幾乎忽略。

總結

1、<head>標簽內部標簽

<head>標簽內部標簽 <head>內部標簽 說明 <title> 定義網頁的標題 <meta> 定義網頁的基本信息(供搜索引擎) <style> 定義CSS樣式 <link> 鏈接外部CSS文件或腳本文件 <script> 定義腳本語言 <base> 定義頁面所有鏈接的基礎定位

這些標簽不記住沒關系,感性認知即可。以後在碰到的時候至少要有一個印象。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved