1、HTML,WEB第一語言,課程內(nèi)容及學(xué)習(xí)周期,HTML介紹 HTML細節(jié) 文件結(jié)構(gòu) 文字 圖片 鏈接 表格 表單 多窗口 特殊字符 ,在不是很熟悉HTML的情況下，學(xué)習(xí)加練習(xí)的時間應(yīng)該在48個小時 對于已經(jīng)熟悉HTML的讀者可以略過本章 本章內(nèi)容針對程序員進行設(shè)置，不是培養(yǎng)設(shè)計師,HTML簡介,Hyper Text Markup Language 超文本 (文字+圖片+音視+鏈接) 標(biāo)記語言 (瀏覽器根據(jù)標(biāo)記顯示內(nèi)容) 來自于SGML(標(biāo)準(zhǔn)通用標(biāo)記語言) 專注于在Web上傳遞信息 是寫給瀏覽器的語言 歷史 HTML1.0 HTML2.0 (IETF制定) HTML4.0(最終版) W3C IE

2、TF Internet Engineering Task Force HTTP協(xié)議 RFC等 RFC2616 Http1.1 RFC1521 MIME W3C World Wide Web Consortium () HTML XML等 XHTML 符合XML標(biāo)準(zhǔn)的HTML DHTML Dynamic HTML （X）HTML / CSS / JavaScript的綜合運用,HTML語法標(biāo)記,標(biāo)記(標(biāo)簽或元素)的形式 內(nèi)容 Eg. 文字 Eg. Eg. 位于尖括號內(nèi)，可以具有屬性值 屬性值必須“” 或 ，不寫也可以解析， 但是不推薦（不符合XHTML） 有開始必須有結(jié)束(X

3、HTML) 標(biāo)簽不能嵌套 不區(qū)分大小寫 但應(yīng)該養(yǎng)成良好的編程習(xí)慣，推薦都用小寫,Html文檔結(jié)構(gòu),典型HTML我會努力的！ ,01.html,head中的常用標(biāo)簽,文字 “文字”將顯示在瀏覽器標(biāo)題欄上 ：用于設(shè)置一些頭信息 定義CSS格式 用于定義腳本，Eg. Javascript,http-equiv指明下面要設(shè)置的項目 content指明該項目設(shè)置的內(nèi)容,02.html, 標(biāo)簽, 色彩值 “#rrggbb” Eg. 紅綠藍數(shù)字值 body其他屬性 text link alink vlink bgcolor leftmargin topmargin,03.html,04.html,錨點標(biāo)簽-

4、, 在該位置定義名字為AnchorName的錨，就是給這個位置起了個名字，別人可以用這個名字直接鏈接到該文件的這個位置,鏈接標(biāo)簽-,超級鏈接，跳轉(zhuǎn)到另一文件 文字 當(dāng)鼠標(biāo)點擊“文字”時，TargetWindow的內(nèi)容將會跳轉(zhuǎn)到“url”，不指定target時在本窗口跳轉(zhuǎn)。 連接到文件的特定部分 Href=“url#point” 鏈接到url的point部分 在url文檔中用標(biāo)識 Target 見“框架“部分,05.html06.html,路徑問題,本地路徑 c:dir1dir2 絕對路徑 相對路徑 images/01.jpg ././images/01.jpg /images/01.jpg =

5、 http:/mysite/images/01.jpg Eg. Eg. ,07.html,相對于URL地址,URL URI URN,URL Uniform Resource Locator（統(tǒng)一資源定位符） 網(wǎng)絡(luò)協(xié)議 主機名 端口號 資源名（定位標(biāo)記） :80/index.html#top 帶有參數(shù)的url 及 url編碼問題 見Servlet / JSP部分 URN Uniform Resource Name 持久可用的資源標(biāo)準(zhǔn)名稱 例如郵箱名 URI Uniform Resource Identifier 包含URL和URN,URI_URL_URN.html,分隔線-,語法 Size 高度

6、 Align 對齊方式，可以取left或right Noshade 無陰影效果 顏色 Eg. ,08.html,標(biāo)題字體大小-, #=1、2、3、4、5、6 按標(biāo)題級別用黑體字顯示標(biāo)題內(nèi)容 自動插入空行 最大 最小,09.html,字體設(shè)置, face定義字體 size 1 2 3 4 5 6 7 實際 8 10 12 14 18 24 36（pixels） Color可以使用預(yù)定義的名字,也可以使用數(shù)字 red、blue、black 通常是打字機風(fēng)格字體 通常是引用方式（斜體） 強調(diào)（通常是斜體加粗體）,10.html,設(shè)置文字顯示,11.html,特殊字符,12.html,可以使用,文字的

