1、2.1 HTML簡介 2.2 HTML文檔的基本結(jié)構(gòu) 2.3 網(wǎng)頁文件的創(chuàng)建過程 2.4 段落標(biāo)記 2.5 文字標(biāo)記 2.6 列表標(biāo)記 2.7 表格標(biāo)記 2.8 表單標(biāo)記 2.9 超鏈接標(biāo)記 2.10 圖片標(biāo)記,第2講 網(wǎng)頁制作基礎(chǔ)語言HTML,HTML是Hypertext Markup Language（超文本標(biāo)記語言）的縮寫，是一種為普通文件中某些字句加上標(biāo)識的語言，其目的在于運(yùn)用標(biāo)記（tag）把HTML文檔劃分成不同的邏輯部分，如段落、標(biāo)題和表格等 。同時標(biāo)記還描述了文檔的結(jié)構(gòu)，它向瀏覽器提供該文檔的格式化信息，并傳送文檔外觀特征。 HTML可以用來建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁

2、面可以被網(wǎng)上的任何人瀏覽，也就是通常所說的網(wǎng)頁。 HTML語言是建立網(wǎng)頁的規(guī)范或標(biāo)準(zhǔn)，從它出現(xiàn)發(fā)展到現(xiàn)在，規(guī)范不斷完善，功能越來越強(qiáng)。 1990(創(chuàng)立)1993 (1.0)1995(2.0,3.0)1998(4.0) HTML4.0+CSS 實現(xiàn)了文檔結(jié)構(gòu)和顯示樣式的分離,2.1 HTML簡介,1.標(biāo)記 HTML文檔由標(biāo)記和被標(biāo)記的內(nèi)容組成。標(biāo)記（tag）用來控制網(wǎng)頁中文本和圖像的各種效果。HTML標(biāo)記分為雙標(biāo)記和單標(biāo)記 。 雙標(biāo)記的一般格式為： 受標(biāo)記影響的內(nèi)容 例如，標(biāo)題標(biāo)記表示為： 我的第一個網(wǎng)頁 單標(biāo)記的一般格式為： 例如，換行標(biāo)記表示為： 【例2-1.1】 ， 【例2-1.2】,2.

3、2 HTML文檔的基本結(jié)構(gòu) 一、標(biāo)記及其屬性,2. 標(biāo)記的屬性 標(biāo)記只是規(guī)定這是什么信息，或是文本，或是圖片，但怎樣顯示或控制這些信息，就需要在標(biāo)記后面加上相關(guān)的屬性來表示，每個標(biāo)記有一系列的屬性。格式為： 受影響的內(nèi)容 例如，字體標(biāo)記有屬性size和color等。 屬性示例 【例2-2.1】 ， 【例2-2.2】 注意：標(biāo)記字母不區(qū)分大小寫。,HTML文檔是一種純文本格式的文件，HTML文檔的基本結(jié)構(gòu)為： 網(wǎng)頁的標(biāo)題 網(wǎng)頁的內(nèi)容 【例2-3】,二、HTML文檔的基本結(jié)構(gòu),1. HTML文件標(biāo)記 HTML文件標(biāo)記以 開頭，位于文件的最前面，表示HTML文件的開始。 HTML文件標(biāo)記以結(jié)束，位于

4、文件的最末端，表示HTML文件的結(jié)束。 2. HTML文件頭標(biāo)記 HTML文件頭標(biāo)記以開始，以 結(jié)束。 文件頭內(nèi)容可以是標(biāo)題名、文本文件地址、創(chuàng)作信息等信息說明， 之間的內(nèi)容不在瀏覽器的窗口內(nèi)顯示，但其中標(biāo)記之間的內(nèi)容在瀏覽器標(biāo)題欄中顯示。,三、HTML文檔結(jié)構(gòu)的說明（頂級標(biāo)記）,3. HTML文件標(biāo)題標(biāo)記 HTML文件標(biāo)題是指顯示在瀏覽器窗口標(biāo)題欄的提示信息，提供了文件的主題詞或保存路徑。其標(biāo)記對為： 文件標(biāo)題。標(biāo)題在保存文件時可以作為默認(rèn)文件名。 4. HTML文件體標(biāo)記 HTML文件體是HTML文檔的主體部分，顯示在瀏覽器窗口的文本顯示區(qū)。其標(biāo)記對為： 文件體內(nèi)容 。,可以用最簡單的“記

