《PHP+MySQL動態(tài)網(wǎng)站開發(fā)實例教程》第2章 HTML與JavaScript語言速成_第1頁
《PHP+MySQL動態(tài)網(wǎng)站開發(fā)實例教程》第2章 HTML與JavaScript語言速成_第2頁
《PHP+MySQL動態(tài)網(wǎng)站開發(fā)實例教程》第2章 HTML與JavaScript語言速成_第3頁
《PHP+MySQL動態(tài)網(wǎng)站開發(fā)實例教程》第2章 HTML與JavaScript語言速成_第4頁
《PHP+MySQL動態(tài)網(wǎng)站開發(fā)實例教程》第2章 HTML與JavaScript語言速成_第5頁
已閱讀5頁，還剩39頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

第1頁第2章HTML與JavaScript語言速成本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述網(wǎng)站是萬維網(wǎng)上相關(guān)網(wǎng)頁的集合，網(wǎng)頁上的許多元素都需要由HTML編寫后展現(xiàn)出來。HTML文檔是所有網(wǎng)頁制作技術(shù)的基礎(chǔ)。JavaScript是一種客戶端腳本語言，專門用來編寫瀏覽器程序，可實現(xiàn)與用戶交互。在動態(tài)網(wǎng)站開發(fā)中，HTML和JavaScript可以很好的配合服務(wù)器端程序?qū)崿F(xiàn)Web運行功能。本章將介紹HTML和JavaScript的基本知識。第3頁本章的學(xué)習(xí)目標(biāo)掌握HTML文件的基本結(jié)構(gòu)和語法規(guī)則掌握文本控制、列表、超鏈接和圖像的標(biāo)簽及其屬性掌握表單標(biāo)簽及其屬性掌握J(rèn)avaScript語言的基本要素及代碼編寫規(guī)則掌握事件的調(diào)用和對象的使用第4頁主要內(nèi)容2.1HTML簡介2.2編輯網(wǎng)頁2.3創(chuàng)建表單2.4JavaScript簡介2.5文檔對象模型（DOM）2.6瀏覽器對象模型（BOM）2.7本章小結(jié)第5頁2.1HTML簡介HTML（HypertextMarkedLanguage，超文本標(biāo)記語言）是萬維網(wǎng)（www）描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)。HTML語言使用“標(biāo)簽”（也叫“標(biāo)記”）來指示W(wǎng)eb瀏覽器應(yīng)該如何顯示網(wǎng)頁元素，HTML標(biāo)簽是HTML中用來鑒別網(wǎng)頁元素的類型、格式和外觀的文本字符串。第6頁2.1.1HTML結(jié)構(gòu)HTML文件的本質(zhì)是一個純文本文件，只是它的擴展名為html或htm。任何純文本編輯軟件都能創(chuàng)建、編輯HTML文件。一個HTML文件的基本結(jié)構(gòu)如下：<html>//文件開始標(biāo)簽

<head>//文件頭開始的標(biāo)簽

……//文件頭的內(nèi)容</head>//文件頭結(jié)束的標(biāo)簽<body>//文件主體開始的標(biāo)簽

……//文件主體的內(nèi)容

</body>//文件主體結(jié)束的標(biāo)簽</html>//文件結(jié)束標(biāo)簽第7頁2.1.2HTML的標(biāo)簽HTML是超文本標(biāo)記語言，主要通過各種標(biāo)簽來標(biāo)識和排列各對象，通常由尖括號“<”、“>”以及其中所包含的標(biāo)簽元素組成。1單標(biāo)簽，只需要單獨使用就能表達意思，語法是：<標(biāo)簽名稱/>2雙標(biāo)簽，

由“開始標(biāo)簽”和“結(jié)束標(biāo)簽”兩部分構(gòu)成，必須成對使用。語法是：<標(biāo)簽>內(nèi)容</標(biāo)簽>3標(biāo)簽屬性，許多單標(biāo)簽和雙標(biāo)簽的開始標(biāo)簽內(nèi)可以包含一些屬性，語法是：<標(biāo)簽名稱