7、布局, 分段落現(xiàn)實 分塊顯示 符號列表 數(shù)字列表 換行 不換行 保留原有格式 跑馬燈效果 ,13.html,對齊align, 取值:left right center top middle bottom 對齊到中間,14.html,圖片, Src 圖片路徑，一般使用相對路徑 Alt 圖片無法顯示時顯示的文字 Border 邊框的厚度 Align = left right top middle bottom圖文混排時用于和圖片的對齊,15.html,圖片與鏈接 見DreamWeaver演示,表格重點掌握, ,%或像素值,表頭（可選）,單元格,top middle bottom,跨行,跨列,16.

8、html,table的屬性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight,表單重點掌握,作用 收集用戶信息 數(shù)據(jù)庫查詢 收發(fā)email 用戶不僅僅是信息的被動接受者，還可以通過表單成為信息的主動發(fā)出者,表單基礎(chǔ)-, 的屬性 Method (get post) Get 發(fā)送較少數(shù)據(jù)（256byte），顯示在url中，url/userinfo?username=張三 屬性2:值2 01.html,CSS的調(diào)用方式,在Head中調(diào)用(01.html) 在Body中調(diào)用(02.html) 調(diào)用

9、css文件(03.html/03.css) CSS的優(yōu)先級問題 按照最靠近元素的定義來顯示(04.html) 如果兩個css文件沖突,以后面的為準(zhǔn),CLASS font-family:serif P A 06_2.html 注釋： /*這是注釋*/,字體屬性,例：07.html,顏色與背景屬性,例：08.html,文本屬性,例：09.html,Em:12pixels 的 M常用于印刷的單位,裝飾超鏈接 偽類選擇符,對鏈接的修飾 A:link 未訪問時的狀態(tài) A:visited 訪問過后的狀態(tài) A:active 鼠標(biāo)點中不放時的狀態(tài) A:hover 鼠標(biāo)劃過時的狀態(tài) 10.html,邊距屬性,例

10、：11.html,填充屬性,例：12.html,邊框?qū)傩?例：13.html,圖文混排,例：14.html,列表屬性,例：15.html,鼠標(biāo)屬性,例：16.html,定位屬性,例：17.html 18.html,濾鏡屬性,例：19.html,CSS布局 CSS框架,DreamWeaver,認(rèn)識DreamWeaver 練習(xí)使用DreamWeaver 用DreamWeaver畫表格和表單 用DreamWeaver來應(yīng)用CSS,JavaScript,WEB魔術(shù)師,本章內(nèi)容的學(xué)習(xí)周期,視熟悉程度，應(yīng)該在416小時左右，可以達到入門并熟悉常用操作的目的，例如：打開新窗口、判斷表單輸入等。當(dāng)然了，jav

11、ascript是一門獨立的語言，如果應(yīng)用的好，可以作出很多豐富多彩的效果，甚至游戲。,課程內(nèi)容,Javascript介紹 Javascript語言,視熟悉程度，應(yīng)該在416小時左右，可以達到入門并熟悉常用操作的目的，例如：打開新窗口、判斷表單輸入等。當(dāng)然了，JavaScript是一門獨立的語言，如果應(yīng)用的好，可以作出很多豐富多彩的效果，甚至游戲。,程序開發(fā)分為客戶端、服務(wù)器端,客戶端開發(fā)的好處 減少客戶端到服務(wù)器端的往返。 表單驗證 服務(wù)器端開發(fā)的好處 web應(yīng)用的核心邏輯集中管理 胖客戶端、瘦客戶端,客戶端編程的主要技術(shù),javascript（最主要的） vbscript jscript a

12、pplet activex組件 plug-in技術(shù)（價值在于：讓專家級程序員開發(fā)新型語言） flash技術(shù)的最新發(fā)展 jsdk包含的plug-in yahoo 的工具條 百度搜索伴侶 CNNIC網(wǎng)絡(luò)實名等 3721,學(xué)習(xí)資料,msdnjscript參考 CoreGuideJS15.zip CoreReferenceJS15.zip JavaScript手冊中文.chm JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf,JavaScript and ECMA versions,JavaScript和Jav

