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

2、h： 無序列表 unordered list： 列表項 list item： 有序列表 ordered list：,W3C,萬維網(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多項影響深遠的Web技術(shù)標(biāo)準(zhǔn)及實施指南如HTML、CSS、WCAG等。,把所有顯示在網(wǎng)頁中的內(nèi)容放入body標(biāo)簽 網(wǎng)頁中的不可見部分放入head標(biāo)簽中 將所有 HTML 代碼放入 標(biāo)簽中 DOCTYPE：表示 HTML 的版本信息,使用網(wǎng)頁基本結(jié)構(gòu)標(biāo)簽組織整個頁面,HTML 和 CSS 學(xué)習(xí)大綱,02

3、- 開發(fā)工具,UltraEdit、EditPlus：代碼顏色、多文件編輯 Dreamweaver、Sublime、WebStorm：神器,常用開發(fā)工具介紹,官方下載地址： 安裝 啟動 配置：字體大小和配色方案的設(shè)置 使用WebStorm編寫HTML,WebStorm 的安裝、啟動、配置和使用,HTML 和 CSS 學(xué)習(xí)大綱,03 - 超鏈接,在瀏覽器中輸入URL時發(fā)生了什么,服務(wù)器 ,請求 request,響應(yīng) response,/news,點擊超鏈接，連接中有一個文件請求被發(fā)送給服務(wù)器,在瀏覽器中點擊超鏈接時發(fā)生了什么,1,瀏覽器,請求 request,服務(wù)器 ,/resources,/ne

4、ws,服務(wù)器把文件返回給瀏覽器，瀏覽器用新的文件替換舊的文件,在瀏覽器中點擊超鏈接時發(fā)生了什么,2,瀏覽器,響應(yīng) response,新的頁面地址,服務(wù)器 ,/resources,/news,標(biāo)簽：網(wǎng)頁中可點擊的超鏈接 href 屬性：超鏈接指向的URL地址（hypertext reference） target 屬性：當(dāng)超鏈接被點擊的時候，新頁面打開的位置,如何制作超鏈接,_blank：在瀏覽器的新標(biāo)簽或新窗口中打開頁面,_self：在當(dāng)前窗口中打開頁面，替換原來的頁面,如果不添加 target 屬性，那么默認(rèn)值是 _self,絕對路徑向一個特定的服務(wù)器上的文件發(fā)送請求,絕對路徑、相對路徑和根

5、路徑,HTML,相對路徑不指定服務(wù)器，參照發(fā)送請求頁面的URL,HTML,根路徑前面總是包含 “/“，在絕對路徑的基礎(chǔ)上去掉協(xié)議和主機名,HTML,04 CSS選擇器,HTML考古：當(dāng)Web開發(fā)還是一項新技術(shù)時，html的內(nèi)容和樣式?jīng)]有被分開,將內(nèi)容和樣式分離,HTML,內(nèi)容和樣式分離：把表示樣式的代碼從html中分離出來，并且創(chuàng)建一種規(guī)則來定義html標(biāo)簽要顯示成什么樣子,Cascading Style Sheets 層疊樣式表,選擇器：可以選擇html標(biāo)簽 類型選擇器：不帶尖括號的標(biāo)簽名 派生選擇器：作用在某些標(biāo)簽的子標(biāo)簽上,選擇器,添加CSS樣式的位置：在head標(biāo)簽中添加style子標(biāo)

6、簽 使用標(biāo)簽將CSS和所有的html文件關(guān)聯(lián)在一起,把樣式表放在什么地方？,W3School MDN /zh-CN/docs/Web/Tutorials 網(wǎng)絡(luò)平臺：HTML 網(wǎng)絡(luò)平臺：CSS,參考手冊,05 顏色,black,#FF0000,CSS顏色,紅色,黑色,黃色,關(guān)鍵字顏色,十六進制顏色,rgb顏色,每個十六進制顏色由三部分組成,十六進制色（Hexadecimal colors）,#FFFF00,紅色的多少,綠色的多少,藍色的數(shù)量,取值范圍：16進制的00-FF，10進制的0-255,使用十六進制數(shù)來設(shè)置顏色，三個部分，每個顏色有

