第二章頭部和主體標簽

1、本章內(nèi)容本章內(nèi)容2.1 HTML2.1 HTML標簽與元素標簽與元素2.2 HTML2.2 HTML頭部內(nèi)容頭部內(nèi)容2.3 HTML2.3 HTML主體內(nèi)容主體內(nèi)容2.4 2.4 顏色的設(shè)置顏色的設(shè)置2.1 HTML2.1 HTML標簽與元素標簽與元素HTML 文檔是由文檔是由 HTML 元素構(gòu)成的文本文件元素構(gòu)成的文本文件。HTML 元素是通過使用元素是通過使用 HTML 標簽進行定義的標簽進行定義的。HTML 標簽是用來標記標簽是用來標記 HTML 元素的。元素的。 HTML 標簽被標簽被 符號包圍。符號包圍。 這些包圍的符號叫作尖括號。這些包圍的符號叫作尖括號。 HTML 標簽通常是成對

2、出現(xiàn)的。例如標簽通常是成對出現(xiàn)的。例如 和和 。 位于起始標簽和終止標簽之間的文本是元素的內(nèi)容。位于起始標簽和終止標簽之間的文本是元素的內(nèi)容。 HTML 標簽標簽對大小寫不敏感對大小寫不敏感， 和和 的作用的相同的的作用的相同的 未來未來WEB標準要求標準要求HTML標簽代碼統(tǒng)一采用小寫標簽代碼統(tǒng)一采用小寫標簽標簽元素元素 頭部頭部（Head）主體主體（Body）描述瀏覽器所描述瀏覽器所需的信息需的信息包含所要說明的具包含所要說明的具體內(nèi)容體內(nèi)容 2.2 HTML2.2 HTML頭部內(nèi)容頭部內(nèi)容2.2.1 HTML2.2.1 HTML頭部標簽頭部標簽2.2.2 2.2.2 定義和用法定義和用法

3、2.2.3 2.2.3 定義和用法定義和用法2.2.4 2.2.4 定義和用法定義和用法2.2.1 HTML2.2.1 HTML頭部標簽頭部標簽標簽標簽含義基底網(wǎng)址標簽基底網(wǎng)址標簽基準文字標簽基準文字標簽標題標簽標題標簽元信息標簽元信息標簽樣式標簽樣式標簽外部鏈接標簽外部鏈接標簽?zāi)_本標簽?zāi)_本標簽2.2.2 2.2.2 定義和用法定義和用法定義和用法定義和用法 標簽為標簽為頁面上的所有鏈接規(guī)定默認地址或默認目標頁面上的所有鏈接規(guī)定默認地址或默認目標。通常情況下，瀏覽器會從當前文檔的通常情況下，瀏覽器會從當前文檔的 URL 中提取相應(yīng)的元素來填中提取相應(yīng)的元素來填寫相對寫相對 URL 中的空白。中

4、的空白。使用使用 標簽可以改變這一點。瀏覽器隨后將不再使用當前文標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的檔的 URL，而使用指定的基本，而使用指定的基本 URL 來解析所有的相對來解析所有的相對 URL。這。這其中包括其中包括 、 標簽中的標簽中的 URL?；菊Z法基本語法基本語法：基本語法： 語法解析：語法解析： href屬性指定文檔的基礎(chǔ)屬性指定文檔的基礎(chǔ)URL地址，該屬性在地址，該屬性在標簽中是標簽中是必須存必須存在在的；的；Target屬性定義打開頁面的窗口，取值如表所示：屬性定義打開頁面的窗口，取值如表所示：屬性值描述_parent將網(wǎng)頁加載到包含該鏈接的框架的父框架或窗口

5、中將網(wǎng)頁加載到包含該鏈接的框架的父框架或窗口中_blank將網(wǎng)頁加載到一個新的未命名的瀏覽器窗口中將網(wǎng)頁加載到一個新的未命名的瀏覽器窗口中_self將網(wǎng)頁加載到與鏈接相同的框架或窗口中將網(wǎng)頁加載到與鏈接相同的框架或窗口中_top將網(wǎng)頁加載到整個瀏覽器窗口中，并刪除所有框架將網(wǎng)頁加載到整個瀏覽器窗口中，并刪除所有框架實例（實例（基底網(wǎng)址基底網(wǎng)址.htm.htm）2.2.3 2.2.3 定義和用法定義和用法定義和用法定義和用法 標簽可以設(shè)定基準的文字字體、字號和顏色。標簽可以設(shè)定基準的文字字體、字號和顏色。一旦遇到頁面中其他相關(guān)標簽一旦遇到頁面中其他相關(guān)標簽未定義未定義文字或段落的樣式時，將套用文