5、事本”來編輯HTML文件。 打開記事本。單擊Windows的“開始”“程序”“附件” 中單擊“記事本”。 創(chuàng)建新文件，在“記事本”窗口中，按HTML語言規(guī)則輸入內(nèi)容。 保存文件。打開“記事本”“文件”“保存”。此時將出現(xiàn)“另存為”對話框，在“保存在”下拉列表框中選擇文件要存放的路徑；在“文件名”文本框輸入以.html或.htm為后綴的文件名，在“保存類型”下拉列表框中選擇“所有文件”。最后單擊“保存”按鈕。 注意：此時該文件也可以稱為“網(wǎng)頁”。,2.3 HTML文件的創(chuàng)建過程 一、編輯和保存HTML文件,通過編輯得到的.html文件，可以使用瀏覽器進(jìn)行預(yù)覽，有兩種方法可以打開.html網(wǎng)頁文件

6、。 1. 用瀏覽器打開 網(wǎng)頁在瀏覽后會有不滿意的地方，此時可重新在“記事本”中打開該.html文件修改；或者在瀏覽器中直接打開源文件（在IE中，從“查看”菜單中的“源文件”中打開）。修改后，單擊“文件”菜單中的“保存”命令。如果瀏覽器沒有關(guān)閉，要在瀏覽器中看到修改后的效果，可直接單擊瀏覽器工具欄上的“刷新”按鈕。 2. 在“Windows資源管理器”或“我的電腦”中打開 在“Windows資源管理器”或“我的電腦”中雙擊要打開的.html文件，這時將直接在默認(rèn)的瀏覽器中打開該.html文件。,二、 預(yù)覽網(wǎng)頁,1. 提倡使用小寫標(biāo)記 2. 代碼縮進(jìn)書寫 網(wǎng)頁的標(biāo)題 網(wǎng)頁的內(nèi)容 3.運(yùn)用注釋語句

7、HTML注釋語句的格式為： 4.慎用空格 不要希望在編輯器中寫一些空行和空格來協(xié)助排版，均被視為一個空格。換行應(yīng)該使用。,三、 HTML編程規(guī)范,5.引號的運(yùn)用 按照HTML規(guī)范和標(biāo)準(zhǔn)，元素的屬性值應(yīng)該全部使用英文半角雙引號界定。 當(dāng)出現(xiàn)屬性值中引號嵌套時，則外層使用單引號，里層使用雙引號。,三、 HTML編程規(guī)范,一、強(qiáng)制換行和不換行標(biāo)記、. 標(biāo)記放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強(qiáng)制文本換行。強(qiáng)制換行標(biāo)記的格式為： 文字 不換行標(biāo)記可令文字不能因太長使瀏覽器無法顯示而換行，它對住址、數(shù)學(xué)公式、一行數(shù)字等尤其有用。其格式為： 文字 【

8、例2-4.1】 【例2-4.2】,2.4 主要段落標(biāo)記,段落標(biāo)記放在一個段落的頭尾，用于定義一個段落。.標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之間多一空行，一個段落標(biāo)記可以看作是兩個標(biāo)記，即。段落標(biāo)記的格式為： 文字 其中屬性align用來設(shè)置段落文字在網(wǎng)頁上的對齊方式：left（左對齊）、center（居中）和right（右對齊）。缺省時默認(rèn)為left。 【例2-5】,二、 段落標(biāo)記.,設(shè)置文字、圖像、表格的擺放位置，除了段落標(biāo)記還常使用標(biāo)記。分區(qū)顯示標(biāo)記的格式為： 文本、圖像或表格 其中屬性align用來設(shè)置文本塊、一段文字或標(biāo)題在網(wǎng)頁上的對齊方式：left、center和righ

