第二章 頭部和主體標(biāo)簽.ppt

1、第二章 頭部和主體標(biāo)簽,本章內(nèi)容,2.1 HTML標(biāo)簽與元素 2.2 HTML頭部?jī)?nèi)容 2.3 HTML主體內(nèi)容 2.4 顏色的設(shè)置,2.1 HTML標(biāo)簽與元素,HTML 文檔是由 HTML 元素構(gòu)成的文本文件。 HTML 元素是通過使用 HTML 標(biāo)簽進(jìn)行定義的。 HTML 標(biāo)簽是用來(lái)標(biāo)記 HTML 元素的。 HTML 標(biāo)簽被 符號(hào)包圍。 這些包圍的符號(hào)叫作尖括號(hào)。 HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的。例如 和 。 位于起始標(biāo)簽和終止標(biāo)簽之間的文本是元素的內(nèi)容。 HTML 標(biāo)簽對(duì)大小寫不敏感， 和 的作用的相同的 未來(lái)WEB標(biāo)準(zhǔn)要求HTML標(biāo)簽代碼統(tǒng)一采用小寫,示例,標(biāo)簽,元素, ,頭部（Hea

2、d）,主體（Body）,描述瀏覽器所需的信息,包含所要說(shuō)明的具體內(nèi)容,2.2 HTML頭部?jī)?nèi)容,2.2.1 HTML頭部標(biāo)簽 2.2.2 定義和用法 2.2.3 定義和用法 2.2.4 定義和用法,2.2.1 HTML頭部標(biāo)簽,2.2.2 定義和用法,定義和用法 標(biāo)簽為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。 通常情況下，瀏覽器會(huì)從當(dāng)前文檔的 URL 中提取相應(yīng)的元素來(lái)填寫相對(duì) URL 中的空白。 使用 標(biāo)簽可以改變這一點(diǎn)。瀏覽器隨后將不再使用當(dāng)前文檔的 URL，而使用指定的基本 URL 來(lái)解析所有的相對(duì) URL。這其中包括 、 標(biāo)簽中的 URL。,基本語(yǔ)法,基本語(yǔ)法： 語(yǔ)法解析： href屬

3、性指定文檔的基礎(chǔ)URL地址，該屬性在標(biāo)簽中是必須存在的；Target屬性定義打開頁(yè)面的窗口，取值如表所示：,實(shí)例（基底網(wǎng)址.htm）,2.2.3 定義和用法,定義和用法 標(biāo)簽可以設(shè)定基準(zhǔn)的文字字體、字號(hào)和顏色。 一旦遇到頁(yè)面中其他相關(guān)標(biāo)簽未定義文字或段落的樣式時(shí)，將套用基準(zhǔn)的文字樣式。 只有 Internet Explorer 支持 標(biāo)簽。應(yīng)該避免使用該標(biāo)簽。 在 HTML 4.01 中，不贊成使用 basefont 元素；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素。,基本語(yǔ)法,基本語(yǔ)法： 語(yǔ)法解析： face定義了字體，多種字體間用, 分開；size定義

4、了字號(hào)，value取值范圍為17或-1-7或+1+7；color定義了顏色，value值為英文名稱或十六進(jìn)制代碼。,實(shí)例（基準(zhǔn)文字.htm）,2.2.4 定義和用法,定義和用法 元素可提供有關(guān)頁(yè)面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì) 。,基本語(yǔ)法,基本語(yǔ)法： 語(yǔ)法解析： meta標(biāo)簽分為兩大部分：HTTP標(biāo)題信息（ http-equiv ）和頁(yè)面描述信息（ name ）。,http-equiv 屬性,http-equiv 類似于HTTP的頭部協(xié)議，他回應(yīng)給瀏覽器一

5、些有用的信息，以幫助正確和精確的顯示網(wǎng)頁(yè)內(nèi)容。 使用帶有 http-equiv 屬性的 標(biāo)簽時(shí)，服務(wù)器將把名稱/值對(duì)添加到發(fā)送給瀏覽器的內(nèi)容頭部。 常見類型有content-type（文檔類型）、 refresh （刷新）expires（日期時(shí)間） 、 event（事件） 等。,類型一：content-type,當(dāng)服務(wù)器向?yàn)g覽器發(fā)送文檔時(shí)，會(huì)先發(fā)送許多名稱/值對(duì)。雖然有些服務(wù)器會(huì)發(fā)送許多這種名稱/值對(duì)，但是所有服務(wù)器都至少要發(fā)送一個(gè)：content-type:text/html。這將告訴瀏覽器準(zhǔn)備接受一個(gè) HTML 文檔。 ,常用編碼類型：,GB2312 - 簡(jiǎn)體中文 utf-8 - 簡(jiǎn)體中文

