web課程要點(diǎn)課件

第1章Web前端開發(fā)技術(shù)綜述建議課時(shí)：1-2課時(shí)第1章Web前端開發(fā)技術(shù)綜述建議課時(shí)：1-2課時(shí)本章學(xué)習(xí)目標(biāo)Web前端開發(fā)工程師應(yīng)掌握以下內(nèi)容：了解Web發(fā)展史；了解Web前端開發(fā)工程師職業(yè)需求掌握Web網(wǎng)站相關(guān)的基本概念；理解Web前端開發(fā)技術(shù)及其在Web網(wǎng)頁(yè)中的作用；了解常用的Web前端開發(fā)工具、瀏覽器工具，并學(xué)會(huì)使用。本章學(xué)習(xí)目標(biāo)Web前端開發(fā)工程師應(yīng)掌握以下內(nèi)容：1.1Web概述1980年TimBerners-Lee（同義蒂姆·伯納斯·李）在歐洲核子物理實(shí)驗(yàn)室工作時(shí)建議建立一個(gè)以超文本系統(tǒng)為基礎(chǔ)的項(xiàng)目來(lái)使得科學(xué)家之間能夠分享和更新他們的研究結(jié)果。他與RobertCailliau一起建立了一個(gè)叫做ENQUIRE的原型系統(tǒng)。1984年TimBerners-Lee蒂姆·伯納斯·李重返歐洲核子物理實(shí)驗(yàn)室創(chuàng)造了萬(wàn)維網(wǎng)。為此他寫了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器（WorldWideWeb）和第一個(gè)網(wǎng)頁(yè)服務(wù)器（httpd）。TimBerners-Lee建立了第一個(gè)網(wǎng)站（也是世界上第一個(gè)網(wǎng)站）是http://info.cern.ch/，它于1991年8月6日上網(wǎng)，它解釋了萬(wàn)維網(wǎng)是什么，如何使用網(wǎng)頁(yè)瀏覽器和如何建立一個(gè)網(wǎng)頁(yè)服務(wù)器等等。TimBerners-Lee后來(lái)在這個(gè)網(wǎng)站里列舉了其它網(wǎng)站，因此它也是世界上第一個(gè)萬(wàn)維網(wǎng)目錄。1.1Web概述1980年TimBerners-Lee（1.1.1Web的起源追溯到遙遠(yuǎn)的1980年TimBerners-Lee構(gòu)建的ENQUIRE項(xiàng)目。1989年3月，TimBerners-Lee撰寫了《關(guān)于信息化管理的建議》一文，文中提及ENQUIRE并且描述了一個(gè)更加精巧的管理模型。1990年11月12日他和RobertCailliau（羅伯特·卡里奧）合作提出了一個(gè)更加正式的關(guān)于萬(wàn)維網(wǎng)的建議。在1990年11月13日他在一臺(tái)NeXT工作站上寫了第一個(gè)網(wǎng)頁(yè)以實(shí)現(xiàn)他文中的想法。1991年8月6日，他在alt.hypertext新聞組上貼了萬(wàn)維網(wǎng)項(xiàng)目簡(jiǎn)介的文章。這一天也標(biāo)志著因特網(wǎng)上萬(wàn)維網(wǎng)公共服務(wù)的首次亮相。1.1.1Web的起源追溯到遙遠(yuǎn)的1980年TimBer1.1.1Web的起源（續(xù)）1994年10月非贏利性的萬(wàn)維網(wǎng)聯(lián)盟W3C（WorldWideWebConsortium）在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立。W3C負(fù)責(zé)WWW技術(shù)標(biāo)準(zhǔn)化的協(xié)議制定，并進(jìn)一步推動(dòng)Web技術(shù)的發(fā)展。1.1.1Web的起源（續(xù)）1994年10月非贏利性的萬(wàn)維1.1.2Web的特點(diǎn)1.Web是易導(dǎo)航和圖形化2.Web是具有平臺(tái)無(wú)關(guān)性3.Web是支持分布式結(jié)構(gòu)4.Web是具有動(dòng)態(tài)性5.Web是具有交互性1.1.2Web的特點(diǎn)1.Web是易導(dǎo)航和圖形化1.1.3Web工作原理1.1.3Web工作原理1.2Web前端開發(fā)工程師職業(yè)需求1.2.1Web前端開發(fā)的由來(lái)我國(guó)互聯(lián)網(wǎng)行業(yè)的發(fā)展呈現(xiàn)迅猛的增長(zhǎng)勢(shì)頭，對(duì)網(wǎng)站開發(fā)、設(shè)計(jì)制作的人才需求隨之大量增加。前端開發(fā)和后臺(tái)開發(fā)人員的比例為1：1，而在我國(guó)目前依舊在1：3以下，人才缺口較大。1.2.2Web前端開發(fā)工程師的職業(yè)要求1.必須掌握基本的Web前端開發(fā)技術(shù)，其中包括：(X)HTML、CSS、JavaScript、DOM、BOM、Ajax等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。2.必須掌握網(wǎng)站性能優(yōu)化、搜索引擎優(yōu)化（SEO）和服務(wù)器端技術(shù)的基礎(chǔ)知識(shí)。3.必須學(xué)會(huì)運(yùn)用各種Web前端開發(fā)與測(cè)試工具進(jìn)行輔助開發(fā)。4.除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持等。1.2Web前端開發(fā)工程師職業(yè)需求1.2.1Web前1.3Web前端開發(fā)技術(shù)1.3.1HTMLHTML（HypertextTextMarkupLanguage）超文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言SGML（StandardGeneralizedMarkupLanguage是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國(guó)際標(biāo)準(zhǔn)語(yǔ)言，是所有電子文檔標(biāo)記語(yǔ)言的起源）下的一個(gè)應(yīng)用，也是一種標(biāo)準(zhǔn)規(guī)范，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。HTML是構(gòu)成Web頁(yè)面(Page)的基礎(chǔ)。1.3Web前端開發(fā)技術(shù)1.3.1HTML1.3.1HTML超文本標(biāo)記語(yǔ)言的發(fā)展歷史HTML1.0：1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布；HTML2.0：1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)；HTML3.2：1996年1月14日發(fā)布，W3C推薦標(biāo)準(zhǔn)；HTML4.0：1997年12月18日發(fā)布，W3C推薦標(biāo)準(zhǔn)；HTML4.01：1999年12月24日發(fā)布，W3C推薦標(biāo)準(zhǔn)；HTML5：2008年1月22日發(fā)布，仍繼續(xù)完善。1.3.1HTML超文本標(biāo)記語(yǔ)言的發(fā)展歷史2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念統(tǒng)一資源定位符統(tǒng)一資源定位符（UniformResourceLocator，URL）也被稱為網(wǎng)頁(yè)地址，如同在網(wǎng)絡(luò)上的門牌，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址（Address)。協(xié)議類型://服務(wù)器地址（端口號(hào)）/路徑/文件名http://info.cern.ch/www20/0002/kexuetansuo_12385/index.shtml序號(hào)服務(wù)（協(xié)議）類型含義1http超文本傳輸協(xié)議資源2https用加密傳送的超文本傳輸協(xié)議3ftp文件傳輸協(xié)議4mailto電子郵件地址5ldap輕型目錄訪問(wèn)協(xié)議搜索6newsUsenet新聞組7file當(dāng)?shù)仉娔X或網(wǎng)上分享的文件8gopherGopher協(xié)議2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念統(tǒng)一資源定位符序號(hào)服務(wù)（協(xié)議）類型2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念（續(xù)）網(wǎng)站網(wǎng)頁(yè)首頁(yè)超鏈接超鏈接（HyperLink）是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應(yīng)用程序。超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。<ahref="">百科</a>2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念（續(xù)）網(wǎng)站1.3.2CSS層疊樣式表CSS（CascadingStyleSheet）級(jí)聯(lián)樣式表1.CSS作用可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。1.3.2CSS層疊樣式表CSS（CascadingS1.3.2CSS（續(xù)）2.CSS發(fā)展歷史CSS1:1996年12月17日發(fā)布，W3C推薦標(biāo)準(zhǔn)，1999年1月11日重新修訂；CSS2：1999年1月11日發(fā)布，W3C推薦標(biāo)準(zhǔn)，CSS2添加了對(duì)媒介（打印機(jī)和聽覺設(shè)備）、可下載字體的支持；CSS3：計(jì)劃將CSS劃分為更小的模塊，這些模塊包括：盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。1.3.2CSS（續(xù)）2.CSS發(fā)展歷史1.3.3JavaScriptJavaScript的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁(yè)包含更多活躍元素和更加精彩的內(nèi)容。1.JavaScript由來(lái)JavaScript最初由網(wǎng)景公司（Netscape）的BrendanEich設(shè)計(jì)，是一種由Netscape的LiveScript發(fā)展而來(lái)的客戶端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，提供數(shù)據(jù)驗(yàn)證的基本功能。2.JavaScript組成一個(gè)完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的：核心（ECMAScript）文檔對(duì)象模型（DOM）瀏覽器對(duì)象模型（BOM）1.3.3JavaScriptJavaS1.3.3JavaScript案例1.3.3JavaScript案例1.3.4HTMLDOMHTMLDOM是DocumentObjectModel文檔對(duì)象模1.DOM由來(lái)DOM的歷史追溯至1990年以后代后期Microsoft與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。2.DOM結(jié)構(gòu)1.3.4HTMLDOMHTMLDOM是Docume1.3.4HTMLDOM（續(xù)）3.HTMLDOMLevelDOMLevel1：1998年10月發(fā)布，W3C推薦規(guī)范。含有DOMCore和DOMHTML兩個(gè)模塊；DOMLevel2：引入DOM視圖、DOM事件、DOM樣式、DOM遍歷和范圍；用于處理新的接口類型；DOMLevel3：引入了以統(tǒng)一的方式載入和保持文檔的方法,包含在新模塊DOMLoadandSave和DOMValidation方法，從而進(jìn)一步擴(kuò)展了DOM。1.3.4HTMLDOM（續(xù)）3.HTMLDOML1.3.5BOMBOM(BrowserObjectModel)，瀏覽器對(duì)象模型。瀏覽器對(duì)象模型定義了JavaScript可以進(jìn)行操作的瀏覽器的各個(gè)功能部件的接口，提供訪問(wèn)文檔各個(gè)功能部件（如窗口本身、屏幕功能部件、瀏覽歷史記錄等）的途徑以及操作方法。IE3.0和NetscapeNavigator3.0瀏覽器提供了一個(gè)瀏覽器對(duì)象模型特性，可以對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作。由于沒有相關(guān)的BOM標(biāo)準(zhǔn)，每種瀏覽器都有自己的BOM實(shí)現(xiàn)。有一些事實(shí)上的標(biāo)準(zhǔn)，如具有一個(gè)窗口對(duì)象和一個(gè)導(dǎo)航對(duì)象，不過(guò)每種瀏覽器可以為這些對(duì)象或其他對(duì)象定義自己的屬性和方法。常見BOM對(duì)象有Window對(duì)象、Navigator對(duì)象、Screen對(duì)象、History對(duì)象、Location對(duì)象等。1.3.5BOMBOM(BrowserObjectMo1.3.6AJAX1.AJAX工作原理Ajax的核心是JavaScript對(duì)象XMLHttpRequest。該對(duì)象在InternetExplorer5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XMLHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。2.AJAX優(yōu)點(diǎn)AJAX給我們帶來(lái)的好處歸納起來(lái)有以下幾點(diǎn)：最大的一點(diǎn)是頁(yè)面無(wú)刷新，在頁(yè)面內(nèi)與服務(wù)器通信，給用戶的體驗(yàn)非常好；使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力；可以把服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求、響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)?；跇?biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。1.3.6AJAX1.AJAX工作原理1.3.6AJAX（續(xù)）3.AJAX的缺點(diǎn)因?yàn)槠綍r(shí)大多注意的都是AJAX給我們所帶來(lái)的好處諸如用戶體驗(yàn)的提升。而對(duì)AJAX所帶來(lái)的缺陷有所忽視。下面所闡述的AJAX的缺陷：AJAX破壞瀏覽器的前進(jìn)與后退功能，使得用戶的習(xí)慣得不到延續(xù)；安全問(wèn)題；對(duì)搜索引擎的支持比較弱；破壞了程序的異常機(jī)制；違背了URL和資源定位的初衷；一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持AJAX。1.3.6AJAX（續(xù)）3.AJAX的缺點(diǎn)1.4Web前端開發(fā)工具1.4.1NotePad1.4.2EditPlus1.4.3TextPad1.4.4Dreamweaver1.4.5TopStyle1.4.6CSS3Menu1.4.7SothinkTreeMenu1.4.8ColorImpact1.4Web前端開發(fā)工具1.4.1NotePad1.5瀏覽器工具1.5.1InternetExplorer1.5.2MozillaFirefox1.5.3GoogleChrome1.5.4Oprea1.5.5手機(jī)瀏覽器UC1.5瀏覽器工具1.5.1InternetExpl1.6綜合案例1.6綜合案例11.5定義域和域標(biāo)題11.5定義域和域標(biāo)題本章小結(jié)本章從Web概述、Web前端開發(fā)工程師職業(yè)要求、Web前端開發(fā)技術(shù)、Web前端開發(fā)工具、Web瀏覽器等五大方面對(duì)Web前端開發(fā)技術(shù)進(jìn)行綜述。重點(diǎn)闡述了Web概述、Web起源、Web特點(diǎn)、Web工作原理。為適應(yīng)互聯(lián)網(wǎng)行業(yè)迅速發(fā)展對(duì)IT開發(fā)人才的需要，介紹了Web前端開發(fā)工程師這一緊缺崗位的職業(yè)需求。Web前端開發(fā)技術(shù)重點(diǎn)介紹了Web網(wǎng)頁(yè)設(shè)計(jì)的“三劍客”，分別是HTML、CSS、JavaScript，三者在網(wǎng)頁(yè)設(shè)計(jì)中扮演了重要的角色。其中HTML是Web網(wǎng)頁(yè)信息結(jié)構(gòu)基礎(chǔ)；CSS是Web網(wǎng)頁(yè)表現(xiàn)技術(shù)，對(duì)網(wǎng)頁(yè)布局、字體、顏色、背景和其它效果實(shí)施更加精確的控制；JavaScript和HTMLDOM是網(wǎng)頁(yè)的行為，實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)、交互的功能。AJAX在瀏覽器與Web服務(wù)器之間使用異步數(shù)據(jù)傳輸，這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。Web前端開發(fā)工具重點(diǎn)介紹了目前Web前端開發(fā)常用的工具。Web瀏覽器重點(diǎn)介紹各大主流網(wǎng)絡(luò)瀏覽器，通過(guò)使用了解瀏覽器之間的差異性。本章小結(jié)本章從Web概述、Web前端開發(fā)工程師職業(yè)要求、We第1章Web前端開發(fā)技術(shù)綜述建議課時(shí)：1-2課時(shí)第1章Web前端開發(fā)技術(shù)綜述建議課時(shí)：1-2課時(shí)本章學(xué)習(xí)目標(biāo)Web前端開發(fā)工程師應(yīng)掌握以下內(nèi)容：了解Web發(fā)展史；了解Web前端開發(fā)工程師職業(yè)需求掌握Web網(wǎng)站相關(guān)的基本概念；理解Web前端開發(fā)技術(shù)及其在Web網(wǎng)頁(yè)中的作用；了解常用的Web前端開發(fā)工具、瀏覽器工具，并學(xué)會(huì)使用。本章學(xué)習(xí)目標(biāo)Web前端開發(fā)工程師應(yīng)掌握以下內(nèi)容：1.1Web概述1980年TimBerners-Lee（同義蒂姆·伯納斯·李）在歐洲核子物理實(shí)驗(yàn)室工作時(shí)建議建立一個(gè)以超文本系統(tǒng)為基礎(chǔ)的項(xiàng)目來(lái)使得科學(xué)家之間能夠分享和更新他們的研究結(jié)果。他與RobertCailliau一起建立了一個(gè)叫做ENQUIRE的原型系統(tǒng)。1984年TimBerners-Lee蒂姆·伯納斯·李重返歐洲核子物理實(shí)驗(yàn)室創(chuàng)造了萬(wàn)維網(wǎng)。為此他寫了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器（WorldWideWeb）和第一個(gè)網(wǎng)頁(yè)服務(wù)器（httpd）。TimBerners-Lee建立了第一個(gè)網(wǎng)站（也是世界上第一個(gè)網(wǎng)站）是http://info.cern.ch/，它于1991年8月6日上網(wǎng)，它解釋了萬(wàn)維網(wǎng)是什么，如何使用網(wǎng)頁(yè)瀏覽器和如何建立一個(gè)網(wǎng)頁(yè)服務(wù)器等等。TimBerners-Lee后來(lái)在這個(gè)網(wǎng)站里列舉了其它網(wǎng)站，因此它也是世界上第一個(gè)萬(wàn)維網(wǎng)目錄。1.1Web概述1980年TimBerners-Lee（1.1.1Web的起源追溯到遙遠(yuǎn)的1980年TimBerners-Lee構(gòu)建的ENQUIRE項(xiàng)目。1989年3月，TimBerners-Lee撰寫了《關(guān)于信息化管理的建議》一文，文中提及ENQUIRE并且描述了一個(gè)更加精巧的管理模型。1990年11月12日他和RobertCailliau（羅伯特·卡里奧）合作提出了一個(gè)更加正式的關(guān)于萬(wàn)維網(wǎng)的建議。在1990年11月13日他在一臺(tái)NeXT工作站上寫了第一個(gè)網(wǎng)頁(yè)以實(shí)現(xiàn)他文中的想法。1991年8月6日，他在alt.hypertext新聞組上貼了萬(wàn)維網(wǎng)項(xiàng)目簡(jiǎn)介的文章。這一天也標(biāo)志著因特網(wǎng)上萬(wàn)維網(wǎng)公共服務(wù)的首次亮相。1.1.1Web的起源追溯到遙遠(yuǎn)的1980年TimBer1.1.1Web的起源（續(xù)）1994年10月非贏利性的萬(wàn)維網(wǎng)聯(lián)盟W3C（WorldWideWebConsortium）在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立。W3C負(fù)責(zé)WWW技術(shù)標(biāo)準(zhǔn)化的協(xié)議制定，并進(jìn)一步推動(dòng)Web技術(shù)的發(fā)展。1.1.1Web的起源（續(xù)）1994年10月非贏利性的萬(wàn)維1.1.2Web的特點(diǎn)1.Web是易導(dǎo)航和圖形化2.Web是具有平臺(tái)無(wú)關(guān)性3.Web是支持分布式結(jié)構(gòu)4.Web是具有動(dòng)態(tài)性5.Web是具有交互性1.1.2Web的特點(diǎn)1.Web是易導(dǎo)航和圖形化1.1.3Web工作原理1.1.3Web工作原理1.2Web前端開發(fā)工程師職業(yè)需求1.2.1Web前端開發(fā)的由來(lái)我國(guó)互聯(lián)網(wǎng)行業(yè)的發(fā)展呈現(xiàn)迅猛的增長(zhǎng)勢(shì)頭，對(duì)網(wǎng)站開發(fā)、設(shè)計(jì)制作的人才需求隨之大量增加。前端開發(fā)和后臺(tái)開發(fā)人員的比例為1：1，而在我國(guó)目前依舊在1：3以下，人才缺口較大。1.2.2Web前端開發(fā)工程師的職業(yè)要求1.必須掌握基本的Web前端開發(fā)技術(shù)，其中包括：(X)HTML、CSS、JavaScript、DOM、BOM、Ajax等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。2.必須掌握網(wǎng)站性能優(yōu)化、搜索引擎優(yōu)化（SEO）和服務(wù)器端技術(shù)的基礎(chǔ)知識(shí)。3.必須學(xué)會(huì)運(yùn)用各種Web前端開發(fā)與測(cè)試工具進(jìn)行輔助開發(fā)。4.除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持等。1.2Web前端開發(fā)工程師職業(yè)需求1.2.1Web前1.3Web前端開發(fā)技術(shù)1.3.1HTMLHTML（HypertextTextMarkupLanguage）超文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言SGML（StandardGeneralizedMarkupLanguage是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國(guó)際標(biāo)準(zhǔn)語(yǔ)言，是所有電子文檔標(biāo)記語(yǔ)言的起源）下的一個(gè)應(yīng)用，也是一種標(biāo)準(zhǔn)規(guī)范，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。HTML是構(gòu)成Web頁(yè)面(Page)的基礎(chǔ)。1.3Web前端開發(fā)技術(shù)1.3.1HTML1.3.1HTML超文本標(biāo)記語(yǔ)言的發(fā)展歷史HTML1.0：1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布；HTML2.0：1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)；HTML3.2：1996年1月14日發(fā)布，W3C推薦標(biāo)準(zhǔn)；HTML4.0：1997年12月18日發(fā)布，W3C推薦標(biāo)準(zhǔn)；HTML4.01：1999年12月24日發(fā)布，W3C推薦標(biāo)準(zhǔn)；HTML5：2008年1月22日發(fā)布，仍繼續(xù)完善。1.3.1HTML超文本標(biāo)記語(yǔ)言的發(fā)展歷史2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念統(tǒng)一資源定位符統(tǒng)一資源定位符（UniformResourceLocator，URL）也被稱為網(wǎng)頁(yè)地址，如同在網(wǎng)絡(luò)上的門牌，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址（Address)。協(xié)議類型://服務(wù)器地址（端口號(hào)）/路徑/文件名http://info.cern.ch/www20/0002/kexuetansuo_12385/index.shtml序號(hào)服務(wù)（協(xié)議）類型含義1http超文本傳輸協(xié)議資源2https用加密傳送的超文本傳輸協(xié)議3ftp文件傳輸協(xié)議4mailto電子郵件地址5ldap輕型目錄訪問(wèn)協(xié)議搜索6newsUsenet新聞組7file當(dāng)?shù)仉娔X或網(wǎng)上分享的文件8gopherGopher協(xié)議2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念統(tǒng)一資源定位符序號(hào)服務(wù)（協(xié)議）類型2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念（續(xù)）網(wǎng)站網(wǎng)頁(yè)首頁(yè)超鏈接超鏈接（HyperLink）是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件，甚至是一個(gè)應(yīng)用程序。超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。<ahref="">百科</a>2.Web網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念（續(xù)）網(wǎng)站1.3.2CSS層疊樣式表CSS（CascadingStyleSheet）級(jí)聯(lián)樣式表1.CSS作用可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。1.3.2CSS層疊樣式表CSS（CascadingS1.3.2CSS（續(xù)）2.CSS發(fā)展歷史CSS1:1996年12月17日發(fā)布，W3C推薦標(biāo)準(zhǔn)，1999年1月11日重新修訂；CSS2：1999年1月11日發(fā)布，W3C推薦標(biāo)準(zhǔn)，CSS2添加了對(duì)媒介（打印機(jī)和聽覺設(shè)備）、可下載字體的支持；CSS3：計(jì)劃將CSS劃分為更小的模塊，這些模塊包括：盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。1.3.2CSS（續(xù)）2.CSS發(fā)展歷史1.3.3JavaScriptJavaScript的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁(yè)包含更多活躍元素和更加精彩的內(nèi)容。1.JavaScript由來(lái)JavaScript最初由網(wǎng)景公司（Netscape）的BrendanEich設(shè)計(jì)，是一種由Netscape的LiveScript發(fā)展而來(lái)的客戶端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，提供數(shù)據(jù)驗(yàn)證的基本功能。2.JavaScript組成一個(gè)完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的：核心（ECMAScript）文檔對(duì)象模型（DOM）瀏覽器對(duì)象模型（BOM）1.3.3JavaScriptJavaS1.3.3JavaScript案例1.3.3JavaScript案例1.3.4HTMLDOMHTMLDOM是DocumentObjectModel文檔對(duì)象模1.DOM由來(lái)DOM的歷史追溯至1990年以后代后期Microsoft與Netscape的“瀏覽器大戰(zhàn)”，雙方為了在JavaScript與JScript一決生死，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。2.DOM結(jié)構(gòu)1.3.4HTMLDOMHTMLDOM是Docume1.3.4HTMLDOM（續(xù)）3.HTMLDOMLevelDOMLevel1：1998年10月發(fā)布，W3C推薦規(guī)范。含有DOMCore和DOMHTML兩個(gè)模塊；DOMLevel2：引入DOM視圖、DOM事件、DOM樣式、DOM遍歷和范圍；用于處理新的接口類型；DOMLevel3：引入了以統(tǒng)一的方式載入和保持文檔的方法,包含在新模塊DOMLoadandSave和DOMValidation方法，從而進(jìn)一步擴(kuò)展了DOM。1.3.4HTMLDOM（續(xù)）3.HTMLDOML1.3.5BOMBOM(BrowserObjectModel)，瀏覽器對(duì)象模型。瀏覽器對(duì)象模型定義了JavaScript可以進(jìn)行操作的瀏覽器的各個(gè)功能部件的接口，提供訪問(wèn)文檔各個(gè)功能部件（如窗口本身、屏幕功能部件、瀏覽歷史記錄等）的途徑以及操作方法。IE3.0和NetscapeNavigator3.0瀏覽器提供了一個(gè)瀏覽器對(duì)象模型特性，可以對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作。由于沒有相關(guān)的BOM標(biāo)準(zhǔn)，每種瀏覽器都有自己的BOM實(shí)現(xiàn)。有一些事實(shí)上的標(biāo)準(zhǔn)，如具有一個(gè)窗口對(duì)象和一個(gè)導(dǎo)航對(duì)象，不過(guò)每種瀏覽器可以為這些對(duì)象或其他對(duì)象定義自己的屬性和方法。常見BOM對(duì)象有Window對(duì)象、Navigator對(duì)象、Screen對(duì)象、History對(duì)象、Location對(duì)象等。1.3.5BOMBOM(BrowserObjectMo1.3.6AJAX1.AJAX工作原理Ajax的核心是JavaScript對(duì)象XMLHttpRequest。該對(duì)象在InternetExplorer5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XMLHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。2.AJAX優(yōu)點(diǎn)AJAX給我們帶來(lái)的好處歸納起來(lái)有以下幾點(diǎn)：最大的一點(diǎn)是頁(yè)面無(wú)刷新，在頁(yè)面內(nèi)與服務(wù)器通信，給用戶的體驗(yàn)非常好；使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力；可以把服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