6、字或段落的樣式時，將套用基準的文字樣式?；鶞实奈淖謽邮健Ｖ挥兄挥?Internet Explorer 支持支持 標簽。應(yīng)該避免使用該標簽。應(yīng)該避免使用該標簽。標簽。在在 HTML 4.01 中，不贊成使用中，不贊成使用 basefont 元素；在元素；在 XHTML 1.0 Strict DTD 中，不支持中，不支持 basefont 元素元素?；菊Z法基本語法基本語法：基本語法： 語法解析：語法解析： face定義了字體，多種字體間用定義了字體，多種字體間用, 分開；分開；size定義了字定義了字號，號，value取值范圍為取值范圍為17或或-1-7或或+1+7；color定義了顏定義了顏色

7、，色，value值為英文名稱或十六進制代碼。值為英文名稱或十六進制代碼。實例（實例（基準文字基準文字.htm.htm）2.2.4 2.2.4 定義和用法定義和用法定義和用法定義和用法 元素可提供有關(guān)頁面的元信息（元素可提供有關(guān)頁面的元信息（meta-information），比），比如針對搜索引擎和更新頻度的如針對搜索引擎和更新頻度的描述和關(guān)鍵詞描述和關(guān)鍵詞。 標簽位于文檔的頭部，不包含任何內(nèi)容。標簽位于文檔的頭部，不包含任何內(nèi)容。 標簽的屬性定義了與文檔相關(guān)聯(lián)的標簽的屬性定義了與文檔相關(guān)聯(lián)的名稱名稱/值對值對 ?；菊Z法基本語法基本語法：基本語法： 語法解析：語法解析： meta標簽分為兩大

8、部分：標簽分為兩大部分：HTTP標題信息（標題信息（ http-equiv ）和頁面描述信息（）和頁面描述信息（ name ）。）。http-equiv http-equiv 屬性屬性http-equiv 類似于類似于HTTP的頭部協(xié)議，他回應(yīng)給瀏覽器一些有用的信的頭部協(xié)議，他回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確的顯示網(wǎng)頁內(nèi)容。息，以幫助正確和精確的顯示網(wǎng)頁內(nèi)容。使用帶有使用帶有 http-equiv 屬性的屬性的 標簽時，服務(wù)器將把標簽時，服務(wù)器將把名稱名稱/值對值對添加到發(fā)送給瀏覽器的內(nèi)容頭部。添加到發(fā)送給瀏覽器的內(nèi)容頭部。 常見類型有常見類型有content-type（文檔類型）

9、、（文檔類型）、 refresh （刷新）（刷新）expires（日期時間）（日期時間） 、 event（事件）（事件） 等。等。類型一：類型一：content-typecontent-type當服務(wù)器向瀏覽器發(fā)送文檔時，會先發(fā)送許多名稱當服務(wù)器向瀏覽器發(fā)送文檔時，會先發(fā)送許多名稱/值對。雖然有些服值對。雖然有些服務(wù)器會發(fā)送許多這種名稱務(wù)器會發(fā)送許多這種名稱/值對，值對，但是所有服務(wù)器都至少要發(fā)送一個：但是所有服務(wù)器都至少要發(fā)送一個：content-type:text/html。這將告訴瀏覽器準備接受一個。這將告訴瀏覽器準備接受一個 HTML 文檔。文檔。常用編碼類型：常用編碼類型： GB23