6、 HZ - 簡(jiǎn)體中文（新加坡） BIG5 - 繁體中文（臺(tái)灣） ISO-8859-1 - 英文,類型二：refresh,每隔幾秒鐘后刷新頁(yè)面內(nèi)容，不僅能夠完成頁(yè)面自身的自動(dòng)刷新，也可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)過程。 解析：5為跳轉(zhuǎn)間隔的時(shí)間，單位為秒；url取值為跳轉(zhuǎn)后打開的文件地址，可省略，默認(rèn)為當(dāng)前文檔地址。,類型三：cache-control,禁止客戶端瀏覽器緩存網(wǎng)頁(yè)內(nèi)容。 解析： cache-control為緩存控制， content中定義了禁止緩存功能。,類型四：expires,設(shè)定網(wǎng)頁(yè)在客戶端瀏覽器緩存的有效期限。 解析： expires為緩存期限， content中定義了到期時(shí)間，其內(nèi)

7、為標(biāo)準(zhǔn)格式，都使用英文和數(shù)字進(jìn)行設(shè)定，如： fri, 31 dec 2010 11 40 05 ，則到期時(shí)間為2010年12月31日星期五 上午11點(diǎn)40分05秒。 注意：必須使用GMT的時(shí)間格式，或直接設(shè)為數(shù)字(表示多少秒后過期)。,類型五：轉(zhuǎn)場(chǎng)效果(IE),轉(zhuǎn)場(chǎng)效果即網(wǎng)頁(yè)過渡，進(jìn)入或離開網(wǎng)頁(yè)時(shí)的切換效果。 解析：event為轉(zhuǎn)場(chǎng)效果事件名稱，取值有： page-enter / page-exit (進(jìn)入/退出本網(wǎng)頁(yè)時(shí)有網(wǎng)頁(yè)過渡效果)；duration設(shè)定轉(zhuǎn)場(chǎng)效果持續(xù)時(shí)間，最大可設(shè)為30秒；transition為過渡效果的編號(hào)，可設(shè)置24種切換效果，取值范圍為023。,過渡效果表,過渡效果表

8、（續(xù)表）,類型六：淡入淡出效果(IE),實(shí)現(xiàn)網(wǎng)頁(yè)以淡入淡出效果進(jìn)行切換。 解析：event為轉(zhuǎn)場(chǎng)效果事件名稱，取值有： page-enter / page-exit (進(jìn)入/退出本網(wǎng)頁(yè)時(shí)有網(wǎng)頁(yè)過渡效果)；duration設(shè)定轉(zhuǎn)場(chǎng)效果持續(xù)時(shí)間，最大可設(shè)為30秒；。,name 屬性,name屬性主要用于描述網(wǎng)頁(yè)內(nèi)容。 與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的 。 常見類型有Keywords 、 description 、 robots 、 author 、generator等。,類型一：Keywords,keywords用來(lái)告訴搜索引擎

9、你網(wǎng)頁(yè)的關(guān)鍵字是什么 。 便于搜索引擎搜索網(wǎng)頁(yè)，關(guān)鍵字之間要用逗號(hào)分割。 Google建議Keywords的字符數(shù)串不超過20個(gè) 。 ,類型二：description,description用來(lái)告訴搜索引擎你的網(wǎng)站主要內(nèi)容 。 Description詳細(xì)信息（Google建議Description的字符數(shù)不超過200個(gè)）。 ,類型三：robots,robots用來(lái)告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。 content的參數(shù)有all,none,index,noindex,follow,nofollow，默認(rèn)是all。 并不是所有的搜索引擎都支持這個(gè)tag，它們共同支持一個(gè)功能更強(qiáng)的

