web開(kāi)發(fā)入門(mén)學(xué)習(xí).ppt

《web開(kāi)發(fā)入門(mén)學(xué)習(xí).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《web開(kāi)發(fā)入門(mén)學(xué)習(xí).ppt（25頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

Web開(kāi)發(fā)基礎(chǔ)知識(shí) 研發(fā)一部 周環(huán) 前端開(kāi)發(fā) 什么是前端開(kāi)發(fā)主要職責(zé)是與交互設(shè)計(jì)師 視覺(jué)設(shè)計(jì)師協(xié)作 根據(jù)設(shè)計(jì)圖用HTML和CSS完成頁(yè)面制作 同時(shí) 在此基礎(chǔ)之上 對(duì)完成的頁(yè)面進(jìn)行維護(hù)和對(duì)網(wǎng)站前端性能做相應(yīng)的優(yōu)化 需要使用JavaScript或者ActionScript來(lái)編寫(xiě)和封裝具有良好性能的前端交互組件 瀏覽器介紹 IE firefox chromeHtml介紹 HTML標(biāo)簽 DOM BOMCss介紹 簡(jiǎn)單樣式應(yīng)用與定義 ID選擇器與class選擇器 Javascript介紹 常用DOM操作調(diào)試工具介紹 firebugIEDeveloper 瀏覽器介紹 IE系瀏覽器 IE6 7 8 360瀏覽器 國(guó)內(nèi)大部分瀏覽器渲染引擎 Tridentjs引擎 Chakra ie9 MozillaFirefox firefox渲染引擎 Gecko引擎js引擎 TraceMonkey引擎webkit chrome safari渲染引擎 webkitjs引擎 V8Opera Opera未知 html介紹 HTML標(biāo)簽 標(biāo)簽性語(yǔ)言 DOM HTMLDocumentObjectModel 文檔對(duì)象模型 BOM 瀏覽器對(duì)象模型 BrowserObjectModel HTML標(biāo)簽 標(biāo)題我是段落 HTML注意事項(xiàng) 嵌套的HTML元素不要忘記結(jié)束標(biāo)簽空的HTML元素使用小寫(xiě)標(biāo)簽始終屬性值加引號(hào)塊元素與內(nèi)聯(lián)元素塊元素 pdivh1formulollitable等內(nèi)聯(lián)元素 aspanimginputselect等 DOM文檔對(duì)象模型 DOM是這樣規(guī)定的 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)每個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)包含在HTML元素中的文本是文本節(jié)點(diǎn)每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)注釋屬于注釋節(jié)點(diǎn) HTMLDOM結(jié)構(gòu)圖 BOM 瀏覽器對(duì)象模型 彈出新瀏覽器窗口的能力 移動(dòng) 關(guān)閉和更改瀏覽器窗口大小的能力 可提供WEB瀏覽器詳細(xì)信息的導(dǎo)航對(duì)象 可提供瀏覽器載入頁(yè)面詳細(xì)信息的本地對(duì)象 可提供用戶屏幕分辨率詳細(xì)信息的屏幕對(duì)象 支持Cookies BOM操作 window open window screen width window navigator userAgentwindow location hrefwindow navigator screen document cookie Css介紹 CSS是英語(yǔ)CascadingStyleSheets 層疊樣式表單 的縮寫(xiě) 它是一種用來(lái)表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語(yǔ)言 是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題css使用依賴(lài)HTML或XML red background f00 Css語(yǔ)法 selector property value id與class選擇器 id選擇器 css定義以 開(kāi)始 限HTMLid屬性使用單一使用 dockbar height 10px class選擇器 css定義以 開(kāi)始 限HTMLclass屬性使用 支持重復(fù)使用 menu height 10px 公開(kāi)頁(yè)面私有頁(yè)面 Css定義方式 多重聲明p text align center color red 值的不同寫(xiě)法和單位p width 100 height 100 p width 100px height 100px 選擇器的分組h1 h2 h3 h4 h5 h6 color green JavaScript Javascript的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的 動(dòng)態(tài)的 交互性的關(guān)系 使網(wǎng)頁(yè)包含更多活躍的元素和更加精彩的內(nèi)容 增強(qiáng)人機(jī)交互 改善用戶體驗(yàn) JavascriptDOM操作 獲取DOM getElementById getElementsByTagNamedocument getElementById username document getElementsByTagName input 創(chuàng)建DOM createElement createTextNodevarinput document createElement input input id username input name user 插入DOM appendChild insertBeforedocument body appendChild input 刪除DOM removeChilddocument body removeChild input 層級(jí)DOM parentNode childNodes firstChild Javascript注意事項(xiàng) window myValue aa age 0 job developer document all dockbar value window open Javascript技巧與優(yōu)化 局部變量的訪問(wèn)速度要比全局變量的訪問(wèn)速度更快 因?yàn)槿肿兞科鋵?shí)是window對(duì)象的成員 而局部變量是放在函數(shù)的棧里的varage 0 job developer 預(yù)設(shè)默認(rèn)值 varage this get age 0 減少DOM操作新增與刪除 隱藏與顯示 延時(shí)刪除 代替 判斷對(duì)象是否存在 vardock A one dock dock Ajax技術(shù) 對(duì)于InternetExplorer瀏覽器 xmlhttp request newActiveXObject Msxml2 XMLHTTP 3 0 3 0或4 0 5 0對(duì)于Mozilla Netscape Safari等瀏覽器 創(chuàng)建XMLHttpRequest方法如下 xmlhttp request newXMLHttpRequest 需要發(fā)送Http請(qǐng)求 web服務(wù)支持 常用的AJAX數(shù)據(jù)格式j(luò)son 名稱(chēng) 值對(duì) first Brett xml 標(biāo)簽形式Bretttxt 字符串 first Brett 瀏覽器調(diào)試工具介紹 IE調(diào)試工具 IeDeveloperInner htmljscsshttptimelineIEhttpWacth httprequestFF調(diào)試工具 Firebug htmljscsshttptimelinechrome調(diào)試工具 webkitInner htmljscsshttptimelineopera調(diào)試工具 沒(méi)使用過(guò) 略 瀏覽器調(diào)試工具介紹 資源分享 web開(kāi)發(fā)基礎(chǔ)知識(shí)http www w3 org 瀏覽器案例分析http www w3help org zh cn home glossary htmlyahooUI 謝謝