Web前端技術培訓

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

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技術領域最具權威和影響力的國際中立性技術標準機構。 W3C已發(fā)布了200多項影響深遠的Web技術標準及實施指南如HTML、CSS、WCAG等。10p 把所有顯示在網(wǎng)頁中的內(nèi)容放入body標簽p 網(wǎng)頁中的不可見部分放入head標簽中p 將所有 HTML 代碼放入 標簽中p DOCTYPE：表示 HTML 的版本信息使用網(wǎng)頁基本結構標簽組織整個頁面11H

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

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

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

6、F000026CSS顏色紅色紅色黑色黑色黃色黃色關鍵字顏色十六進制顏色rgb顏色27p 每個十六進制顏色由三部分組成十六進制色（Hexadecimal colors）#FFFF00紅色的多少綠色的多少藍色的數(shù)量p 取值范圍：16進制的00-FF，10進制的0-25528p 使用十六進制數(shù)來設置顏色，三個部分，每個顏色有256種可能的取值網(wǎng)頁的顏色256256256 = 1677721606 盒模式30p 在body中的每個HTML標簽實際上都被包圍在一個看不見的矩形中，這個矩形就叫做“盒”。盒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：顯示盒模式相關屬性p 計算盒子的尺寸p 屬性設置的更多形式marginborderpadding33p block、inline、inline-block、nonedisplay屬性display顯

8、示位置顯示位置默認寬高默認寬高可設置寬高可設置寬高可設置可設置padding可設置可設置marginblock換行父元素寬度內(nèi)容高度是是是inline同行內(nèi)容寬高否是左右inline-block同行內(nèi)容寬高是是是none隱藏-34div布局入門divdivdivdiv07 圖片36p 網(wǎng)頁中出現(xiàn)的大部分圖片都屬于以下這三種類型內(nèi)容圖片布局圖片用戶交互圖片三種網(wǎng)頁圖片37p 標簽創(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：把小圖標放在同一個文件中，提高性能p 用戶交互圖片很多都是小圖標，適合使用用戶交互圖片圖片精靈40 JPEG、PNG和GIF 復雜顏色的圖像和照片則要使用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 筆畫粗細一致有襯線字體p筆畫末端有裝飾性的線條或凸起45通用字體系列等寬字體p 每個字母寬度一致p 用于顯示軟件代碼示例手寫體裝飾性字體設計感較強09 表單47表單的工作方式http:/ 表格51p 要創(chuàng)建一個最簡單的表格，至少需要三個標簽 table：表格標簽 tr：表格行標簽，table row td：數(shù)據(jù)單元格標簽，table data表格基本標簽tabletrtd52p 標簽 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 浮動元素的特點 默認寬度是內(nèi)容的寬度 向指定方向移動，排在前一個浮動元素的旁邊，浮動在后面的元素的上面 半脫離文檔流浮動57p clear 屬性p 添加空元素p 定義 clearfix 類清除浮動的幾種方法12 定位59p position 屬性： static（默認值

12、） | relative | absolute | fixedp 精確控制標簽在HTML文檔中的位置（對static不起作用） top、right、bottom、left定位60定位p static：默認值：默認值元素在正常的文檔流中顯示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標簽提高搜索排名67p 多使用標題標簽： p 添加img標簽的alt屬性：p 一些標簽的title屬性：優(yōu)化HTML文檔HTMLHTML第二部分JavaScript69JavaScript 歷史Brendan Eich為了解決瀏覽器與用戶交互的問題，用了 10 天時間設計了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 學習大綱p 快速入門p 函數(shù)p 宿主對象p DO

15、Mp 表單p 面向對象編程p 內(nèi)置對象p AJAX72HTML 和 CSS 學習大綱01 快速入門73p 第一個程序： 和 alert()p JavaScript的工作方式： 中和中 標簽中 和 內(nèi)聯(lián)事件中p JavaScript是一門解釋型語言p 控制臺輸出：console.log();準備工作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 變量名不能使用關鍵字和保留字如：alert，if，class 都是不合法的變量名p 命名規(guī)范：首寫字母小寫mood、myMood 或 my_mood 的形式變量的命名規(guī)則77p 可以不使用var聲明變量是JavaScript的設計缺陷p ES5中的嚴格模式 啟用嚴格模式：在JavaScr

17、ipt代碼第一行寫上use strict嚴格模式JS78p JavaScript：弱類型語言，可以在任何階段改變數(shù)據(jù)類型p 字符串p 數(shù)值p 布爾值p undefined、nullp 對象p 函數(shù)數(shù)據(jù)類型79p 由零和或多個字符構成，必須寫在引號里p 可以使用單引號或雙引號p 使用轉義字符：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 流程跳轉語句：break、continue結構控制語

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

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

21、使用 isNaN( )函數(shù)比較運算符JS91p x&y 如果 x 轉換為boolean值時，結果為false，則不運行y，返回x的值 如果 x轉換為boolean值時，結果為true，則運行y，返回y的值p x|y 如果 x 轉換為boolean值時，結果為true，則不運行y，返回x的值 如果 x 轉換為boolean值時，結果為false，則運行y，返回y的值邏輯運算符92HTML 和 CSS 學習大綱02 函數(shù)93p 函數(shù)的定義：function 關鍵字p 函數(shù)的調(diào)用： ( )p 函數(shù)的參數(shù)p 函數(shù)的返回值p 個數(shù)不定的參數(shù)：arguments關鍵字p 聲明式函數(shù)：可以將函數(shù)賦值

22、給變量基本概念94p 函數(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 注意：非嚴格模式下不使用var聲明的變量，將自動變?yōu)槿肿兞孔兞康淖饔糜?函數(shù)作用域95p 所有函數(shù)內(nèi)聲明的變量會“提升”到函數(shù)頂部p 建議：先聲明函數(shù)內(nèi)部用到的所有變量函數(shù)作用域中的變量提升96p 函數(shù)外聲明的變量，作用域在全局范圍內(nèi)，叫做全局變量p 任何變量（函數(shù)也視為變量），如果沒有在當前函數(shù)作用域中找到，就會繼續(xù)往上查找，最后如果在全局

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

24、window對象p 方法中的this關鍵字：當前對象p 嚴格模式與非嚴格模式中的this 嚴格模式中，函數(shù)中的this指向 undefined 非嚴格模式中，函數(shù)中的this指向 window方法100HTML 和 CSS 學習大綱03 宿主對象101p window對象的方法 alert() confirm() prompt() setInterval() setTimeout()BOM 瀏覽器對象模型p window對象的屬性 location history screen navigator document102HTML 和 CSS 學習大綱04 DOM103p 文檔對象模型：節(jié)點樹

25、每個節(jié)點都是一個對象 結點關系DOM104p 文檔對象模型：節(jié)點類型 元素節(jié)點 文本節(jié)點 屬性節(jié)點DOM105p getElementById(id)p getElementsByTagName(tagName)p getElementsByClassName (className)p querySelector(selector)p querySelectorAll(selector)獲取DOM結點106p 標準DOM用法 getAttribute(attr) setAttribute(attr, value) removeAttribute(attr)p DOM標準出現(xiàn)之前的寫法 .（點）

26、 運算符 沒辦法刪除一個屬性獲取和設置屬性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標準事件處理函數(shù)DOM事件110HTML 和 CSS 學習大綱05 表單111p HTML5表單驗證 required、min、max、 number、email、url等p JavaScript表單驗證表單