13、a的區(qū)別,基于對象和面向?qū)ο?解釋和編譯 強變量和弱變量 JavaScript中變量聲明，采用其弱類型。 即變量在使用前不需作聲明，而是解釋器在運行時檢查其數(shù)據(jù)類型 x=1234; /數(shù)值型變量 y“4321”; /字符型變量 代碼格式不一樣 嵌入方式不一樣,JavaScript,JavaScript是一種描述式語言，它與HTML結(jié)合起來，用于增強功能，并提高與最終用于之間的交互性能 由Netscape公司利用Sun的Java開發(fā) 它是與Java完全不同的一種語言。雖然在結(jié)構(gòu)和語法上與Java類似，但是，它只是函數(shù)式的語言。 客戶端的JavaScript 必須要有瀏覽器的支持 JavaScri

14、pt (ECMAScript) 基礎(chǔ)語法 DOM Document Object Model BOM Brower Object Model JavaScript/jscript / ECMAScript avaScript是由Netscape公司開發(fā) .它的前身是Live Script Microsoft發(fā)行jscript用于internet explorer 最初的jscript和javascript差異過大，web程序員不得不痛苦的為兩種瀏覽器編寫兩種腳本。于是誕生了ECMAScript,是一種國際標(biāo)準(zhǔn)化的javascript版本?，F(xiàn)在的主流瀏覽器都支持這種版本。,ECMAScript,

15、ECMAScript并不與任何具體瀏覽器相綁定 一個完整的JavaScript實現(xiàn)是由以下3個不同部分組成的（見圖1-1）： 核心（ECMAScript） 文檔對象模型（DOM）； 瀏覽器對象模型（BOM）。,在網(wǎng)頁中加入JavaScript,通過在網(wǎng)頁中加入標(biāo)記JavaScript的開始和結(jié)束，將JavaScript代碼放到之間 (1.htm) 也可以引入一個外部的JavaScript文件，這個JavaScript文件一般以.js作為擴展名 (2.htm) 原則上，放在之間。但視情況可以放在網(wǎng)頁的任何部分 (3.htm) 一個頁面可以有幾個/Script，不同部分的方法和變量，可以共享。 (

16、4.htm),JavaScript的數(shù)據(jù)類型,The primary (primitive) data types are: String Number Boolean The composite (reference) data types are: Object Array The special data types are: Null Undefined (var a;),控制字符,JavaScript中有些以反斜杠（）開頭的不可顯示的特殊字符。通常稱為控制字符。 b :表示退格符。 f :表示換頁。 n :表示換行符。 r :表示回車符。 t :表示Tab符號。 :表示單引號本身。

17、:表示雙引號本身。,類型轉(zhuǎn)換,var a=3; var b=10; var c=true; alert(a+b); alert(b+c); alert(a+c);,JavaScript基本語法,變量 JavaScript是一門弱類型的語言，所有的變量定義均以var來實現(xiàn) JavaScript的變量建議先定義，再使用 JavaScript區(qū)分大小寫 雖然JavaScript可以不需定義即可直接使用變量，但不建議這么做 (5.htm) 數(shù)組定義 var arr = new Array(3); 通過arr.length取得數(shù)組的長度 (6.htm) 注釋的寫法和java的一樣,數(shù)組,使用方式： my

18、array=new Array(num) myarray=new Array(value1,value2) aa = new Array(3); aa20 = 444; document.write (aa20); num不設(shè)定，則按數(shù)組默認(rèn)的最大長度自動設(shè)定。例如： aa = new Array(); aa20 = 444; document.write (aa.length); ,JavaScript基本語法運算符,算術(shù)運算 +、-、*、/ 、=、=、= (7.htm) 邏輯運算 與： strVariable = strVariable.big().big().big().big().bi

19、g().big().big().big().big(); strVariable = strVariable.bold(); strVariable = strVariable.link(); document.write(strVariable); This is a string object,substring、indexOf,substring(start,end) 返回字符串的子字符串 案例：substring.htm indexOfcharactor,fromIndex 字符搜索 案例：indexOf.htm,Math對象,常用方法： abs() 絕對值 sin() , cos()