10、12 - 簡體中文簡體中文 utf-8 - 簡體中文簡體中文 HZ - 簡體中文（簡體中文（新加坡新加坡） BIG5 - 繁體中文（繁體中文（臺灣臺灣） ISO-8859-1 - 英文英文類型二：類型二：refreshrefresh每隔幾秒鐘后刷新頁面內(nèi)容，不僅能夠完成頁面自身的自動刷新，也每隔幾秒鐘后刷新頁面內(nèi)容，不僅能夠完成頁面自身的自動刷新，也可以實現(xiàn)頁面之間的跳轉(zhuǎn)過程。可以實現(xiàn)頁面之間的跳轉(zhuǎn)過程。解析：解析：5為跳轉(zhuǎn)間隔的時間，為跳轉(zhuǎn)間隔的時間，單位為秒單位為秒；url取值為跳轉(zhuǎn)后打開的文件取值為跳轉(zhuǎn)后打開的文件地址，可省略，地址，可省略，默認為當前文檔地址默認為當前文檔地址。類型三：

11、類型三：cache-controlcache-control禁止客戶端瀏覽器緩存網(wǎng)頁內(nèi)容。禁止客戶端瀏覽器緩存網(wǎng)頁內(nèi)容。解析：解析： cache-control為緩存控制，為緩存控制， content中定義了禁止緩存功中定義了禁止緩存功能。能。類型四：類型四：expiresexpires設(shè)定網(wǎng)頁在客戶端瀏覽器緩存的有效期限。設(shè)定網(wǎng)頁在客戶端瀏覽器緩存的有效期限。解析：解析： expires為緩存期限，為緩存期限， content中定義了到期時間，其內(nèi)為標中定義了到期時間，其內(nèi)為標準格式，都使用英文和數(shù)字進行設(shè)定，如：準格式，都使用英文和數(shù)字進行設(shè)定，如： fri, 31 dec 2010 11

12、 40 05 ，則到期時間為，則到期時間為2010年年12月月31日星期五日星期五 上午上午11點點40分分05秒秒。注意：必須使用注意：必須使用GMT的時間格式，或直接設(shè)為數(shù)字的時間格式，或直接設(shè)為數(shù)字(表示多少表示多少秒秒后過后過期期)。 類型五：類型五：轉(zhuǎn)場效果轉(zhuǎn)場效果(IE)(IE)轉(zhuǎn)場效果即網(wǎng)頁過渡，轉(zhuǎn)場效果即網(wǎng)頁過渡，進入或離開進入或離開網(wǎng)頁時的切換效果。網(wǎng)頁時的切換效果。解析：解析：event為轉(zhuǎn)場效果事件名稱，取值有：為轉(zhuǎn)場效果事件名稱，取值有： page-enter / page-exit (進入進入/退出本網(wǎng)頁時有網(wǎng)頁過渡效果退出本網(wǎng)頁時有網(wǎng)頁過渡效果)；duration設(shè)

13、定轉(zhuǎn)場效果持續(xù)時設(shè)定轉(zhuǎn)場效果持續(xù)時間，間，最大可設(shè)為最大可設(shè)為30秒秒；transition為過渡效果的編號，可設(shè)置為過渡效果的編號，可設(shè)置24種切種切換效果，換效果，取值范圍為取值范圍為023。過渡效果表過渡效果表效果效果效果編號效果編號效果效果效果編號效果編號盒狀收縮盒狀收縮0向左擦除向左擦除6盒狀展開盒狀展開1向右擦除向右擦除7圓形收縮圓形收縮2垂直百葉窗垂直百葉窗8圓形展開圓形展開3水平百葉窗水平百葉窗9向上擦除向上擦除4橫向棋盤式橫向棋盤式10向下擦除向下擦除5縱向棋盤式縱向棋盤式11過渡效果表（續(xù)表）過渡效果表（續(xù)表）效果效果效果編號效果編號效果效果效果編號效果編號溶解溶解12階梯

