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

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

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

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

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

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

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

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

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

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

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

11、用的一種應(yīng)用。在瀏覽器端對用戶輸入的簡單驗(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)證通過，表單可以提交！); document.forms0.submit(); 用戶名： 密碼： 重新輸入密碼: 性別：男 女 出生日期： 請選擇 1981 1982 1983 1984 1985 1986 年 興趣：音樂 動漫 電影 3.2.8 JavaScript高級應(yīng)用探討 上面介紹的示例中，JavaScript都

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

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