屬性1=屬性值1屬性2=屬性值2…>第8頁主要內(nèi)容2.1HTML簡介2.2編輯網(wǎng)頁2.3創(chuàng)建表單2.4JavaScript簡介2.5文檔對象模型（DOM）2.6瀏覽器對象模型（BOM）2.7本章小結(jié)第9頁2.2編輯網(wǎng)頁在網(wǎng)頁中添加文本、圖像、超鏈接、表格、表單等元素的方法是，在HTML代碼中插入對應(yīng)的標(biāo)簽，并設(shè)置相關(guān)的屬性和內(nèi)容。第10頁2.2.1編輯文本標(biāo)題標(biāo)簽<hn>換行標(biāo)簽<br/>段落標(biāo)簽<p>水平線標(biāo)簽<hr/>第11頁2.2.2編輯列表無序列表<ul>有序列表<ol>定義列表<dl>第12頁2.2.3編輯圖像在HTML中用<img/>標(biāo)簽表示圖像文件，通過其各個屬性可以設(shè)置圖像的大小、對齊方式等等。<img/>標(biāo)簽的常見屬性如表2-3所示。第13頁2.2.4超鏈接超鏈接是包含在網(wǎng)頁中，用于鏈接到其他網(wǎng)頁的元素。在HTML中用<a></a>標(biāo)簽且?guī)в衕ref屬性時表示超鏈接。第14頁2.2.5

創(chuàng)建表格定義表格

表格由<table></table>標(biāo)簽來定義。每個表格均有若干行（由<tr></tr>標(biāo)簽定義），每行被分割為若干單元格（由<td></td>標(biāo)簽定義）。第15頁2.2.5

創(chuàng)建表格2表格的標(biāo)題標(biāo)簽<caption>和表頭標(biāo)簽<th> 表格的標(biāo)題標(biāo)簽<caption>用來設(shè)置表格的標(biāo)題，可由align和valign屬性來設(shè)置其位置。表格的表頭用標(biāo)簽<th>來設(shè)置，表頭是指表格的第一行，用<th>標(biāo)簽替代<td>標(biāo)簽，不同之處在于<th>標(biāo)簽中的內(nèi)容居中加粗顯示。3單元格的設(shè)置

單元格標(biāo)簽<td>必須嵌套在<tr>標(biāo)簽內(nèi)，且成對出現(xiàn)?？梢詫?lt;td>標(biāo)簽的align和valign屬性進行設(shè)置，調(diào)整內(nèi)容的對齊方式。單元格<td>標(biāo)簽的合并屬性有colspan和rowspan，分別用于合并列或合并行。第16頁主要內(nèi)容2.1HTML簡介2.2編輯網(wǎng)頁2.3創(chuàng)建表單2.4JavaScript簡介2.5文檔對象模型（DOM）2.6瀏覽器對象模型（BOM）2.7本章小結(jié)第17頁2.3創(chuàng)建表單表單信息的處理過程為：當(dāng)單擊表單中的“提交”按鈕時，表單中輸入的信息就會傳到服務(wù)器中，然后由服務(wù)器的有關(guān)應(yīng)用程序進行處理，處理后或者將用戶信息存儲到服務(wù)器的數(shù)據(jù)庫中，或者將有關(guān)的信息返回客戶端瀏覽器。一個表單有三個基本組成部分：表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕。用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。第18頁2.3.1

表單的定義<form>標(biāo)簽的作用是設(shè)定表單的起始位置，并指定處理表單數(shù)據(jù)程序的URL地址，表單所包含的控件在<form></form>之間定義?；菊Z法為：<formaction=”url”method=”get/post”name=”value”target=”目標(biāo)窗口”enctype=”編碼方式”>……</form>第19頁2.3.2<input/>標(biāo)簽在HTML表單中，<input/>標(biāo)簽是最常用的控件標(biāo)簽，其基本語法為：<inputname=”控件名稱”type=”控件類型”/>

