HTML相關(guān)技術(shù)基礎(chǔ)知識(shí)

1、第三章 HTML相關(guān)技術(shù)基礎(chǔ)知識(shí)縱觀各種動(dòng)態(tài)頁(yè)面開(kāi)發(fā)技術(shù)，無(wú)論是JSP、ASP還是PHP都無(wú)法擺脫HTML的影子。這些動(dòng)態(tài)的頁(yè)面開(kāi)發(fā)技術(shù)無(wú)非是在靜態(tài)HTML頁(yè)面的基礎(chǔ)上添加了動(dòng)態(tài)的可以交互的內(nèi)容。HTML是所有動(dòng)態(tài)頁(yè)面開(kāi)發(fā)技術(shù)的基礎(chǔ)。在接下來(lái)的章節(jié)將要詳細(xì)介紹的就是HTML相關(guān)的一系列技術(shù)，包括HTML、JavaScript和CSS。其中HTML是一組標(biāo)簽，負(fù)責(zé)網(wǎng)頁(yè)的基本表現(xiàn)形式；JavaScript是在客戶端瀏覽器運(yùn)行的語(yǔ)言，負(fù)責(zé)在客戶端與用戶的互動(dòng)；CSS是一個(gè)樣式表，起到美化整個(gè)頁(yè)面的功能。本書(shū)不是詳細(xì)介紹HTML的專(zhuān)著，在本章也只是講解Web開(kāi)發(fā)中最常見(jiàn)的HTML知識(shí)，目的在于使讀者能

2、盡快進(jìn)入Web開(kāi)發(fā)的狀態(tài)。如果讀者有更深層次的需求可以參考專(zhuān)門(mén)講解HTML的書(shū)籍。3.1 HTML 基礎(chǔ)知識(shí) 在各種Web開(kāi)發(fā)技術(shù)中，HTML無(wú)疑是最為基礎(chǔ)的。任何動(dòng)態(tài)語(yǔ)言都離不開(kāi)HTML的支持。所以在開(kāi)始Web開(kāi)發(fā)的學(xué)習(xí)之前，讀者還是需要靜下心來(lái)打好這個(gè)基礎(chǔ)。在這個(gè)章節(jié)中將會(huì)概述HTML的框架知識(shí)。3.1.1 什么是HTML HTML（Hyper Text Markup Language）即超文本標(biāo)記語(yǔ)言，用來(lái)描述Web文檔數(shù)據(jù)。用戶可以通過(guò)URL鏈接來(lái)訪問(wèn)這種Web文檔，從而達(dá)到信息展示、信息共享的目的。3.1.2 HTML運(yùn)行原理 前面介紹HTML定義的時(shí)候就說(shuō)過(guò)，HTML是一種標(biāo)記語(yǔ)言

3、，每一種HTML標(biāo)簽都是有一定表現(xiàn)含義的。瀏覽器就是按照HTML標(biāo)簽的語(yǔ)義規(guī)則把HTML代碼翻譯成漂亮的網(wǎng)頁(yè)。3.1.3 常用的HTML標(biāo)記表單 (form)文本框 (text)文本區(qū)域 (textArea)單選按鈕 (Radio)復(fù)選框 (checkbox)下拉列表框 (select)按鈕 (submit)表格 (table、tr、td)超級(jí)鏈接 (a)1. 表單 (form)2. 文本框(text)3. 文本區(qū)域 (textArea)This is a student4. 單選按鈕 (Radio) 性別： 男 女 5. 復(fù)選框 (checkbox) 愛(ài)好： 足球 唱歌6. 下拉列表框 (s

4、elect) 清華大學(xué) 北京大學(xué) 天津大學(xué) 7. 按鈕 (submit) 8. 表格 (table、tr、td)9. 超級(jí)鏈接 (a)新浪網(wǎng)新浪網(wǎng) 第一行第一列 第一行第二列 第二行第一列 第二行第二列 3.1.4 HTML表單標(biāo)簽 前面講述的都是HTML向用戶展示信息的標(biāo)簽，在本節(jié)要介紹的內(nèi)容就是HTML用來(lái)收集用戶輸入的標(biāo)簽。是表單標(biāo)簽，只有在這個(gè)標(biāo)簽中的用戶輸入才會(huì)被提交給服務(wù)器。表單標(biāo)簽的使用方法類(lèi)似下面這種格式。 表單提交數(shù)據(jù)get與post的區(qū)別都能實(shí)現(xiàn)提交數(shù)據(jù)，用get會(huì)重寫(xiě)url把提交的數(shù)據(jù)加到地址上，所以提交的數(shù)據(jù)不能超過(guò)2kb；但post就直接提交數(shù)據(jù)，所以并沒(méi)有限制提交的

