Web前端技術(shù)培訓(xùn)_第1頁
Web前端技術(shù)培訓(xùn)_第2頁
Web前端技術(shù)培訓(xùn)_第3頁
Web前端技術(shù)培訓(xùn)_第4頁
Web前端技術(shù)培訓(xùn)_第5頁
已閱讀5頁,還剩118頁未讀, 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、中國移動通信集團黑龍江有限公司2015.13Web 前端技術(shù)培訓(xùn)2什么是 Web 前端Web 系統(tǒng)服務(wù)器客戶端客戶端客戶端客戶端3Web 前端三要素HTMLCSSJavaScript4課程大綱p HTMLp CSS p JavaScript第一部分HTML 和 CSS6p HTML 標(biāo)簽p 開發(fā)工具p 超鏈接p CSS 選擇器p 顏色p 盒模式p 圖片HTML 和 CSS 學(xué)習(xí)大綱p 字體p 表單p 表格p 浮動p 定位p iframep 搜索引擎優(yōu)化7HTML 和 CSS 學(xué)習(xí)大綱01 - HTML 標(biāo)簽8使用 HTML 標(biāo)簽組織網(wǎng)頁結(jié)構(gòu)p 標(biāo)題標(biāo)簽 heading tag: p 段落標(biāo)簽

2、paragraph: p 無序列表 unordered list: p 列表項 list item:p 有序列表 ordered list:9W3C萬維網(wǎng)聯(lián)盟: The World Wide Web Consortium 創(chuàng)建于1994年,是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)。 W3C已發(fā)布了200多項影響深遠(yuǎn)的Web技術(shù)標(biāo)準(zhǔn)及實施指南如HTML、CSS、WCAG等。10p 把所有顯示在網(wǎng)頁中的內(nèi)容放入body標(biāo)簽p 網(wǎng)頁中的不可見部分放入head標(biāo)簽中p 將所有 HTML 代碼放入 標(biāo)簽中p DOCTYPE:表示 HTML 的版本信息使用網(wǎng)頁基本結(jié)構(gòu)標(biāo)簽組織整個頁面11H

3、TML 和 CSS 學(xué)習(xí)大綱02 - 開發(fā)工具12p UltraEdit、EditPlus:代碼顏色、多文件編輯p Dreamweaver、Sublime、WebStorm:神器常用開發(fā)工具介紹13p 官方下載地址: http:/ 安裝p 啟動p 配置:字體大小和配色方案的設(shè)置p 使用WebStorm編寫HTMLWebStorm 的安裝、啟動、配置和使用14HTML 和 CSS 學(xué)習(xí)大綱03 - 超鏈接15在瀏覽器中輸入URL時發(fā)生了什么https:/ request服務(wù)器 標(biāo)簽:網(wǎng)頁中可點擊的超鏈接p href 屬性:超鏈接指向的URL地址(hypertext reference)p tar

4、get 屬性:當(dāng)超鏈接被點擊的時候,新頁面打開的位置如何制作超鏈接_blank:在瀏覽器的新標(biāo)簽或新窗口中打開頁面_self:在當(dāng)前窗口中打開頁面,替換原來的頁面如果不添加 target 屬性,那么默認(rèn)值是 _self19p 絕對路徑向一個特定的服務(wù)器上的文件發(fā)送請求絕對路徑、相對路徑和根路徑HTMLp 相對路徑不指定服務(wù)器,參照發(fā)送請求頁面的URLHTMLp 根路徑前面總是包含 “/“,在絕對路徑的基礎(chǔ)上去掉協(xié)議和主機名HTML04 CSS選擇器21p HTML考古:當(dāng)Web開發(fā)還是一項新技術(shù)時,html的內(nèi)容和樣式?jīng)]有被分開將內(nèi)容和樣式分離HTMLp 內(nèi)容和樣式分離:把表示樣式的代碼從ht

