HTML教學(xué)PPT課件

.,1,第2章超文本標(biāo)記語言HTML,網(wǎng)頁設(shè)計與制作教程,.,2,目錄,.,3,2.1.1HTML概述2.1.2HTML語法2.1.3HTML文件的基本結(jié)構(gòu),.,4,2.1.1HTML概述HTML是一種描述性語言，用HTML可以創(chuàng)建能在互聯(lián)網(wǎng)上傳輸?shù)男畔㈨?，即通常所稱的主頁或網(wǎng)頁。HTML語言使用描述性標(biāo)記符（稱為標(biāo)記）來指明文本的不同內(nèi)容。HTML是一種語言，但并不算是“程序”語言。HTML文檔包含兩種信息：頁面本身的文本和表示頁面元素、結(jié)構(gòu)、格式、及其他超文本鏈接的HTML標(biāo)記。,.,5,2.1.2HTML語法受標(biāo)記影響的內(nèi)容受標(biāo)記影響的內(nèi)容例如，可以用字體標(biāo)記的字號屬性size指定文字的大小，HTML語句如下：本行字將以較小字體顯示,.,6,2.1.3HTML文件的基本結(jié)構(gòu)網(wǎng)頁的標(biāo)題文檔主體，正文部分,.,7,2.1.3HTML文件的基本結(jié)構(gòu)HTML文件頭2.HTML文件主體,.,8,1.HTML文件頭TITLE標(biāo)記：標(biāo)題名META標(biāo)記：給瀏覽器、搜索引擎或其他應(yīng)用程序提供本HTML文件的有關(guān)信息（如作者，終止日期，關(guān)鍵詞列表等等）。,.,9,META標(biāo)記的格式為：,.,10,name屬性主要用于描述網(wǎng)頁，其常用的選項有GENERATOR、Keywords、description、robots、author等。GENERATOR用來說明制作本網(wǎng)頁所用的編輯工具，Keywords用來告訴搜索引擎本網(wǎng)頁的關(guān)鍵字是什么，description用來告訴搜索引擎本網(wǎng)頁的主要內(nèi)容，robots用來告訴搜索機(jī)器人那些頁面需要索引，哪些頁面不需要索引，author用來標(biāo)注網(wǎng)頁的作者。,.,11,http-equiv屬性相當(dāng)于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，其常用的選項有Content-Type、Expires、Refresh等等。Content-Type用以說明網(wǎng)頁所使用的字符集；Expires用于設(shè)定網(wǎng)頁的到期時間；一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸；Refresh用于自動刷新并指向新頁面。Name屬性和http-equiv屬性不能在同一個標(biāo)記中使用。,.,12,Content屬性則根據(jù)name選項或http-equiv選項的定義來決定此項填寫什么樣的字符串。例如：向搜索引擎說明本網(wǎng)頁的關(guān)鍵詞。告訴搜索引擎本網(wǎng)站的主要內(nèi)容。,.,13,通知瀏覽器本HTML文件使用了gb2312字符集，是簡體中文網(wǎng)頁?？梢允巩?dāng)前網(wǎng)頁在2秒后自動轉(zhuǎn)到北京化工大學(xué)北方學(xué)院的主頁（）去，這就是META的刷新作用，在Content中，2代表設(shè)置的時間（單位為秒），而URL就是在指定的時間后自動連接的網(wǎng)頁地址。如果網(wǎng)頁地址就是本頁的地址，那么就是自動刷新。,.,14,使用META標(biāo)記，還可以在進(jìn)入網(wǎng)頁或者離開網(wǎng)頁時實現(xiàn)動畫效果。例如的意思是，進(jìn)入本頁面（http-equiv=”Page-Enter”）時，頁面將按水平百葉窗（transition=9）的形式展開，整個展開過程歷時3秒（duration=3）。的意思是離開本網(wǎng)頁時，頁面將按圓形收縮的形式切換成其他網(wǎng)頁，并且整個切換時間為5秒。,.,15,2.HTML文件主體HTML文件主體標(biāo)記的格式為：網(wǎng)頁的內(nèi)容,.,16,Background：設(shè)置網(wǎng)頁的背景圖像；Bgcolor：設(shè)置網(wǎng)頁的背景色；Text：設(shè)置文本的顏色Link：設(shè)置尚未被訪問過的超文本鏈接的顏色；Vlink：設(shè)置已被訪問過的超文本鏈接的顏色；Alink：設(shè)置超文本鏈接在被訪問瞬間的顏色。,.,17,以命名方式定義常用的顏色，如RED、blue等。以RGB值表示，如#FF0000表示red，#0000ff表示blue。,.,18,常用16種色彩的英文名和RGB值對照,.,19,一個簡單的HTML示例我是中國人，我熱愛我的祖國。,.,20,2.2.1標(biāo)題文字標(biāo)記2.2.2文字標(biāo)記2.2.3段落標(biāo)記,.,21,.,22,標(biāo)題文字標(biāo)記的格式為：標(biāo)題文字屬性n用來指定標(biāo)題文字的大小，可以取16的整數(shù)值，取1時文字最大，6時文字最小。在一個標(biāo)題行中無法使用不同大小的字體。屬性align用來設(shè)置標(biāo)題在頁面中的對齊方式，有l(wèi)eft（左對齊）、center（居中）和right（右對齊）三種選擇。,.,23,例2-2用設(shè)置標(biāo)題,設(shè)置標(biāo)題第1級標(biāo)題H1第2級標(biāo)題H2第3級標(biāo)題H3第4級標(biāo)題H4,.,24,.,25,文字標(biāo)記的格式為：被設(shè)置的文字,.,26,屬性size用來設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時文字最小，取7時文字最大。屬性face用來設(shè)置字體。如黑體、宋體、楷體_GB2312、仿宋_Gb312、隸書、TimesNewRoman等。屬性color用來設(shè)置文字顏色。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個十六進(jìn)制數(shù)代碼來表示，參見表2-1。,.,27,例2-3用設(shè)置文字的大小、字體和顏色。,用FONT標(biāo)記設(shè)置文字大小、字體和顏色普通文字1號字7號字宋體4號字華文彩云3號字紅色藍(lán)色隸屬6號字,.,28,表2-2設(shè)置各種字型的標(biāo)記,.,29,例2-4設(shè)置字型,設(shè)置字型普通文字加粗字斜體字加下劃線大型字體小型字體加刪除線X2+Y2=Z2,.,30,強制換行標(biāo)記強制換段標(biāo)記設(shè)置段落標(biāo)記水平線,.,31,強制換行標(biāo)記強制換行的格式為：文字,.,32,例2-5強制換行標(biāo)記的使用,強制換行標(biāo)記的使用登鶴雀樓白日依山盡黃河入海流欲窮千里目，更上一層樓。登鶴雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。,.,33,2.強制換段標(biāo)記段落標(biāo)記放在一段文字的末尾，就定義了一個新段落的開始。標(biāo)記不但能使后面的文字換到下一行，還可以是兩段之間留一空行。由于一段的結(jié)束意味著新一段的開始，所以使用也可省略結(jié)束標(biāo)記。強制換段標(biāo)記的格式為：文字強制換段標(biāo)記可以看作兩個強制換行標(biāo)記,.,34,設(shè)置段落標(biāo)記設(shè)置段落標(biāo)記的格式為：文字其中屬性align用來設(shè)置段落的對齊方式，可以為left、center或right，分別表示段落左對齊、段落居中、段落右對齊。默認(rèn)為left。,.,35,例2-6段落標(biāo)記的使用。,段落標(biāo)記的使用登鶴雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。,.,36,4.水平線水平線標(biāo)記的格式為：。,.,37,Align屬性：設(shè)定線條放置的位置，可選擇left、right或center。Size屬性：設(shè)定線條厚度，以像素作單位，默認(rèn)為2。Width屬性：設(shè)定線條長度，可以是絕對值或相對值，默認(rèn)值為100%。Color屬性：設(shè)定線條顏色，默認(rèn)為黑色。Noshade屬性：設(shè)定線條為平面顯示（沒有三維效果），若缺省，則有陰影或立體效果。,.,38,例2-7水平線標(biāo)記的使用,水平線標(biāo)記的使用,.,39,2.3.1無序列表2.3.2有序列表2.3.3列表的嵌套,.,40,2.3.1無序列表無序列表中每一個表項的前面是項目符號（如、等）。建立無序列表使用標(biāo)記和表項標(biāo)記。格式為：第一個列表項第二個列表項,.,41,標(biāo)記：是單標(biāo)記，即一個表項的開始，就是前一個表項的結(jié)束。Type：指定每個表項左端的符號類型，可為disc（實心圓點）、circle（空心圓點）、square（方塊），還可以自己設(shè)置圖片，如默認(rèn)為實心圓點。,.,42,例2-8無序列表標(biāo)記的使用,無序列表標(biāo)記的使用網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)總線結(jié)構(gòu)星型結(jié)構(gòu)環(huán)型結(jié)構(gòu),.,43,2.3.2有序列表使用標(biāo)記可以建立有序列表，表項的標(biāo)記仍為LI，格式為：第一個表項第二個表項,.,44,type屬性可設(shè)定5種序號：數(shù)字（type=1）、大寫英文字母（type=A）、小寫英文字母（type=a）、大寫羅馬字母（type=I）、小寫羅馬字母（type=i），缺省的序號標(biāo)記是數(shù)字。,.,45,例2-9有序列表標(biāo)記的使用。,有序列表標(biāo)記的使用通過撥號網(wǎng)絡(luò)連接Internet的步驟安裝調(diào)制解調(diào)器創(chuàng)建撥號連接設(shè)置撥號網(wǎng)絡(luò)設(shè)置撥號網(wǎng)絡(luò),.,46,2.3.3列表的嵌套列表嵌套可以把網(wǎng)頁分為多個層次，例如書的目錄，給人以很強的層次感。有序列表和無序列表不僅可以自身嵌套，而且可以互相嵌套。,.,47,例2-10無序列表中套無序列表。,例2-11有序列表中套無序列表。,.,48,2.4.1網(wǎng)頁中的圖片2.4.2圖片標(biāo)記2.4.3設(shè)定圖片的布局,.,49,2.4.1網(wǎng)頁中的圖片Web中圖片的幾種常用格式為GIF、JPEG和PNG，此外還可使用矢量格式。其中最常用的是GIF和JPEG格式，幾乎所有瀏覽器都支持這兩種格式。,.,50,2.4.2圖片標(biāo)記圖片標(biāo)記的格式為：,.,51,2.4.3設(shè)定圖片的布局布局是圖像放在網(wǎng)頁中的位置以及圖像與文本的排放關(guān)系。實現(xiàn)這種功能，除了利用標(biāo)記的align屬性外，還有、等標(biāo)記。1.設(shè)置圖像的對齊方式2.設(shè)置圖像與文本間的關(guān)系,.,52,1.設(shè)置圖像的對齊方式圖像可放在頁面的左邊（left）、中間（center）和右邊（right）。使用標(biāo)記的align屬性可實現(xiàn)圖像的居左、居中和居右。格式為：另外，實現(xiàn)圖像居中還可以使用標(biāo)記，格式為：,.,53,例2-12設(shè)置圖像的對齊方式,.,54,2.設(shè)置圖像與文本間的關(guān)系（1）設(shè)置圖像與文本之間的空白（2）文本與圖像在垂直方向上的對齊（3）文本環(huán)繞圖像,.,55,2.設(shè)置圖像與文本間的關(guān)系（1）設(shè)置圖像與文本之間的空白標(biāo)記的hspace和vspace屬性可實現(xiàn)該功能。,.,56,2.設(shè)置圖像與文本間的關(guān)系（2）文本與圖像在垂直方向上的對齊文本文本其中align的值可取：top文本與圖像的頂部對齊；middle文本與圖像的中央對齊；bottom文本與圖像的底部對齊。,.,57,2.設(shè)置圖像與文本間的關(guān)系（3）文本環(huán)繞圖像文本其中align的值可?。簂eft圖像居左，文本在圖像的右邊；right圖像居右，文本在圖像的左邊。使用該標(biāo)記設(shè)置文本環(huán)繞方式后，將一直有效，直到遇到下一個設(shè)置標(biāo)記。如果想取消文本環(huán)繞圖像，可用標(biāo)記，其后的文本將不再環(huán)繞圖像。其格式為：,.,58,例2-13設(shè)置圖像與文本間的關(guān)系,.,59,2.5.1建立簡單表格2.5.2表格的屬性設(shè)置,.,60,2.5.1建立簡單表格一般格式為：標(biāo)題表頭1表頭2表頭n表項11表項12表項1n表項m1表項m2表項mn,.,61,例2-14一個簡單的表格,.,62,2.5.2表格的屬性設(shè)置1.表格標(biāo)記屬性2.單元格的合并3.表格的分組顯示4.表格邊框和分隔線的顯示控制,.,63,2.5.2表格的屬性設(shè)置1.表格標(biāo)記屬性（1）標(biāo)記的屬性設(shè)置（2）標(biāo)記的屬性設(shè)置（3）標(biāo)記的屬性設(shè)置,.,64,2.5.2表格的屬性設(shè)置1.表格標(biāo)記屬性（1）標(biāo)記的屬性設(shè)置,.,65,2.5.2表格的屬性設(shè)置1.表格標(biāo)記屬性（2）標(biāo)記的屬性設(shè)置,.,66,2.5.2表格的屬性設(shè)置1.表格標(biāo)記屬性（3）標(biāo)記的屬性設(shè)置,.,67,例2-15表格的屬性設(shè)置,.,68,2.5.2表格的屬性設(shè)置2.單元格的合并其中，i表示合并的列數(shù)，j表示合并的行數(shù)。,.,69,例2-16表格單元格的合并,.,70,例2-17表格單元格的隨意合并,.,71,2.5.2表格的屬性設(shè)置3.表格的分組顯示（1）按行分組（2）按列分組,.,72,2.5.2表格的屬性設(shè)置3.表格的分組顯示（1）按行分組表頭表尾表體1表體n,.,73,例2-18按行組制作表格。,.,74,2.5.2表格的屬性設(shè)置3.表格的分組顯示（2）按列分組標(biāo)記可一次設(shè)定列組中的列數(shù)以及各列屬性。其格式為：標(biāo)記可以設(shè)定一列的屬性，它可以放在中使用，也可單獨用于定義列組以外列的屬性，但它不能構(gòu)造列組。其格式為：,.,75,例2-19設(shè)置列組。,.,76,2.5.2表格的屬性設(shè)置4.表格邊框和分隔線的顯示控制（1）邊框的顯示可以通過在標(biāo)記中設(shè)置frame屬性來控制。其方法為：屬性值box（顯示所有4個邊框）、above（只顯示上邊框）、below（只顯示下邊框）、hsides（只顯示上、下邊框）、vsides（只顯示左、右邊框）、lhs（只顯示左邊框）、rhs（只顯示右邊框）和void（不顯示任何邊框）。,.,77,2.5.2表格的屬性設(shè)置4.表格邊框和分隔線的顯示控制（2）分隔線的顯示可以通過在標(biāo)記中設(shè)置rules屬性來控制。其方法為：屬性值可以為all（顯示所有分隔線）、groups（只顯示組與組之間的分隔線）、rows（只顯示行與行之間的分隔線）、cols（只顯示列與列之間的分隔線）、none（不顯示任何分隔線）。,.,78,2.6.1超鏈接標(biāo)記2.6.2頁面鏈接2.6.3書簽鏈接2.6.4電子郵件鏈接,.,79,2.6.1超鏈接標(biāo)記熱點屬性href為超文本引用，它的值為一個URL地址，是目標(biāo)資源的有效地址。可以是相對路徑或者絕對路徑。屬性name指定當(dāng)前文檔內(nèi)的一個字符串，作為鏈接時可以使用的有效的目標(biāo)資源的地址。屬性target用于設(shè)定鏈接被按后結(jié)果所要顯示的窗口?？蛇x值為_blank（或new）、_parent、_self、_top、框架名稱。,.,80,2.6.2頁面鏈接字符串,.,81,2.6.3書簽鏈接首先在目標(biāo)位置設(shè)置標(biāo)記，稱為書簽，設(shè)置格式為：text在跳轉(zhuǎn)調(diào)用處定義超鏈接，格式為：text如果在一個網(wǎng)頁中（如A頁面）要建立指向其他頁面（如B頁面）中某一處的超鏈接，方法為：在B頁面中要跳轉(zhuǎn)到的目標(biāo)位置設(shè)置標(biāo)記，格式為：在A頁面中定義超鏈接，格式為：text。,.,82,2.6.4電子郵件鏈接熱點文本,.,83,例2-21超鏈接標(biāo)記的使用。,.,84,2.7.1表單的標(biāo)記2.7.2常用的表單域,.,85,2.7.1表單的標(biāo)記HTML中與設(shè)計表單有關(guān)的常用標(biāo)記有、等標(biāo)記。,.,86,2.7.1表單的標(biāo)記（1）表單標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的URL地址。其基本格式為：,.,87,2.7.1表單的標(biāo)記（1）Action屬性用于設(shè)定處理表單數(shù)據(jù)程序的URL地址。這樣的程序通常是ASP之類的應(yīng)用程序，采用電子郵件方式時，用action=”mailto：指定的電子郵件地址”。Method屬性指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，其中POST方式較為常用。當(dāng)method=get時，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)method=post時則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的post傳輸方式傳送到服務(wù)器，用電子郵件接收用戶信息采用這種方式。Name屬性用于設(shè)定表單的名稱。Onsubmit和onreset主要針對“submit”按鈕和“reset”按鈕來說的，分別設(shè)定在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。Target屬性指定輸入數(shù)據(jù)結(jié)果顯示在哪個窗口，這需要與標(biāo)記配合使用。,.,88,2.7.1表單的標(biāo)記（2）標(biāo)記在表單中使用最頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。它主要用來設(shè)計表單中提供給用戶的輸入形式。其基本格式為：,.,89,2.7.1表單的標(biāo)記（2）name屬性設(shè)定當(dāng)前表項的名稱，主要在處理表單時起作用。type屬性決定了表單中表項的類型。其選項較多，有text、password、checkbox、radio、submit、reset、file、hidden、image、button等。value屬性用于設(shè)定輸入默認(rèn)值，即如果用戶不輸入的話，就采用此默認(rèn)值。src屬性是針對type=image的情況來說的，設(shè)定圖像文件的URL地址。checked屬性表示選擇框（單選鈕或復(fù)選框）中，此項被默認(rèn)選中。maxlength屬性表示在輸入單行文本的時候，最大輸入字符個數(shù)。size屬性用于設(shè)定單行文本區(qū)域的寬度。,.,90,2.7.2常用的表單域,文本框和密碼框單選鈕和復(fù)選框列表框多行文本框按鈕,.,91,2.7.2常用的表單域,文本框和密碼框（1）單行文本框的基本格式為：（2）密碼框的基本格式為：在密碼框中輸入的表單內(nèi)容將以“*”顯示。,.,92,2.7.2常用的表單域,單選鈕和復(fù)選框（1）單選鈕就是從一組選擇項中選取一項。其基本格式為：注意同組單選鈕必須具備相同的name名稱。（2）復(fù)選框就是可以從一組選擇項中選取多項。其基本格式為：同組復(fù)選框也必須具備相同的name名稱。在其中還可以加入checked屬性表示默認(rèn)選定值。,.,93,2.7.2常用的表單域,3.列表框一個列表框的基本格式為：選項1選項2選項n,.,94,2.7.2常用的表單域,4.多行文本框基本格式為：,.,95,2.7.2常用的表單域,按鈕按鈕包括“提交”按鈕（type=submit）、“重置”按鈕（type=reset）和普通按鈕（type=button）。“提交”按鈕是將表單內(nèi)容提交給服務(wù)器的按鈕，“重置”按鈕是將表單內(nèi)容全部清除，讓瀏覽者重新填寫的按鈕。按鈕的基本格式為：,.,96,例2-22表單的使用。,.,97,2.8.1建立框架2.8.2框架的屬性設(shè)置2.8.3框架間的鏈接,.,98,2.8.1建立框架一個框架的基本結(jié)構(gòu)為：1.標(biāo)記2.標(biāo)記3.標(biāo)記,.,99,2.8.1建立框架1.標(biāo)記基本格式為：,.,100,2.8.1建立框架2.標(biāo)記標(biāo)記是一個單標(biāo)記，其格式為：,.,101,2.8.1建立框架3.標(biāo)記。例如：很抱歉，您使用的瀏覽器不支持框架功能，請轉(zhuǎn)用新的瀏覽器。,.,102,例2-23框架的嵌套。,.,103,2.8.2框架的屬性設(shè)置1.設(shè)定框架的有無和顏色2固定邊框3頁面空白區(qū)域的設(shè)置4滾動條的設(shè)置,.,104,2.