5、數(shù)據(jù)量。 用戶名： 密碼： 重新輸入密碼: 性別：男 女 出生日期： 請(qǐng)選擇 1981 1982 1983 1984 1985 1986 年 興趣：音樂(lè) 動(dòng)漫 電影 3.1.5 HTML其他標(biāo)簽 在本章只是介紹了HTML最基本最常用的幾個(gè)標(biāo)簽，HTML還有很多其他標(biāo)簽，例如應(yīng)用程序標(biāo)簽中可以加入不同動(dòng)態(tài)程序代碼，多媒體標(biāo)簽中可以加入多媒體文件，F(xiàn)lash標(biāo)簽中可以加入Flash動(dòng)畫(huà)，文本標(biāo)簽可以用各種方式組織文本內(nèi)容的顯示。讀者如果要深入全面的研究HTML標(biāo)簽，可以參考這方面的參考手冊(cè)。在本書(shū)中不再對(duì)這些內(nèi)容進(jìn)行詳細(xì)的介紹。3.2 JavaScript基礎(chǔ)知識(shí) JavaScript的出現(xiàn)給靜態(tài)

6、的HTML網(wǎng)頁(yè)帶來(lái)很大的變化。JavaScript增加了HTML網(wǎng)頁(yè)的互動(dòng)性，使以前單調(diào)的靜態(tài)頁(yè)面變得富有交互性，它可以在瀏覽器端實(shí)現(xiàn)一系列動(dòng)態(tài)的功能，僅僅依靠瀏覽器就可以完成一些與用戶的互動(dòng)。在下面的章節(jié)中將要簡(jiǎn)單介紹這種技術(shù)的基礎(chǔ)知識(shí)。3.2.1 什么是JavaScript JavaScript是一種簡(jiǎn)單的腳本語(yǔ)言,一種解釋性的語(yǔ)言，可以在瀏覽器中直接運(yùn)行（因?yàn)闉g覽器中包含了對(duì)這些腳本語(yǔ)言的解釋引擎，不同瀏覽器或不同瀏覽器，能夠支持的JavaScript 版本不同），無(wú)需服務(wù)器端的支持。這種腳本語(yǔ)言可以直接嵌套在HTML代碼中，它響應(yīng)一系列的事件，當(dāng)一個(gè)JavaScript函數(shù)響應(yīng)的動(dòng)作發(fā)

7、生時(shí)，瀏覽器就會(huì)執(zhí)行對(duì)應(yīng)的JavaScript代碼，從而在瀏覽器端實(shí)現(xiàn)與客戶的交互。3.2.2 JavaScript中的事件 在HTML的標(biāo)簽中，絕大部分都可以觸發(fā)一些事件，例如鼠標(biāo)單擊、雙擊、鼠標(biāo)經(jīng)過(guò)、鼠標(biāo)離開(kāi)等一系。JavaScript最主要的功能就是與用戶的交互，而用戶只能在表單中提交輸入內(nèi)容，所以表單的所有輸入標(biāo)簽都可以出發(fā)鼠標(biāo)事件、鍵盤(pán)事件等JavaScript所能響應(yīng)的常見(jiàn)事件。 事件觸發(fā)示例 function test() alert(事件觸發(fā)測(cè)試！); 3.2.3 JavaScript中的對(duì)象簡(jiǎn)介JavaScript所實(shí)現(xiàn)的動(dòng)態(tài)功能，基本上都是對(duì)HTML文檔或者是HTML文檔運(yùn)

8、行的環(huán)境進(jìn)行的操作。那么要實(shí)現(xiàn)這些動(dòng)態(tài)功能就必需找到相應(yīng)的對(duì)象。JavaScript中有已經(jīng)定義過(guò)的對(duì)象供開(kāi)發(fā)者調(diào)用。3.2.4 window對(duì)象簡(jiǎn)介 window對(duì)象是所有JavaScript對(duì)象中最頂層的對(duì)象，整個(gè)HTML文檔就是在一個(gè)瀏覽器的一個(gè)窗口，即window對(duì)象中顯示。常用window對(duì)象方法：（1）window.open(“”, “”,”width=300,height=200) （2）window.close()（3）window.confirm(“”)（4）window.alert(“”)3.2.5 document對(duì)象簡(jiǎn)介 document對(duì)象是在具體的開(kāi)發(fā)過(guò)程中用的最頻

9、繁的對(duì)象，利用document對(duì)象可以訪問(wèn)頁(yè)面上任何的元素。通過(guò)控制這些元素可以完成與用戶的互動(dòng)。（1）利用document定位HTML頁(yè)面元素document.getElementById(),訪問(wèn)所有元素訪問(wèn)表單：document.forms“formNname”和 document.forms“formIndex”（2）利用document對(duì)象動(dòng)態(tài)生成HTML頁(yè)面動(dòng)態(tài)生成HTML頁(yè)面function create() var content = 動(dòng)態(tài)生成的HTML文檔; content += 這個(gè)文檔的內(nèi)容是利用document對(duì)象動(dòng)態(tài)生成的; content += ; var newW

10、indow = window.open(); newWindow.document.write(content); newWindow.document.close(); 3.2.6 location對(duì)象簡(jiǎn)介 在HTML標(biāo)簽中可以用超鏈接標(biāo)簽來(lái)控制網(wǎng)頁(yè)中的跳轉(zhuǎn)，在JavaScript中如果要實(shí)現(xiàn)類(lèi)似的網(wǎng)頁(yè)跳轉(zhuǎn)功能只能選擇location對(duì)象，這個(gè)對(duì)象的使用方法非常簡(jiǎn)單，只需要在JavaScript代碼中添加下面這行代碼即可。window.location.href = “http:/”;3.2.7 JavaScript輸入驗(yàn)證 用JavaScript實(shí)現(xiàn)表單輸入驗(yàn)證，是JavaScript最常