5、ml中分離出來,并且創(chuàng)建一種規(guī)則來定義html標(biāo)簽要顯示成什么樣子Cascading Style Sheets 層疊樣式表22p 選擇器:可以選擇html標(biāo)簽p 類型選擇器:不帶尖括號的標(biāo)簽名p 派生選擇器:作用在某些標(biāo)簽的子標(biāo)簽上選擇器23p 添加CSS樣式的位置:在head標(biāo)簽中添加style子標(biāo)簽p 使用標(biāo)簽將CSS和所有的html文件關(guān)聯(lián)在一起把樣式表放在什么地方?24p W3School http:/ MDN /zh-CN/docs/Web/Tutorials 網(wǎng)絡(luò)平臺:HTML 網(wǎng)絡(luò)平臺:CSS參考手冊05 顏色black#F

6、F000026CSS顏色紅色紅色黑色黑色黃色黃色關(guān)鍵字顏色十六進制顏色rgb顏色27p 每個十六進制顏色由三部分組成十六進制色(Hexadecimal colors)#FFFF00紅色的多少綠色的多少藍(lán)色的數(shù)量p 取值范圍:16進制的00-FF,10進制的0-25528p 使用十六進制數(shù)來設(shè)置顏色,三個部分,每個顏色有256種可能的取值網(wǎng)頁的顏色256256256 = 1677721606 盒模式30p 在body中的每個HTML標(biāo)簽實際上都被包圍在一個看不見的矩形中,這個矩形就叫做“盒”。盒HTML31marginborderpadding1. 內(nèi)容區(qū)域 content area內(nèi)容區(qū)域中包

7、含的是盒子中真正的內(nèi)容(文本、圖片等)2. 補白 或內(nèi)邊距 paddingpadding包圍在內(nèi)容區(qū)域的邊緣,上右下左3. 邊框 borderborder包圍在padding的邊緣,上右下左4. 邊距 marginmargin包圍在border的上右下左四個邊緣盒模式32p width:寬p height:高p border:邊框p padding:內(nèi)補白p margin:外邊距p display:顯示盒模式相關(guān)屬性p 計算盒子的尺寸p 屬性設(shè)置的更多形式marginborderpadding33p block、inline、inline-block、nonedisplay屬性display顯

8、示位置顯示位置默認(rèn)寬高默認(rèn)寬高可設(shè)置寬高可設(shè)置寬高可設(shè)置可設(shè)置padding可設(shè)置可設(shè)置marginblock換行父元素寬度內(nèi)容高度是是是inline同行內(nèi)容寬高否是左右inline-block同行內(nèi)容寬高是是是none隱藏-34div布局入門divdivdivdiv07 圖片36p 網(wǎng)頁中出現(xiàn)的大部分圖片都屬于以下這三種類型內(nèi)容圖片布局圖片用戶交互圖片三種網(wǎng)頁圖片37p 標(biāo)簽創(chuàng)建內(nèi)容圖片p src 屬性:圖片的路徑p alt 屬性:圖片的簡單描述 可訪問性:搜索引擎、屏幕閱讀器HTML38p 使用CSS中的background屬性 background-color background-im

9、age background-repeat background-position創(chuàng)建布局圖片39p 圖片精靈 sprite:把小圖標(biāo)放在同一個文件中,提高性能p 用戶交互圖片很多都是小圖標(biāo),適合使用用戶交互圖片圖片精靈40 JPEG、PNG和GIF 復(fù)雜顏色的圖像和照片則要使用JPEG格式 動態(tài)圖像要使用GIF格式 PNG格式的透明圖片要比GIF格式的更平滑 這三種圖像相對于其他格式的圖像文件比較小,適合Web頁面p Web上最常用的三種圖像格式08 字體42CSSp 可以指定和改變字體外觀的常用CSS屬性使用CSS改變字體CSSfont-stylefont-weightfont-sizel

10、ine-heightfont-family43CSS使用字體列表優(yōu)先使用的字體備用自體通用字體系列44通用字體系列無襯線字體p 筆畫粗細(xì)一致有襯線字體p筆畫末端有裝飾性的線條或凸起45通用字體系列等寬字體p 每個字母寬度一致p 用于顯示軟件代碼示例手寫體裝飾性字體設(shè)計感較強09 表單47表單的工作方式http:/ 表格51p 要創(chuàng)建一個最簡單的表格,至少需要三個標(biāo)簽 table:表格標(biāo)簽 tr:表格行標(biāo)簽,table row td:數(shù)據(jù)單元格標(biāo)簽,table data表格基本標(biāo)簽tabletrtd52p 標(biāo)簽 table、tr、td、th thead、tbody、tfoot captionp