9、t。缺省時默認(rèn)為left。 【例2-6】 注意： 標(biāo)記和標(biāo)記不能嵌套使用。,三、 分區(qū)顯示標(biāo)記,標(biāo)記用于在頁面中顯示一條水平標(biāo)尺線，可以使不同功能的文字分隔開，看起來整齊、明了。水平線的樣式由標(biāo)記的參數(shù)決定。水平線標(biāo)記的格式為： size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2。 width設(shè)定線段長度，可以是絕對值（以像素為單位）或相對值（相對于當(dāng)前窗口的百分比）。 color設(shè)定線條顏色，可以采用顏色的名稱，也可以用以“#”引導(dǎo)的一個十六進(jìn)制數(shù)代碼來表示。 noshade指定線條是否有陰影，缺省時線為空心有陰影，否則為實心線條。 【例2-7】,四、 水平線標(biāo)記,在網(wǎng)頁的頁面中，標(biāo)題是一段文字內(nèi)

10、容的主題，可以通過對標(biāo)題文字進(jìn)行不同的字號設(shè)置，來增加文本信息的層次性和條理性。標(biāo)題文字標(biāo)記的格式為： 標(biāo)題文字 n用來指定標(biāo)題文字的大小，n取16的整數(shù)值，取1時文字最大，6時文字最小。 屬性align設(shè)置標(biāo)題在頁面中的對齊方式：left、center或right。缺省時默認(rèn)為left。 【例2-8】 注意：標(biāo)記缺省顯示宋體，在同一個標(biāo)題行中無法使用不同大小的字體；與定義的網(wǎng)頁標(biāo)題不同，標(biāo)題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標(biāo)題欄中。,2.5 文字標(biāo)記 （課本p37） 一、 標(biāo)題文字標(biāo)記,在網(wǎng)頁中為了增強(qiáng)頁面的層次，其文字可以用不同的大小、字體、字型、顏色， 標(biāo)記可以實現(xiàn)這一功能。

11、標(biāo)記設(shè)置文字的格式為： 被設(shè)置的文字 size用來設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時最小，取7時最大。 face用來設(shè)置字體。如黑體、宋體、楷體_GB2312、隸書、Times New Roman等。 color用來設(shè)置文字顏色。 【例2-9】 【例2-10】 【例2-11】 【例2-12】 注意： 標(biāo)記的功能在使用CSS以后逐漸被替代。,二、文字設(shè)置標(biāo)記.,無序列表中每一個表項的前面是項目符號（如、等符號）。建立無序列表使用標(biāo)記和表項標(biāo)記。格式為： 第一個列表項 第二個列表項 注意：列表整個表項與上下段文本之間各有一行空白。標(biāo)記是單標(biāo)記，即一個表項的開始，就是前一個表項的結(jié)

12、束。type指定每個表項左端的符號類型，可為disc（實心圓點(diǎn)）、circle（空心圓點(diǎn)）、square（方塊）。 【例2-13】,2.6 列表（描述一組相關(guān)的欄目信息） 一、 無序列表標(biāo)記.,使用標(biāo)記可以建立有序列表，表項的標(biāo)記仍為。格式為： 表項1 表項2 有序列表整個表項與上下段文本之間各有一行空白；列表項目向右縮進(jìn)并左對齊；各表項前帶順序號。 【例2-14】 列表嵌套可以把主頁分為多個層次，例如書的目錄，給人以很強(qiáng)的層次感。有序列表和無序列表不僅可以自身嵌套，而且彼此可互相嵌套。 【例2-15】,二、有序列表標(biāo)記.,表格的作用主要有兩點(diǎn)：一是存放數(shù)據(jù)；二是作為頁面布局和定位的工具。最簡