14、狀向左上展開階梯狀向左上展開18左右向中部收縮左右向中部收縮13階梯狀向右下展開階梯狀向右下展開19中部向左右展開中部向左右展開14階梯狀向右上展開階梯狀向右上展開20上下向中部收縮上下向中部收縮15隨機線條隨機線條21中不向上下展開中不向上下展開16隨機垂直線條隨機垂直線條22階梯狀向左下展開階梯狀向左下展開17隨機隨機23類型六：類型六：淡入淡出效果淡入淡出效果(IE)(IE)實現(xiàn)網(wǎng)頁以淡入淡出效果進行切換。實現(xiàn)網(wǎng)頁以淡入淡出效果進行切換。解析：解析：event為轉(zhuǎn)場效果事件名稱，取值有：為轉(zhuǎn)場效果事件名稱，取值有： page-enter / page-exit (進入進入/退出本網(wǎng)頁時有

15、網(wǎng)頁過渡效果退出本網(wǎng)頁時有網(wǎng)頁過渡效果)；duration設(shè)定轉(zhuǎn)場效果持續(xù)時設(shè)定轉(zhuǎn)場效果持續(xù)時間，間，最大可設(shè)為最大可設(shè)為30秒秒；。；。name name 屬性屬性name屬性主要用于描述網(wǎng)頁內(nèi)容。屬性主要用于描述網(wǎng)頁內(nèi)容。與之對應(yīng)的屬性值為與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的機器人查找信息和分類信息用的 。 常見類型有常見類型有Keywords 、 description 、 robots 、 author 、generator等。等。類型一：類型一：KeywordsKeywordskeywords

16、用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么 。便于搜索引擎搜索網(wǎng)頁，關(guān)鍵字之間要用逗號分割。便于搜索引擎搜索網(wǎng)頁，關(guān)鍵字之間要用逗號分割。Google建議建議Keywords的字符數(shù)串不超過的字符數(shù)串不超過20個個 。 類型二：類型二：descriptiondescription description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容 。Description詳細信息（詳細信息（Google建議建議Description的字符數(shù)不超過的字符數(shù)不超過200個）。個）。 類型三：類型三：robotsrobotsrobots用來告訴搜索機

17、器人哪些頁面需要索引，哪些頁面不需要索引。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 content的參數(shù)有的參數(shù)有all,none,index,noindex,follow,nofollow，默認是，默認是all。 并不是所有的搜索引擎都支持這個并不是所有的搜索引擎都支持這個tag，它們共同支持一個功能更強的，它們共同支持一個功能更強的，叫做叫做robots.txt的文本文件來達到上述功能。的文本文件來達到上述功能。 類型四：類型四：authorauthor說明：標注網(wǎng)頁的作者說明：標注網(wǎng)頁的作者 。舉例：舉例： 。 類型五：類型五：generatorgenerator說明：標

18、注設(shè)計網(wǎng)頁的編輯器說明：標注設(shè)計網(wǎng)頁的編輯器 。舉例：舉例： 。 綜合應(yīng)用綜合應(yīng)用2.3 HTML2.3 HTML主體內(nèi)容主體內(nèi)容2.3.1 2.3.1 主體標簽主體標簽2.3.2 2.3.2 正文顏色正文顏色2.3.3 2.3.3 鏈接顏色鏈接顏色2.3.4 2.3.4 背景背景2.3.5 2.3.5 邊距邊距2.3.1 2.3.1 主體標簽主體標簽定義和用法定義和用法在在和和中放置的是頁面中所有的內(nèi)容，如中放置的是頁面中所有的內(nèi)容，如圖片、文圖片、文字、表格、表單、超鏈接字、表格、表單、超鏈接等設(shè)置。等設(shè)置。標簽有自己的屬性，標簽有自己的屬性，設(shè)置設(shè)置 標簽內(nèi)的屬性標簽內(nèi)的屬性，可控制，可

19、控制整個頁面的顯示方式。整個頁面的顯示方式。基本語法：基本語法：。語法解析：語法解析：attribute指指body標簽的屬性名，如定義文字顏色、背標簽的屬性名，如定義文字顏色、背景顏色、背景圖片等。景顏色、背景圖片等。BodyBody標簽屬性表標簽屬性表屬性屬性描述描述text設(shè)置頁面文字的顏色設(shè)置頁面文字的顏色link設(shè)置初始的鏈接顏色設(shè)置初始的鏈接顏色alink設(shè)置鼠標單擊時的鏈接顏色設(shè)置鼠標單擊時的鏈接顏色vlink設(shè)置訪問后的鏈接顏色設(shè)置訪問后的鏈接顏色background設(shè)置頁面背景圖像（在設(shè)置頁面背景圖像（在css中設(shè)置重復(fù)屬性）中設(shè)置重復(fù)屬性）bgcolor設(shè)置頁面背景顏色設(shè)置

