web開發(fā)入門學習.ppt

《web開發(fā)入門學習.ppt》由會員分享，可在線閱讀，更多相關(guān)《web開發(fā)入門學習.ppt（25頁珍藏版）》請在裝配圖網(wǎng)上搜索。

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