11、用的一種應(yīng)用。在瀏覽器端對(duì)用戶輸入的簡(jiǎn)單驗(yàn)證，這種驗(yàn)證僅僅局限于輸入格式等方面。 表單輸入驗(yàn)證示例 function validate() var userName=document.forms0.userName.value; var password=document.forms0.password.value; var rePassword=document.forms0.rePassword.value; if(userName.length=0) alert(用戶名不能為空！); else if(password=0) alert(密碼不能為空！); else if(rePasswo

12、rd.length=0) alert(重新輸入密碼不能為空！); else if(userName.length6) alert(用戶名不能小于6位！); else if(password!=rePassword) alert(兩次輸入密碼不一致！); else alert(驗(yàn)證通過(guò)，表單可以提交！); document.forms0.submit(); 用戶名： 密碼： 重新輸入密碼: 性別：男 女 出生日期： 請(qǐng)選擇 1981 1982 1983 1984 1985 1986 年 興趣：音樂(lè) 動(dòng)漫 電影 3.2.8 JavaScript高級(jí)應(yīng)用探討 上面介紹的示例中，JavaScript都

13、沒(méi)有和服務(wù)器進(jìn)行互動(dòng)，都是在瀏覽器中獨(dú)立執(zhí)行，這樣所能實(shí)現(xiàn)的與客戶互動(dòng)的功能就比較有限了，例如現(xiàn)在用戶注冊(cè)的時(shí)候需要驗(yàn)證這個(gè)用戶名是否已經(jīng)被占用，這個(gè)功能便需要到服務(wù)器中進(jìn)行查詢。然而在我們上面的驗(yàn)證中，只有當(dāng)表單提交的時(shí)候服務(wù)器才會(huì)相應(yīng)請(qǐng)求，其他情況下，如果沒(méi)有刷新整個(gè)頁(yè)面是不能實(shí)現(xiàn)與服務(wù)器之間的通信的。3.3 CSS基礎(chǔ)知識(shí) 在前面的內(nèi)容中講解了HTML和JavaScript，現(xiàn)在我們已經(jīng)基本可以編出具有簡(jiǎn)單互動(dòng)的網(wǎng)頁(yè)，但是僅僅這樣還是不夠的，一個(gè)專(zhuān)業(yè)的網(wǎng)頁(yè)需要在字體、顏色、布局等方面進(jìn)行各種設(shè)置，需要給用戶帶來(lái)視覺(jué)的沖擊。接下來(lái)的內(nèi)容將要介紹這種美化頁(yè)面的技術(shù)。3.3.1 什么是CSS

14、CSS（Cascading Style Sheets）即層疊樣式表，也就是通常所說(shuō)樣式表。CSS是一種美化網(wǎng)頁(yè)的技術(shù)。通過(guò)使用CSS，可以方便、靈活地設(shè)置網(wǎng)頁(yè)中不同元素的外觀屬性，通過(guò)這些設(shè)置可以使網(wǎng)頁(yè)在外觀上達(dá)到一個(gè)更高的級(jí)別。3.3.2 CSS屬性設(shè)置 CSS美化網(wǎng)頁(yè)就是通過(guò)設(shè)置頁(yè)面元素的屬性來(lái)實(shí)現(xiàn)的，在下面的內(nèi)容中將介紹CSS屬性設(shè)置的基本方法。3.3.3 CSS絕對(duì)定位示例 在HTML中布局一般情況下需要使用表格，如果要定位只有通過(guò)表格的嵌套來(lái)實(shí)現(xiàn)，這種方法的確可以在一定程度上解決問(wèn)題，但是卻不能隨意定位頁(yè)面元素，而且對(duì)某個(gè)元素位置的改變有可能影響到整個(gè)頁(yè)面的布局。3.3.4 JavaScript+DIV+CSS實(shí)現(xiàn)下拉菜單 在Web應(yīng)用中，下拉菜單的可以說(shuō)是隨處可見(jiàn)，在學(xué)習(xí)了JavaScript和CSS以后實(shí)現(xiàn)起來(lái)毫無(wú)難度。其原理就是在用JavaScript控制不同DIV的顯示和隱藏，其中所有的DIV都是用CSS定位方法提前定義好位置和表現(xiàn)形式，下拉的效果只是當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候觸發(fā)一個(gè)事件。3.3.5 JavaScript+CSS實(shí)現(xiàn)表格變色 在一些Web應(yīng)用中間經(jīng)常會(huì)用表格來(lái)展示數(shù)據(jù)，當(dāng)表格行數(shù)比較多的時(shí)候，就容易后看錯(cuò)行的情況發(fā)生，所以需要一種方法來(lái)解決這個(gè)問(wèn)題。在這里我們采取這樣一種措施，當(dāng)鼠標(biāo)移到某一行的時(shí)候，這行的背景顏色發(fā)生變