20、 正弦余弦值 asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切 round() 四舍五入 sqrt() 平方根 pow(x,y) x的y次方,案例： Math.htm,Date對象,創(chuàng)建方式： myDate = new Date(); 日期起始值:9年月日: 主要方法 getYear(): 返回年數(shù) setYear(): 設(shè)置年數(shù) getMonth(): 返回月數(shù) setMonth():設(shè)置月數(shù) getDate(): 返回日數(shù) setDate():設(shè)置日數(shù) getDay(): 返回星期幾 setDay():設(shè)置星期數(shù) getHours():返回小時數(shù) se

21、tHours():設(shè)置小時數(shù) getMinutes():返回分鐘數(shù) setMintes():設(shè)置分鐘數(shù) getSeconds():返回秒數(shù) setSeconds():設(shè)置秒數(shù) getTime() : 返回毫秒數(shù) setTime() :設(shè)置毫秒數(shù),案例： Date.htm,JavaScript基本語法函數(shù),函數(shù)的使用 利用function來定義一個函數(shù) (18.htm) 傳入?yún)?shù) (19.htm) 傳出值 (20.htm),函數(shù)的參數(shù)傳遞,preloadTreeImages(1.gif,2.gif,3.gif); function preloadTreeImages() for (var i =

22、 0; i arguments.length; i+) var img = document.createElement(img); img.src = argumentsi; div1.appendChild(img); ,JavaScript事件處理,onFocus：在用戶為了輸入而選擇select、text、textarea等時 (onFocus.htm) onBlur：在select、text、password、textarea失去焦點時 (onBlur.htm) onChange：在select、text、textarea的值被改變且失去焦點時 (onChange.htm/Selec

23、tionChange.htm) onClick：在一個對象被鼠標(biāo)點中時（button,checkbox,radio,link,reset,submit,text,textarea等） (onClick.htm) onLoad：出現(xiàn)在一個文檔完成對一個窗口的載入時 (onLoad.htm) onUnload：當(dāng)用戶退出一個文檔時 (onload.htm) onMouseOver：鼠標(biāo)被移動到一個對象上時 (onMouse.htm) onMouseOut：鼠標(biāo)從一個對象上移開時 (onMouse.htm) onSelect：當(dāng)form對象中的內(nèi)容被選中時 (onSelect.htm) onSubm

24、it：出現(xiàn)在用戶通過提交按鈕提交一個表單時 (onSubmit.htm),JavaScript的對話框,警告框(alert)：出現(xiàn)一個提示信息 21.htm 詢問框(prompt)：返回輸入的值 22.htm 確認(rèn)框(confirm)：根據(jù)不同的選擇，返回true/false 23.htm,使用eval,不使用eval alert (3+2); -32 使用eval的上下文環(huán)境 alert (eval(3) + eval(2); -5 eval()函數(shù)可以把一個字符串當(dāng)作一個JavaScript表達式一樣去執(zhí)行它,eval_1.htm,Eval_2.htm,javascript hijacki

25、ng,函數(shù)劫持 通過替換js函數(shù)的實現(xiàn)來達到劫持這個函數(shù)調(diào)用的目的,hook.htm,this指的是當(dāng)前的對象,24.htm 函數(shù)調(diào)用時使用this object.htm 自定義對象,隨時可以增加屬性,方法 class.htm 定義類,對象,forin In后跟一個對象，對此對象中的所有元素循環(huán)一次 (25.htm 25_1.htm) with 為一段代碼建立一個缺省的對象，任何無對象的屬性引用，都將使用該缺省的對象 (26.htm) new 用于生成一個新的對象 (27.htm),TryCatch,try document.writeln(Beginnng the try block) do

26、cument.writeln(No exceptions yet) / Create a syntax error eval(6 + * 3) document.writeln(Finished the try block with no exceptions) catch(err) document.writeln(Exception caught, ) document.writeln(Error name: + ) document.writeln(Error message: + err.message) ,窗口中的對象和元素(BOM),window 當(dāng)前窗口（28.h

27、tm） 新開窗口（29.htm） 通過本地窗口控制新開窗口 (30.htm) location 獲取或設(shè)置現(xiàn)有文檔的URL (31.htm) history 先前訪問過的URL的歷史列表 常用方法：back()，go(number) (32.htm/33.htm) document 當(dāng)前的文檔對象 document.write()：向客戶端瀏覽器輸出內(nèi)容 document.formName：可以用這個方法得到表單名稱 document.referrer,Browser Object Model,技巧：setTimeout、setInterval, /var a = window.setInterval(alert(Hello,