13、單的表格僅包括行和列。表格的主標(biāo)記為，行的標(biāo)記為，表格單元標(biāo)記為， 用來設(shè)置表格頭部信息。格式為： 表頭1 表頭n 表項1 表項n （子標(biāo)記） 【例2-16】 【例2-17】,2.7 表格 （課本p41） 一、 簡單表格,在缺省下，表項居于單元格的左端。可用列、行的屬性設(shè)置表項數(shù)據(jù)在單元格中的位置。 1. 水平對齊 表項數(shù)據(jù)的水平對齊用標(biāo)記、和的align屬性。align的屬性值分別為：center（居中）、left（左對齊）、right（右對齊）或justify（左右調(diào)整）。 【例2-18】 2. 垂直對齊 表項數(shù)據(jù)的垂直對齊用標(biāo)記、和的valign屬性。valign的屬性值分別為：top（

14、靠單元格頂）、bottom（靠單元格底）、middle（靠單元格中）或baseline（同行單元數(shù)據(jù)項位置一致）。 【例2-19】,二、表格內(nèi)文字的對齊方式,在、標(biāo)記中，使用下面屬性可以改變表格的背景和邊框的色彩、添加背景圖片，也可以為行和單元格改變色彩、添加背景圖片。 bgcolor=色彩或色彩值設(shè)置背景色彩 background=圖片文件名設(shè)置背景圖片 bordercolor=色彩 設(shè)置表格邊框的色彩 注意：如果把屬性放到中，其作用范圍為整個表格，如果把屬性放到中，則作用范圍為整個行，如果把屬性放到、中，則作用范圍為該單元格。,三、表格的色彩和圖片背景,把表格作為一個整體，表格在瀏覽器窗口

15、中的位置也有三種：居左、居中和居右。使用標(biāo)記的align屬性。格式為： 當(dāng)表格位于頁面的左側(cè)或右側(cè)時，文本填充在另一側(cè)。當(dāng)表格居中時，表格兩邊沒有文本。當(dāng)align屬性缺省時，文本在表格的下面。 【例2-20】,四、表格在頁面中的對齊方式,超鏈接（Hyperlink）是網(wǎng)頁互相聯(lián)系的橋梁，它可以從當(dāng)前網(wǎng)頁定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁的某個位置、Internet或本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。瀏覽網(wǎng)頁是超鏈接最普遍的一種應(yīng)用，通過超鏈接還可以獲得不同形態(tài)的服務(wù)，如文件傳輸、資料查詢、電子郵件、遠(yuǎn)程訪問等。 當(dāng)網(wǎng)頁包含超鏈接時，網(wǎng)頁中的外觀形式為彩色且?guī)?/p>

16、劃線的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接的顯示文本或圖片時，將變成手形。超文本鏈接使用錨點(diǎn)標(biāo)記來定義。,2.9 超鏈接 （課本p38）,超級鏈接標(biāo)記由（anchor，錨）定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個詞、句或圖片，可從此處轉(zhuǎn)到另一個鏈接資源（目標(biāo)資源），這個目標(biāo)資源有惟一的地址（URL）。標(biāo)記的格式為： 文本或圖像 href屬性為超文本引用，它的值為一個URL，是目標(biāo)資源的有效地址。如果要創(chuàng)建一個不鏈接到其他位置的空超鏈接，可用“#”代替URL，即: 。,一、 超級鏈接標(biāo)記.,1. 鏈接到同一目錄內(nèi)的網(wǎng)頁文件 鏈接到同一目錄內(nèi)的網(wǎng)頁文件的格式為：

17、 文本 【例2-26】 2. 鏈接到下一級目錄中的網(wǎng)頁文件 鏈接到下一級目錄中網(wǎng)頁文件的格式為： 文本 3. 鏈接到上一級目錄中的網(wǎng)頁文件 鏈接到上一級目錄中網(wǎng)頁文件的格式為： 文本 其中“. . /”表示退到上一級目錄中。 4. 鏈接到同級目錄中的網(wǎng)頁文件 鏈接到同級目錄中網(wǎng)頁文件的格式為： 文本 ,二、 指向其他頁面的鏈接,要在當(dāng)前頁面內(nèi)實現(xiàn)超鏈接，需要定義兩個標(biāo)記：首先在本網(wǎng)頁內(nèi)預(yù)先定義超鏈接目標(biāo)標(biāo)簽（書簽）。其語法格式為： 目標(biāo)標(biāo)簽文字 屬性name用來指定錨點(diǎn)名。 其次，建立指向目標(biāo)標(biāo)簽處的超鏈接，語法格式為： 文本 注：鏈接到指定文檔中錨點(diǎn)時，必須在目標(biāo)標(biāo)簽名前邊加一個“#”號。