第20頁2.3.3<textarea></textarea>標(biāo)簽如果用戶需要輸入多行文本，如留言、發(fā)表評論等，就可以使用文本域標(biāo)簽<textarea></textarea>，這是一個雙標(biāo)簽。第21頁2.3.4<select></select>標(biāo)簽菜單和列表都是通過<select></select>和<option></option>標(biāo)簽來實現(xiàn)。在<select>標(biāo)簽中如果沒有設(shè)置size屬性，或者size=1，表示是下拉列表，否則是列表框。第22頁主要內(nèi)容2.1HTML簡介2.2編輯網(wǎng)頁2.3創(chuàng)建表單2.4JavaScript簡介2.5文檔對象模型（DOM）2.6瀏覽器對象模型（BOM）2.7本章小結(jié)第23頁2.4JavaScript簡介JavaScript是一種基于對象和事件驅(qū)動的腳本語言。使用它的目的是與HTML（超文本標(biāo)記語言）一起實現(xiàn)網(wǎng)頁中的動態(tài)交互功能，JavaScript有如下特點?；趯ο蟮恼Z言：JavaScript是一種基于對象的語言，它能創(chuàng)建含有屬性和方法的對象，并能實現(xiàn)對象的繼承。事件驅(qū)動：采用事件驅(qū)動方式,并執(zhí)行指定的操作簡單性：它是一種基于java基本語句和控制流之上的簡單而緊湊的設(shè)計；其次它的變量類型是采用弱類型，未使用嚴(yán)格數(shù)據(jù)的數(shù)據(jù)類型。安全性：它不允許訪問本地硬盤，不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，對數(shù)據(jù)的操作是安全的。動態(tài)性：可以直接對用戶或客戶的輸入做出響應(yīng)，無需經(jīng)過web服務(wù)程序?？缙脚_性：與操作環(huán)境無關(guān)，只依賴于瀏覽器本身，只要計算機支持實現(xiàn)了JavaScript的瀏覽器，它就可被正確執(zhí)行。第24頁2.4.1JavaScript的組成一個完整的JavaScript實現(xiàn)由3個部分組成，核心（ECMAScript）、文檔對象模型（DOM）、瀏覽器模型（BOM）。ECMAScript文檔對象模型（DocumentObjectModel）瀏覽器對象模型（BroswerObjectModel）第25頁2.4.2JavaScript的引入JavaScript必須引入到HTML文檔才能被瀏覽器的JavaScript引擎解析，有3種方式可以將JavaScript引入至HTML文檔。行內(nèi)式嵌入式外部文件第26頁2.4.3JavaScript事件JavaScript是基于對象和事件驅(qū)動的編程語言。Javascript中把某一行為的變化稱為事件，例如鼠標(biāo)點擊、用戶輸入、頁面加載等，都會被當(dāng)做一個事件來對待，并可以對事件做出相應(yīng)的處理。第27頁2.4.3JavaScript事件第28頁2.4.3JavaScript事件第29頁2.4.3JavaScript事件第30頁主要內(nèi)容2.1HTML簡介2.2編輯網(wǎng)頁2.3創(chuàng)建表單2.4JavaScript簡介2.5文檔對象模型（DOM）2.6瀏覽器對象模型（BOM）2.7本章小結(jié)第31頁2.5文檔對象模型（DOM）文檔對象模型（DocumentObjectModel）把整個頁面映射為一個多層節(jié)點結(jié)構(gòu)（樹狀結(jié)構(gòu)），如下圖所示。第32頁2.5.1頁面標(biāo)簽對象的引用為了操作HTML元素，必須首先找到該元素。使用document對象的方法可以得到頁面中所有標(biāo)簽對象的引用。實現(xiàn)的方法有以下三種。1getElementById方法2getElementByName方法3getElementsByTagName方法第33頁2.5.2改變HTML內(nèi)容修改HTML內(nèi)容的最簡單的方法時使用innerHTML

屬性。innerHTML可以將HTML元素的內(nèi)容（位于開始標(biāo)簽和結(jié)束標(biāo)簽之間）改成其他任何內(nèi)容，包括文本或HTML元素。改變HTML元素的內(nèi)容，使用如下語法：

document.getElementById(id).innerHTML=newHTML第34頁2.5.3讀寫HTML對象的屬性當(dāng)獲取到指定的HTML元素（DOM對象）后，就可以使用“HTML元素.屬性名”來訪問元素的HTML屬性。讀取和設(shè)置元素的HTML屬性的方法是：變量=HTML元素.屬性名;//讀取元素的HTML屬性HTML元素.屬性名=屬性值;//設(shè)置元素的HTML屬性第35頁2.5.4改變CSS改變元素的CSS屬性可以使用“HTML元素.style.CSS屬性名”的結(jié)構(gòu)，讀取和設(shè)置HTML元素的CSS屬性的方法如下：變量=HTML元素.style.CSS屬性名;//讀取元素的HTML屬性HTML元素.style.CSS屬性名=屬性值;//設(shè)置元素的HTML屬性第36頁主要內(nèi)容2.1HTML簡介2.2編輯網(wǎng)頁2.3創(chuàng)建表單2.4JavaScript簡介2.5文檔對象模型（DOM）2.6瀏覽器對象模型（BOM）2.7本章小結(jié)第37頁2.6瀏覽器對象模型（BOM）瀏覽器對象模型（BOM）提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象，如圖所示。第38頁2.6.1window對象Window對象代表瀏覽器的整個窗口，是JavaScript的頂層對象。所有JavaScript全局對象、函數(shù)以及變量均自動成為window對象的成員。第39頁第40頁2.6.2loca

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論