11、合并單元格屬性 colspan:跨列單元格 rowspan:跨行單元格制作一個表格11 浮動54p 瀏覽器在頁面上擺放HTML元素所用的方法文檔流h1h2pp塊元素的文檔流55p 瀏覽器在頁面上擺放HTML元素所用的方法文檔流labelinputaimg內(nèi)聯(lián)元素的文檔流img56p float 屬性:left | rightp 浮動元素的特點 默認(rèn)寬度是內(nèi)容的寬度 向指定方向移動,排在前一個浮動元素的旁邊,浮動在后面的元素的上面 半脫離文檔流浮動57p clear 屬性p 添加空元素p 定義 clearfix 類清除浮動的幾種方法12 定位59p position 屬性: static(默認(rèn)值

12、) | relative | absolute | fixedp 精確控制標(biāo)簽在HTML文檔中的位置(對static不起作用) top、right、bottom、left定位60定位p static:默認(rèn)值:默認(rèn)值元素在正常的文檔流中顯示p absolute:絕對定位寬度是內(nèi)容的寬度脫離文檔流,后面的元素會忽視絕對定位元素的存在參照物為第一個定位祖先,如果沒有定位祖先則參照物是html元素p relative:相對定位在正常文檔流中顯示,相對于原來位置偏移參照物是元素本身通常作為絕對定位元素的參照物p fixed:固定定位 寬度為內(nèi)容的寬度,脫離文檔流 參照物是瀏覽器窗口,固定不動61z-in

13、dex62z-index: 9;z-index: 1;z-index13 iframe64HTMLp iframe:內(nèi)聯(lián)框架,在網(wǎng)頁中任意的位置嵌入另一個網(wǎng)頁iframe絕對路徑或相對路徑14 搜索引擎優(yōu)化66HTML使用meta標(biāo)簽提高搜索排名67p 多使用標(biāo)題標(biāo)簽: p 添加img標(biāo)簽的alt屬性:p 一些標(biāo)簽的title屬性:優(yōu)化HTML文檔HTMLHTML第二部分JavaScript69JavaScript 歷史Brendan Eich為了解決瀏覽器與用戶交互的問題,用了 10 天時間設(shè)計了JavaScript語言 借鑒C的基本語法 借鑒Java的數(shù)據(jù)類型和內(nèi)存管理 借鑒Scheme的

14、函數(shù)式編程 借鑒Self的基于原型的繼承機制p 1995年:JavaScript 1.070ECMAScriptp 1997年6月:JavaScript 1.1p 1998年6月:ECMAScript 2p 1999年12月:ECMAScript 3p 2009年12月:ECMAScript 5(從IE10開始完美支持)p 2015年6月:ECAMAScript 6ECMAScript 1ECMAScript 2015European Computer Manufactures Association歐洲計算機制造聯(lián)合會71JavaScript 學(xué)習(xí)大綱p 快速入門p 函數(shù)p 宿主對象p DO

15、Mp 表單p 面向?qū)ο缶幊蘰 內(nèi)置對象p AJAX72HTML 和 CSS 學(xué)習(xí)大綱01 快速入門73p 第一個程序: 和 alert()p JavaScript的工作方式: 中和中 標(biāo)簽中 和 內(nèi)聯(lián)事件中p JavaScript是一門解釋型語言p 控制臺輸出:console.log();準(zhǔn)備工作74p 語句 多條語句可以寫在同一行,也可以寫在不同的行中 同一行中的兩條語句之間要用分號分隔 不同行中的語句末尾可以不用分號,建議使用分號p 注釋:注釋是給開發(fā)人員看到,JavaScript引擎會自動忽略 單行: /注釋內(nèi)容 可以獨立成行,可以在行尾 多行: /* 注釋內(nèi)容 */ 可以獨立,可以在行