20、頁面背景顏色bgproperties設(shè)置頁面背景圖像為固定，不隨頁面的滾動而滾動設(shè)置頁面背景圖像為固定，不隨頁面的滾動而滾動BodyBody標簽屬性表（續(xù)）標簽屬性表（續(xù)）屬性屬性描述描述leftmargin設(shè)置頁面的左邊距設(shè)置頁面的左邊距topmargin設(shè)置頁面的上邊距設(shè)置頁面的上邊距rightmargin設(shè)置頁面的右邊距設(shè)置頁面的右邊距bottommargin設(shè)置頁面的下邊距設(shè)置頁面的下邊距2.3.2 2.3.2 正文顏色正文顏色設(shè)定頁面文字顏色的設(shè)定頁面文字顏色的body標簽的屬性：標簽的屬性：text 。作用范圍：作用范圍：頁面中所有的未單獨進行定義顏色的文字頁面中所有的未單獨進行定

21、義顏色的文字。 color_value取值為取值為顏色英文單詞或十六進制值顏色英文單詞或十六進制值，如，如 red / #FF0000 。2.3.3 2.3.3 鏈接顏色鏈接顏色與頁面鏈接顏色相關(guān)的與頁面鏈接顏色相關(guān)的body標簽的屬性有：標簽的屬性有：link、alink 、 vlink 。link 定義定義默認默認的沒有點擊過的初始鏈接文字顏色，的沒有點擊過的初始鏈接文字顏色， alink 定義定義鼠標點擊鏈接文字時的鏈接文字顏色，鼠標點擊鏈接文字時的鏈接文字顏色，vlink定義點擊過后的鏈接文字定義點擊過后的鏈接文字顏色顏色。 color_value取值為取值為顏色英文單詞或十六進制值顏

22、色英文單詞或十六進制值，如，如 red / #FF0000 。2.3.4 2.3.4 背景背景與頁面背景相關(guān)的與頁面背景相關(guān)的body標簽的屬性有：標簽的屬性有： bgcolor 、 background 、 bgproperties 。bgcolor定義定義頁面的頁面的顏色，顏色， background定義頁面的背景圖像，定義頁面的背景圖像， bgproperties定義背景屬性定義背景屬性。 color_value取值為取值為顏色英文單詞或十六進制值顏色英文單詞或十六進制值，如，如“ red / #FF0000 ” ；img_file_url指圖片文件所在的路徑，即指圖片文件所在的路徑，即

23、指向圖像文件所指向圖像文件所在位置的地址在位置的地址；通過；通過bgproperties 定義了背景屬性，定義了背景屬性，fixed設(shè)為固定設(shè)為固定效果。效果。2.3.5 2.3.5 邊距邊距與頁面邊距相關(guān)的與頁面邊距相關(guān)的body標簽屬性有：標簽屬性有： leftmargin 、 rightmargin 、 topmargin、bottommargin 。leftmargin 、 rightmargin 、 topmargin、bottommargin分別定義分別定義頁面左邊距、右邊距、上邊距、下邊距，即內(nèi)容和瀏覽器左部、右部、頁面左邊距、右邊距、上邊距、下邊距，即內(nèi)容和瀏覽器左部、右部、上

24、部、下部邊框之間的距離上部、下部邊框之間的距離。 value取值為數(shù)字，默認單位為像素。取值為數(shù)字，默認單位為像素。2.4 2.4 顏色的設(shè)置顏色的設(shè)置1、顏色值：關(guān)鍵字（英文單詞）或、顏色值：關(guān)鍵字（英文單詞）或RGB格式的數(shù)字格式的數(shù)字2、顏色：由、顏色：由 red 、 green 、 blue 三原色組成三原色組成3、在、在 HTML 中還可用中還可用十六進位數(shù)十六進位數(shù)置義顏色置義顏色4、HTML 分別給予分別給予兩個兩個十六進位去置義三原色，每個原色可有十六進位去置義三原色，每個原色可有 256 種彩種彩度，故三原色可混合成度，故三原色可混合成16777216（256*256*256）種顏色。）種顏色。常見的顏色名稱常見的顏色名稱顏色名稱顏色名稱顏色值顏色值BlackWhiteGreenYellowPurpleSilverMaroonTeal(黑黑)(白白)(綠綠)(黃黃)(紫紫)(銀銀)(褐褐)(藍綠藍綠)#000000