7、256種可能的取值,網(wǎng)頁的顏色,256256256 = 16777216,06 盒模式,在body中的每個HTML標(biāo)簽實際上都被包圍在一個看不見的矩形中，這個矩形就叫做“盒”。,盒,HTML,margin,border,padding,內(nèi)容區(qū)域 content area 內(nèi)容區(qū)域中包含的是盒子中真正的內(nèi)容（文本、圖片等） 補白 或內(nèi)邊距 padding padding包圍在內(nèi)容區(qū)域的邊緣，上右下左 邊框 border border包圍在padding的邊緣，上右下左 邊距 margin margin包圍在border的上右下左四個邊緣,盒模式,width：寬 height：高 border：邊

8、框 padding：內(nèi)補白 margin：外邊距 display：顯示,盒模式相關(guān)屬性,計算盒子的尺寸 屬性設(shè)置的更多形式,margin,border,padding,block、inline、inline-block、none,display屬性,div布局入門,div,div,div,div,07 圖片,網(wǎng)頁中出現(xiàn)的大部分圖片都屬于以下這三種類型 內(nèi)容圖片 布局圖片 用戶交互圖片,三種網(wǎng)頁圖片,標(biāo)簽,創(chuàng)建內(nèi)容圖片,src 屬性：圖片的路徑 alt 屬性：圖片的簡單描述 可訪問性：搜索引擎、屏幕閱讀器,HTML,使用CSS中的background屬性 background-color bac

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

10、ont-size,line-height,font-family,CSS,使用字體列表,優(yōu)先使用的字體,備用自體,通用字體系列,通用字體系列,無襯線字體 筆畫粗細一致,有襯線字體 筆畫末端有裝飾性的線條或凸起,通用字體系列,等寬字體 每個字母寬度一致 用于顯示軟件代碼示例,手寫體,裝飾性字體 設(shè)計感較強,09 表單,表單的工作方式,php、jsp、node.js等等,服務(wù)器,腳本,用戶名：Helen 密碼：* 是否自動登錄,處理數(shù)據(jù),表單的工作方式,HTML,服務(wù)器,php、jsp、node.js等等,腳本,處理數(shù)據(jù),用戶名：Helen 密碼：* 是否自動登錄,美食網(wǎng)表單,10 表格,要創(chuàng)建一

11、個最簡單的表格，至少需要三個標(biāo)簽 table：表格標(biāo)簽 tr：表格行標(biāo)簽，table row td：數(shù)據(jù)單元格標(biāo)簽，table data,表格基本標(biāo)簽,table,tr,td,標(biāo)簽 table、tr、td、th thead、tbody、tfoot caption 合并單元格屬性 colspan：跨列單元格 rowspan：跨行單元格,制作一個表格,11 浮動,瀏覽器在頁面上擺放HTML元素所用的方法,文檔流,h1,h2,p,p,塊元素的文檔流,瀏覽器在頁面上擺放HTML元素所用的方法,文檔流,label,input,a,img,內(nèi)聯(lián)元素的文檔流,img,float 屬性：left | righ

12、t 浮動元素的特點 默認(rèn)寬度是內(nèi)容的寬度 向指定方向移動，排在前一個浮動元素的旁邊，浮動在后面的元素的上面 半脫離文檔流,浮動,clear 屬性 添加空元素 定義 clearfix 類,清除浮動的幾種方法,12 定位,position 屬性： static（默認(rèn)值） | relative | absolute | fixed 精確控制標(biāo)簽在HTML文檔中的位置（對static不起作用） top、right、bottom、left,定位,定位,static：默認(rèn)值 元素在正常的文檔流中顯示,absolute：絕對定位 寬度是內(nèi)容的寬度 脫離文檔流，后面的元素會忽視絕對定位元素的存在 參照物為第一

