HTML教學PPT課件

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