16、中,不可以嵌套基本語法75p 變量的聲明:varp 變量的定義:=p 變量的使用:不要使用引號變量76p 區(qū)分大小寫MOOD 和 mood 是不同的變量p 變量名只允許包含字母、數(shù)字、美元符號、下劃線如:my mood = happy; 不合法p 第一個字符不能是數(shù)字如:2mood = happy; 不合法p 變量名不能使用關(guān)鍵字和保留字如:alert,if,class 都是不合法的變量名p 命名規(guī)范:首寫字母小寫mood、myMood 或 my_mood 的形式變量的命名規(guī)則77p 可以不使用var聲明變量是JavaScript的設(shè)計缺陷p ES5中的嚴(yán)格模式 啟用嚴(yán)格模式:在JavaScr

17、ipt代碼第一行寫上use strict嚴(yán)格模式JS78p JavaScript:弱類型語言,可以在任何階段改變數(shù)據(jù)類型p 字符串p 數(shù)值p 布爾值p undefined、nullp 對象p 函數(shù)數(shù)據(jù)類型79p 由零和或多個字符構(gòu)成,必須寫在引號里p 可以使用單引號或雙引號p 使用轉(zhuǎn)義字符:p 注意:不管使用雙引號還是單引號,請在腳本中保持一致p 多行字符串字符串 String80p JavaScript不區(qū)分整數(shù)和浮點數(shù)p 以下都是合法的number類型數(shù)值 numberJS81p 兩個可選值:true 或 false布爾值 booleanJS82p undefined:未定義p null:

18、空undefined 和 null83p 數(shù)組是一組按順序排列的集合,集合的每個值稱為元素p 可以使用 定義數(shù)組p 數(shù)組的元素可以通過索引來訪問p 通過length屬性訪問數(shù)組的長度數(shù)組 Array84p JavaScript的對象是一組由屬性-值組成的無序集合p 可以使用 定義對象p 對象的屬性都是字符串類型,可以寫引號,也可以不寫p 對象的值可以是任意數(shù)據(jù)類型p 使用 . 屬性名或 屬性名 運算符訪問對象的屬性對象 Object85p 條件判斷語句:if、switchp 循環(huán)迭代語句:while、do-while、for、for-inp 流程跳轉(zhuǎn)語句:break、continue結(jié)構(gòu)控制語

19、句86類型結(jié)果undefinedfalsenullfalseboolean不轉(zhuǎn)換number如果值為 0或 NaN,則結(jié)果為 false;否則為 trueString如果值為空字符串,則結(jié)果為 false;否則為 trueObjecttrue布爾環(huán)境的類型轉(zhuǎn)換87p 算數(shù)運算(+、-、*、/、%、+、-)p 關(guān)系運算(、=、=、=、!=)p 邏輯運算(!、&、|)p 位運算(&、|、)p 賦值運算(=、 +=、-=、*=、/=、%=、=、=)p 條件運算(?:)p 逗號運算(,)p 對象運算(new、delete、.、instanceof)運算符88算數(shù)環(huán)境的類型轉(zhuǎn)換類型結(jié)果undefined

20、NaNnull0booleantrue是1,false是0number不轉(zhuǎn)換String空字符串轉(zhuǎn)換為0,數(shù)值字符串轉(zhuǎn)換為數(shù)值,其它是NaNObjectNaN89字符串環(huán)境的類型轉(zhuǎn)換類型結(jié)果undefinedundefinednullnullbooleantrue 和 falsenumber0, 123,Infinity,NaN,String不轉(zhuǎn)換Objectobject Object90p =只要數(shù)據(jù)類型不一致,則返回false,如果一致,再比較p =如果數(shù)據(jù)類型相同,則直接比較如果數(shù)據(jù)類型不同,則先轉(zhuǎn)換成數(shù)值再比較,有時會得到非常詭異的結(jié)果例外規(guī)則:判斷一個值是不是NaN要使用 isNaN

21、( )函數(shù)比較運算符JS91p x&y 如果 x 轉(zhuǎn)換為boolean值時,結(jié)果為false,則不運行y,返回x的值 如果 x轉(zhuǎn)換為boolean值時,結(jié)果為true,則運行y,返回y的值p x|y 如果 x 轉(zhuǎn)換為boolean值時,結(jié)果為true,則不運行y,返回x的值 如果 x 轉(zhuǎn)換為boolean值時,結(jié)果為false,則運行y,返回y的值邏輯運算符92HTML 和 CSS 學(xué)習(xí)大綱02 函數(shù)93p 函數(shù)的定義:function 關(guān)鍵字p 函數(shù)的調(diào)用: ( )p 函數(shù)的參數(shù)p 函數(shù)的返回值p 個數(shù)不定的參數(shù):arguments關(guān)鍵字p 聲明式函數(shù):可以將函數(shù)賦值給變量基本概念94p 函