10、，叫做robots.txt的文本文件來(lái)達(dá)到上述功能。,類型四：author,說(shuō)明：標(biāo)注網(wǎng)頁(yè)的作者 。 舉例： 。,類型五：generator,說(shuō)明：標(biāo)注設(shè)計(jì)網(wǎng)頁(yè)的編輯器 。 舉例： 。,綜合應(yīng)用,2.3 HTML主體內(nèi)容,2.3.1 主體標(biāo)簽 2.3.2 正文顏色 2.3.3 鏈接顏色 2.3.4 背景 2.3.5 邊距,2.3.1 主體標(biāo)簽,定義和用法 在和中放置的是頁(yè)面中所有的內(nèi)容，如圖片、文字、表格、表單、超鏈接等設(shè)置。 標(biāo)簽有自己的屬性，設(shè)置 標(biāo)簽內(nèi)的屬性，可控制整個(gè)頁(yè)面的顯示方式。 基本語(yǔ)法：。 語(yǔ)法解析：attribute指body標(biāo)簽的屬性名，如定義文字顏色、背景顏色、背景圖片等

11、。,Body標(biāo)簽屬性表,Body標(biāo)簽屬性表（續(xù)）,2.3.2 正文顏色,設(shè)定頁(yè)面文字顏色的body標(biāo)簽的屬性：text 。 作用范圍：頁(yè)面中所有的未單獨(dú)進(jìn)行定義顏色的文字。 color_value取值為顏色英文單詞或十六進(jìn)制值，如 red / #FF0000 。,2.3.3 鏈接顏色,與頁(yè)面鏈接顏色相關(guān)的body標(biāo)簽的屬性有：link、alink 、 vlink 。 link 定義默認(rèn)的沒有點(diǎn)擊過的初始鏈接文字顏色， alink 定義鼠標(biāo)點(diǎn)擊鏈接文字時(shí)的鏈接文字顏色，vlink定義點(diǎn)擊過后的鏈接文字顏色。 color_value取值為顏色英文單詞或十六進(jìn)制值，如 red / #FF0000 。

12、,2.3.4 背景,與頁(yè)面背景相關(guān)的body標(biāo)簽的屬性有： bgcolor 、 background 、 bgproperties 。 bgcolor定義頁(yè)面的顏色， background定義頁(yè)面的背景圖像， bgproperties定義背景屬性。 color_value取值為顏色英文單詞或十六進(jìn)制值，如“ red / #FF0000 ” ；img_file_url指圖片文件所在的路徑，即指向圖像文件所在位置的地址；通過bgproperties 定義了背景屬性，fixed設(shè)為固定效果。,2.3.5 邊距,與頁(yè)面邊距相關(guān)的body標(biāo)簽屬性有： leftmargin 、 rightmargin 、

13、 topmargin、bottommargin 。 leftmargin 、 rightmargin 、 topmargin、bottommargin分別定義頁(yè)面左邊距、右邊距、上邊距、下邊距，即內(nèi)容和瀏覽器左部、右部、上部、下部邊框之間的距離。 value取值為數(shù)字，默認(rèn)單位為像素。,2.4 顏色的設(shè)置,1、顏色值：關(guān)鍵字（英文單詞）或RGB格式的數(shù)字 2、顏色：由 red 、 green 、 blue 三原色組成 3、在 HTML 中還可用十六進(jìn)位數(shù)置義顏色 4、HTML 分別給予兩個(gè)十六進(jìn)位去置義三原色，每個(gè)原色可有 256 種彩度，故三原色可混合成16777216（256*256*256）種顏色。,常見的顏色名稱,顏 色 值,參考顏色 代碼1.html,參考顏色 代碼2.html,本章總結(jié),2.1 HTML標(biāo)簽與元素 2.2 HTML頭部?jī)?nèi)容 2.2.1 HTML頭部標(biāo)簽 2.2.2 定義和用法 2.2.3 定義和用法 2.2.4 定義和用法 2.3 HTML主體內(nèi)容 2.3.1 主體標(biāo)簽 2.3.2 正文顏色 2.3.3 鏈接顏色 2.3.4 背景 2.3.5 邊距 2.4 顏色的設(shè)置,補(bǔ)充01：HTML標(biāo)簽屬性,屬性為 HTML 元素提供附加信息。 HTML 標(biāo)簽屬性