13、個定位祖先，如果沒有定位祖先則參照物是html元素,relative：相對定位 在正常文檔流中顯示，相對于原來位置偏移 參照物是元素本身 通常作為絕對定位元素的參照物,fixed：固定定位 寬度為內(nèi)容的寬度，脫離文檔流 參照物是瀏覽器窗口，固定不動,z-index,z-index: 9;,z-index: 1;,z-index,13 iframe,HTML,iframe：內(nèi)聯(lián)框架，在網(wǎng)頁中任意的位置嵌入另一個網(wǎng)頁,iframe,絕對路徑或相對路徑,14 搜索引擎優(yōu)化,HTML,使用meta標(biāo)簽提高搜索排名,多使用標(biāo)題標(biāo)簽： 添加img標(biāo)簽的alt屬性： 一些標(biāo)簽的title屬性：,優(yōu)化HTML

14、文檔,HTML,HTML,第二部分 JavaScript,JavaScript 歷史,Brendan Eich,為了解決瀏覽器與用戶交互的問題，用了 10 天時間設(shè)計了JavaScript語言,借鑒C的基本語法 借鑒Java的數(shù)據(jù)類型和內(nèi)存管理 借鑒Scheme的函數(shù)式編程 借鑒Self的基于原型的繼承機制,1995年：JavaScript 1.0,ECMAScript,1997年6月：JavaScript 1.1 1998年6月：ECMAScript 2 1999年12月：ECMAScript 3 2009年12月：ECMAScript 5（從IE10開始完美支持） 2015年6月：ECAM

15、AScript 6,ECMAScript 1,ECMAScript 2015,European Computer Manufactures Association 歐洲計算機制造聯(lián)合會,JavaScript 學(xué)習(xí)大綱,快速入門 函數(shù) 宿主對象 DOM,表單 面向?qū)ο缶幊?內(nèi)置對象 AJAX,HTML 和 CSS 學(xué)習(xí)大綱,01 快速入門,第一個程序： 和 alert() JavaScript的工作方式： 中和中 標(biāo)簽中 和 內(nèi)聯(lián)事件中 JavaScript是一門解釋型語言 控制臺輸出：console.log();,準(zhǔn)備工作,語句 多條語句可以寫在同一行，也可以寫在不同的行中 同一行中的兩條語句

16、之間要用分號分隔 不同行中的語句末尾可以不用分號，建議使用分號 注釋：注釋是給開發(fā)人員看到，JavaScript引擎會自動忽略 單行： /注釋內(nèi)容 可以獨立成行，可以在行尾 多行： /* 注釋內(nèi)容 */ 可以獨立，可以在行中，不可以嵌套,基本語法,變量的聲明：var 變量的定義：= 變量的使用：不要使用引號,變量,區(qū)分大小寫 MOOD 和 mood 是不同的變量 變量名只允許包含字母、數(shù)字、美元符號、下劃線 如：my mood = happy; 不合法 第一個字符不能是數(shù)字 如：2mood = happy; 不合法 變量名不能使用關(guān)鍵字和保留字 如：alert，if，class 都是不合法的變

17、量名 命名規(guī)范：首寫字母小寫 mood、myMood 或 my_mood 的形式,變量的命名規(guī)則,可以不使用var聲明變量是JavaScript的設(shè)計缺陷 ES5中的嚴(yán)格模式 啟用嚴(yán)格模式：在JavaScript代碼第一行寫上use strict,嚴(yán)格模式,JS,JavaScript：弱類型語言，可以在任何階段改變數(shù)據(jù)類型 字符串 數(shù)值 布爾值 undefined、null 對象 函數(shù),數(shù)據(jù)類型,由零和或多個字符構(gòu)成，必須寫在引號里 可以使用單引號或雙引號 使用轉(zhuǎn)義字符： 注意：不管使用雙引號還是單引號，請在腳本中保持一致 多行字符串,字符串 String,JavaScript不區(qū)分整數(shù)和浮點

18、數(shù) 以下都是合法的number類型,數(shù)值 number,JS,兩個可選值：true 或 false,布爾值 boolean,JS,undefined：未定義 null：空,undefined 和 null,數(shù)組是一組按順序排列的集合，集合的每個值稱為元素 可以使用 定義數(shù)組 數(shù)組的元素可以通過索引來訪問 通過length屬性訪問數(shù)組的長度,數(shù)組 Array,JavaScript的對象是一組由屬性-值組成的無序集合 可以使用 定義對象 對象的屬性都是字符串類型，可以寫引號，也可以不寫 對象的值可以是任意數(shù)據(jù)類型 使用 . 屬性名或 屬性名 運算符訪問對象的屬性,對象 Object,條件判斷語句：