18、【例2-27】,三、指向本頁中的鏈接,如果鏈接到的文件不是HTML文件，則該文件將作為下載文件，其格式為： 文本 五、 指向電子郵件的鏈接 單擊指向電子郵件的鏈接，將打開默認(rèn)的電子郵件程序，如FoxMail、Outlook Express，并自動填寫郵件地址。指向電子郵件鏈接的格式為： 文本 注：屬性target可以取“_blank”（新窗口打開） “_parent”（上一級窗口） “_self” （同一個窗口） “_top”（整個窗口）。 【例2-28】,四、 指向下載文件的鏈接,網(wǎng)頁上具有可輸入表項及項目選擇等控制所組成的欄目稱為表單。在網(wǎng)頁中，表單經(jīng)常作為和用戶進(jìn)行交互的工具使用。,2.

19、8 表單 （課本p43） 一、 表單的標(biāo)記.,表單的格式為： （表單其他子標(biāo)記） name屬性 :指定表單的名稱，供腳本、服務(wù)器端程序和樣式表使用。 action屬性 :指定處理表單數(shù)據(jù)的程序（如*.jsp文件或*.asp文件等）的位置。也可設(shè)定為：action=“mailto:”表示將該表單所填資料發(fā)送至此email地址。 method屬性:規(guī)定了發(fā)送表單數(shù)據(jù)的方法。其中g(shù)et方法是將表單數(shù)據(jù)作為一個HTTPget請求發(fā)送給action指定的URL，并添加其后作為新的URL發(fā)送到服務(wù)器 ；post方法是將表單數(shù)據(jù)包含在表單主體中發(fā)送到服務(wù)器。一般修改數(shù)據(jù)庫常用post，僅查詢數(shù)據(jù)庫則使用ge

20、t。,使用輸入標(biāo)記的type屬性，可以在表單中加入不同的表項，并控制表項的風(fēng)格。 type屬性值可為text（單行文本框），則輸入的文本以標(biāo)準(zhǔn)的字符顯示；為password（口令域），則輸入的字符顯示為“*”；還可為radio（單選按鈕），checkbox（復(fù)選框），submit（提交按鈕），reset（重置按鈕），button（一般按鈕）等。 size屬性值表示初始時可以看見的字符數(shù)。 maxlength屬性表示允許輸入的最多字符數(shù)。 【例2-21】,二、文字和密碼的輸入,如果瀏覽者想清除輸入到表單中的全部內(nèi)容，可以使用標(biāo)記中的type屬性所設(shè)的重置（reset）按鈕，當(dāng)瀏覽者完成表單的填寫

21、，想要發(fā)送時，可使用標(biāo)記的屬性type所設(shè)的提交（submit）按鈕，將表單內(nèi)容送給action中的網(wǎng)址或email信箱。格式為： 當(dāng)缺省value的設(shè)置值時，重置和提交的按鈕分別顯示為“重置”和“提交查詢內(nèi)容”。 【例2-22】,三、 重置和提交,在頁面中有些地方需要列出幾個項目，讓瀏覽者通過選擇鈕選擇項目。選擇鈕可以是復(fù)選框（checkbox）或單選鈕（radio）。用標(biāo)記的type屬性可設(shè)置選擇鈕的類型。屬性value可設(shè)置該選擇鈕的控制初值，name屬性是控制名，用checked屬性可表示初始狀態(tài)是否被選中。 【例2-23】,四、 復(fù)選框和單選鈕,當(dāng)瀏覽者選擇的項目較多時，如果用選擇鈕來選擇，占頁面的區(qū)域就會較多?？梢杂脴?biāo)記和標(biāo)記來設(shè)置選擇框。 標(biāo)記的格式為： ,五、列表選擇框（下拉菜單）,其中： size 取數(shù)字，表示在選擇框中一次可見的列表項數(shù)；當(dāng)siz