22、數(shù)內(nèi)聲明的變量,作用域在函數(shù)內(nèi)部,叫做局部變量p 不同函數(shù)內(nèi)部的同名變量互相獨立,互不影響p 內(nèi)部函數(shù)可以訪問外部函數(shù)定義的變量,反過來則不行p 如果內(nèi)部函數(shù)定義了與外部函數(shù)重名的變量,則內(nèi)部函數(shù)的變量將“屏蔽”外部函數(shù)的變量p 注意:非嚴(yán)格模式下不使用var聲明的變量,將自動變?yōu)槿肿兞孔兞康淖饔糜?函數(shù)作用域95p 所有函數(shù)內(nèi)聲明的變量會“提升”到函數(shù)頂部p 建議:先聲明函數(shù)內(nèi)部用到的所有變量函數(shù)作用域中的變量提升96p 函數(shù)外聲明的變量,作用域在全局范圍內(nèi),叫做全局變量p 任何變量(函數(shù)也視為變量),如果沒有在當(dāng)前函數(shù)作用域中找到,就會繼續(xù)往上查找,最后如果在全局作用域中也沒有找到,則報

23、ReferenceError錯誤p 命名沖突:不同的JavaScript文件如果使用了相同的全局變量,或者定義了相同名字的頂層函數(shù),都會造成命名沖突 定義名稱空間變量作用域 - 全局作用域97p 在瀏覽器環(huán)境中的JavaScript有一個全局對象 windowp 全局作用域的變量實際上被綁定到window的一個屬性全局作用域中的window對象98p ES6之前沒有塊級作用域p ES6中引入 let 關(guān)鍵字替代 var 聲明塊級作用域p ES6種引入 const 關(guān)鍵字定義塊級別常量變量作用域 - 塊級作用域99p 綁定到對象上的函數(shù)稱為方法p 函數(shù)中的this關(guān)鍵字:window對象p 方法

24、中的this關(guān)鍵字:當(dāng)前對象p 嚴(yán)格模式與非嚴(yán)格模式中的this 嚴(yán)格模式中,函數(shù)中的this指向 undefined 非嚴(yán)格模式中,函數(shù)中的this指向 window方法100HTML 和 CSS 學(xué)習(xí)大綱03 宿主對象101p window對象的方法 alert() confirm() prompt() setInterval() setTimeout()BOM 瀏覽器對象模型p window對象的屬性 location history screen navigator document102HTML 和 CSS 學(xué)習(xí)大綱04 DOM103p 文檔對象模型:節(jié)點樹 每個節(jié)點都是一個對象 結(jié)

25、點關(guān)系DOM104p 文檔對象模型:節(jié)點類型 元素節(jié)點 文本節(jié)點 屬性節(jié)點DOM105p getElementById(id)p getElementsByTagName(tagName)p getElementsByClassName (className)p querySelector(selector)p querySelectorAll(selector)獲取DOM結(jié)點106p 標(biāo)準(zhǔn)DOM用法 getAttribute(attr) setAttribute(attr, value) removeAttribute(attr)p DOM標(biāo)準(zhǔn)出現(xiàn)之前的寫法 .(點) 運算符 沒辦法刪除一個

26、屬性獲取和設(shè)置屬性107p 遍歷節(jié)點 childNodes nodeType nodeValue firstChild lastChild操作節(jié)點p 創(chuàng)建節(jié)點 innerHTML createElement(nodeName) createTextNode(text)p 插入節(jié)點 appendChild(child) insertBefore(new, ref)108p 操作 style 屬性p 操作 classp 操作樣式表文件CSS-DOM109p 內(nèi)嵌事件處理函數(shù)p 分離事件處理函數(shù)和HTMLp DOM標(biāo)準(zhǔn)事件處理函數(shù)DOM事件110HTML 和 CSS 學(xué)習(xí)大綱05 表單111p HTML5表單驗證 required、min、max、 number、email、url等p JavaScript表單驗證表單驗

溫馨提示

  • 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

提交評論