19、if、switch 循環(huán)迭代語句：while、do-while、for、for-in 流程跳轉(zhuǎn)語句：break、continue,結(jié)構(gòu)控制語句,布爾環(huán)境的類型轉(zhuǎn)換,算數(shù)運算（+、-、*、/、%、+、-） 關(guān)系運算（、=、） 賦值運算（=、 +=、-=、*=、/=、%=、=、=） 條件運算（?:） 逗號運算（,） 對象運算（new、delete、.、instanceof）,運算符,算數(shù)環(huán)境的類型轉(zhuǎn)換,字符串環(huán)境的類型轉(zhuǎn)換,= 只要數(shù)據(jù)類型不一致，則返回false，如果一致，再比較 = 如果數(shù)據(jù)類型相同，則直接比較 如果數(shù)據(jù)類型不同，則先轉(zhuǎn)換成數(shù)值再比較，有時會得到非常詭異的結(jié)果 例外規(guī)則： 判斷

20、一個值是不是NaN要使用 isNaN( )函數(shù),比較運算符,JS,x&y 如果 x 轉(zhuǎn)換為boolean值時，結(jié)果為false，則不運行y，返回x的值 如果 x轉(zhuǎn)換為boolean值時，結(jié)果為true，則運行y，返回y的值 x|y 如果 x 轉(zhuǎn)換為boolean值時，結(jié)果為true，則不運行y，返回x的值 如果 x 轉(zhuǎn)換為boolean值時，結(jié)果為false，則運行y，返回y的值,邏輯運算符,HTML 和 CSS 學(xué)習(xí)大綱,02 函數(shù),函數(shù)的定義：function 關(guān)鍵字 函數(shù)的調(diào)用： ( ) 函數(shù)的參數(shù) 函數(shù)的返回值 個數(shù)不定的參數(shù)：arguments關(guān)鍵字 聲明式函數(shù)：可以將函數(shù)賦值給變量

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

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

23、嚴(yán)格模式與非嚴(yán)格模式中的this 嚴(yán)格模式中，函數(shù)中的this指向 undefined 非嚴(yán)格模式中，函數(shù)中的this指向 window,方法,HTML 和 CSS 學(xué)習(xí)大綱,03 宿主對象,window對象的方法 alert() confirm() prompt() setInterval() setTimeout(),BOM 瀏覽器對象模型,window對象的屬性 location history screen navigator document,HTML 和 CSS 學(xué)習(xí)大綱,04 DOM,文檔對象模型：節(jié)點樹 每個節(jié)點都是一個對象 結(jié)點關(guān)系,DOM,文檔對象模型：節(jié)點類型 元素節(jié)點

24、文本節(jié)點 屬性節(jié)點,DOM,getElementById(id) getElementsByTagName(tagName) getElementsByClassName(className) querySelector(selector) querySelectorAll(selector),獲取DOM結(jié)點,標(biāo)準(zhǔn)DOM用法 getAttribute(attr) setAttribute(attr, value) removeAttribute(attr) DOM標(biāo)準(zhǔn)出現(xiàn)之前的寫法 .（點） 運算符 沒辦法刪除一個屬性,獲取和設(shè)置屬性,遍歷節(jié)點 childNodes nodeType nodeValue firstChild lastChild,操作節(jié)點,創(chuàng)建節(jié)點 innerHTML createElement(nodeName) createTextNode(text) 插入節(jié)點 appendChild(child) insertBefore(new, ref),操作 style 屬性 操作 class 操作樣式表文件,CSS-DOM,內(nèi)嵌事件處理函數(shù) 分離事件處理函數(shù)和HTML DOM標(biāo)準(zhǔn)事件處理函數(shù),DOM事件,HTML 和 CSS 學(xué)習(xí)大綱,05 表單,HTML5表單驗證 required、min、max、 number、email、url等 JavaScr