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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

中國移動通信集團黑龍江有限公司2015.13Web前端技術培訓中國移動通信集團黑龍江有限公司2015.13Web前端技術什么是Web前端Web系統(tǒng)服務器客戶端客戶端客戶端客戶端什么是Web前端Web系統(tǒng)服務器客戶端客戶端客戶端客戶Web前端三要素HTMLCSSJavaScriptWeb前端三要素HTMLCSSJavaScript課程大綱

HTML

CSSJavaScript課程大綱HTML第一部分HTML和CSS第一部分HTML標簽開發(fā)工具超鏈接CSS選擇器顏色盒模式圖片HTML和CSS學習大綱字體表單表格浮動定位iframe搜索引擎優(yōu)化HTML標簽HTML和CSS學習大綱字體HTML和CSS學習大綱01-HTML標簽HTML和CSS學習大綱01-HTML標簽使用HTML標簽組織網(wǎng)頁結構標題標簽headingtag：<h1>–<h6>段落標簽paragraph：<p>無序列表unorderedlist：<ul>列表項listitem：<li>有序列表orderedlist：<ol>使用HTML標簽組織網(wǎng)頁結構標題標簽headingtW3C萬維網(wǎng)聯(lián)盟：

TheWorldWideWebConsortium創(chuàng)建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。W3C已發(fā)布了200多項影響深遠的Web技術標準及實施指南如HTML、CSS、WCAG等。W3C萬維網(wǎng)聯(lián)盟：創(chuàng)建于1994年，是Web技術領域最具權把所有顯示在網(wǎng)頁中的內容放入body標簽網(wǎng)頁中的不可見部分放入head標簽中將所有HTML代碼放入<html>標簽中DOCTYPE：表示HTML的版本信息使用網(wǎng)頁基本結構標簽組織整個頁面把所有顯示在網(wǎng)頁中的內容放入body標簽使用網(wǎng)頁基本結構標簽HTML和CSS學習大綱02-開發(fā)工具HTML和CSS學習大綱02-開發(fā)工具UltraEdit、EditPlus：代碼顏色、多文件編輯Dreamweaver、Sublime、WebStorm：神器常用開發(fā)工具介紹UltraEdit、EditPlus：代碼顏色、多文件編輯常官方下載地址：http:///webstorm安裝啟動配置：字體大小和配色方案的設置使用WebStorm編寫HTMLWebStorm的安裝、啟動、配置和使用官方下載地址：http://www.jetbrains.cHTML和CSS學習大綱03-超鏈接HTML和CSS學習大綱03-超鏈接在瀏覽器中輸入URL時發(fā)生了什么/news服務器請求request響應response/news在瀏覽器中輸入URL時發(fā)生了什么https://www.ja點擊超鏈接，連接中有一個文件請求被發(fā)送給服務器在瀏覽器中點擊超鏈接時發(fā)生了什么/news1瀏覽器請求

request服務器/resources/news點擊超鏈接，連接中有一個文件請求被發(fā)送給服務器在瀏覽器中點擊服務器把文件返回給瀏覽器，瀏覽器用新的文件替換舊的文件在瀏覽器中點擊超鏈接時發(fā)生了什么/resources2瀏覽器響應response新的頁面地址服務器/resources/news服務器把文件返回給瀏覽器，瀏覽器用新的文件替換舊的文件在瀏覽<a>標簽：網(wǎng)頁中可點擊的超鏈接href屬性：超鏈接指向的URL地址（hypertextreference）target屬性：當超鏈接被點擊的時候，新頁面打開的位置如何制作超鏈接_blank：在瀏覽器的新標簽或新窗口中打開頁面_self：在當前窗口中打開頁面，替換原來的頁面如果不添加target屬性，那么默認值是_self<a>標簽：網(wǎng)頁中可點擊的超鏈接如何制作超鏈接_blank：絕對路徑向一個特定的服務器上的文件發(fā)送請求絕對路徑、相對路徑和根路徑HTML相對路徑不指定服務器，參照發(fā)送請求頁面的URLHTML根路徑前面總是包含“/“，在絕對路徑的基礎上去掉協(xié)議和主機名HTML絕對路徑向一個特定的服務器上的文件發(fā)送請求絕對路徑、相對路徑04–CSS選擇器04–CSS選擇器HTML考古：當Web開發(fā)還是一項新技術時，html的內容和樣式沒有被分開將內容和樣式分離HTML內容和樣式分離：把表示樣式的代碼從html中分離出來，并且創(chuàng)建一種規(guī)則來定義html標簽要顯示成什么樣子CascadingStyleSheets

層疊樣式表HTML考古：當Web開發(fā)還是一項新技術時，html的內容和選擇器：可以選擇html標簽類型選擇器：不帶尖括號的標簽名派生選擇器：作用在某些標簽的子標簽上選擇器選擇器：可以選擇html標簽選擇器添加CSS樣式的位置：在head標簽中添加style子標簽使用<link>標簽將CSS和所有的html文件關聯(lián)在一起把樣式表放在什么地方？添加CSS樣式的位置：在head標簽中添加style子標簽把W3School/MDN/zh-CN/docs/Web/Tutorials網(wǎng)絡平臺：HTML網(wǎng)絡平臺：CSS參考手冊W3School參考手冊05–顏色black#FF000005–顏色black#FF0000CSS顏色紅色黑色黃色關鍵字顏色十六進制顏色rgb顏色CSS顏色紅色黑色黃色關鍵字顏色十六進制顏色rgb顏色每個十六進制顏色由三部分組成十六進制色（Hexadecimalcolors）#FFFF00紅色的多少綠色的多少藍色的數(shù)量取值范圍：16進制的00-FF，10進制的0-255每個十六進制顏色由三部分組成十六進制色（Hexadecima使用十六進制數(shù)來設置顏色，三個部分，每個顏色有256種可能的取值網(wǎng)頁的顏色256ⅹ256ⅹ256=16777216使用十六進制數(shù)來設置顏色，三個部分，每個顏色有256種可能的06–盒模式06–盒模式在body中的每個HTML標簽實際上都被包圍在一個看不見的矩形中，這個矩形就叫做“盒”。盒HTML在body中的每個HTML標簽實際上都被包圍在一個看不見的矩marginborderpadding內容區(qū)域–contentarea內容區(qū)域中包含的是盒子中真正的內容（文本、圖片等）補白或內邊距–paddingpadding包圍在內容區(qū)域的邊緣，上右下左邊框–borderborder包圍在padding的邊緣，上右下左邊距–marginmargin包圍在border的上右下左四個邊緣盒模式marginborderpadding內容區(qū)域–contwidth：寬height：高border：邊框padding：內補白margin：外邊距display：顯示盒模式相關屬性計算盒子的尺寸屬性設置的更多形式marginborderpaddingwidth：寬盒模式相關屬性計算盒子的尺寸marginborblock、inline、inline-block、nonedisplay屬性display顯示位置默認寬高可設置寬高可設置padding可設置marginblock換行父元素寬度內容高度是是是inline同行內容寬高否是左右inline-block同行內容寬高是是是none隱藏--------block、inline、inline-block、nonediv布局入門divdivdivdivdiv布局入門divdivdivdiv07–圖片07–圖片網(wǎng)頁中出現(xiàn)的大部分圖片都屬于以下這三種類型內容圖片布局圖片用戶交互圖片三種網(wǎng)頁圖片網(wǎng)頁中出現(xiàn)的大部分圖片都屬于以下這三種類型三種網(wǎng)頁圖片<img>標簽創(chuàng)建內容圖片src屬性：圖片的路徑alt屬性：圖片的簡單描述可訪問性：搜索引擎、屏幕閱讀器HTML<img>標簽創(chuàng)建內容圖片src屬性：圖片的路徑HTML使用CSS中的background屬性background-colorbackground-imagebackground-repeatbackground-position創(chuàng)建布局圖片使用CSS中的background屬性創(chuàng)建布局圖片圖片精靈sprite：把小圖標放在同一個文件中，提高性能用戶交互圖片很多都是小圖標，適合使用用戶交互圖片圖片精靈圖片精靈sprite：把小圖標放在同一個文件中，提高性能圖JPEG、PNG和GIF復雜顏色的圖像和照片則要使用JPEG格式動態(tài)圖像要使用GIF格式PNG格式的透明圖片要比GIF格式的更平滑這三種圖像相對于其他格式的圖像文件比較小，適合Web頁面Web上最常用的三種圖像格式JPEG、PNG和GIF復雜顏色的圖像和照片則要使用JPE08–字體08–字體CSS可以指定和改變字體外觀的常用CSS屬性使用CSS改變字體CSSfont-stylefont-weightfont-sizeline-heightfont-familyCSS可以指定和改變字體外觀的常用CSS屬性使用CSS改變字CSS使用字體列表優(yōu)先使用的字體備用自體通用字體系列CSS使用字體列表優(yōu)先使用的字體備用自體通用字體系列通用字體系列無襯線字體筆畫粗細一致有襯線字體筆畫末端有裝飾性的線條或凸起通用字體系列無襯線字體有襯線字體通用字體系列等寬字體每個字母寬度一致用于顯示軟件代碼示例手寫體裝飾性字體設計感較強通用字體系列等寬字體手寫體裝飾性字體09–表單09–表單表單的工作方式/...php、jsp、node.js等等服務器腳本用戶名：Helen密碼：******是否自動登錄處理數(shù)據(jù)表單的工作方式/..表單的工作方式/...HTML服務器php、jsp、node.js等等腳本處理數(shù)據(jù)用戶名：Helen密碼：******是否自動登錄表單的工作方式/..美食網(wǎng)表單美食網(wǎng)表單10–表格10–表格要創(chuàng)建一個最簡單的表格，至少需要三個標簽table：表格標簽tr：表格行標簽，tablerowtd：數(shù)據(jù)單元格標簽，tabledata表格基本標簽tabletrtd要創(chuàng)建一個最簡單的表格，至少需要三個標簽表格基本標簽tabl標簽table、tr、td、ththead、tbody、tfootcaption合并單元格屬性colspan：跨列單元格rowspan：跨行單元格制作一個表格標簽制作一個表格11–浮動11–浮動瀏覽器在頁面上擺放HTML元素所用的方法文檔流h1h2pp塊元素的文檔流瀏覽器在頁面上擺放HTML元素所用的方法文檔流h1h2pp塊瀏覽器在頁面上擺放HTML元素所用的方法文檔流labelinputaimg內聯(lián)元素的文檔流img瀏覽器在頁面上擺放HTML元素所用的方法文檔流labelinfloat屬性：left|right浮動元素的特點默認寬度是內容的寬度向指定方向移動，排在前一個浮動元素的旁邊，浮動在后面的元素的上面半脫離文檔流浮動float屬性：left|right浮動clear屬性添加空元素定義clearfix類清除浮動的幾種方法clear屬性清除浮動的幾種方法12–定位12–定位position屬性：static（默認值）|relative|absolute|fixed精確控制標簽在HTML文檔中的位置（對static不起作用）top、right、bottom、left定位position屬性：定位定位static：默認值元素在正常的文檔流中顯示absolute：絕對定位寬度是內容的寬度脫離文檔流，后面的元素會忽視絕對定位元素的存在參照物為第一個定位祖先，如果沒有定位祖先則參照物是html元素relative：相對定位在正常文檔流中顯示，相對于原來位置偏移參照物是元素本身通常作為絕對定位元素的參照物fixed：固定定位寬度為內容的寬度，脫離文檔流參照物是瀏覽器窗口，固定不動定位static：默認值absolute：絕對定位relatz-indexz-indexz-index:9;z-index:1;z-indexz-index:9;z-index:1;z-index13–iframe13–iframeHTMLiframe：內聯(lián)框架，在網(wǎng)頁中任意的位置嵌入另一個網(wǎng)頁iframe絕對路徑或相對路徑HTMLiframe：內聯(lián)框架，在網(wǎng)頁中任意的位置嵌入另一個14–搜索引擎優(yōu)化14–搜索引擎優(yōu)化HTML使用meta標簽提高搜索排名HTML使用meta標簽提高搜索排名多使用標題標簽：<h1>–<h6>添加img標簽的alt屬性：一些標簽的title屬性：優(yōu)化HTML文檔HTMLHTML多使用標題標簽：<h1>–<h6>優(yōu)化HTML文檔HTM第二部分JavaScript第二部分JavaScript歷史BrendanEich為了解決瀏覽器與用戶交互的問題，用了10天時間設計了JavaScript語言借鑒C的基本語法借鑒Java的數(shù)據(jù)類型和內存管理借鑒Scheme的函數(shù)式編程借鑒Self的基于原型的繼承機制1995年：JavaScript1.0JavaScript歷史BrendanEich為了解決瀏ECMAScript1997年6月：JavaScript1.11998年6月：ECMAScript21999年12月：ECMAScript32009年12月：ECMAScript5（從IE10開始完美支持）2015年6月：ECAMAScript6ECMAScript1ECMAScript2015EuropeanComputerManufacturesAssociation歐洲計算機制造聯(lián)合會ECMAScript1997年6月：JavaScript1JavaScript學習大綱快速入門函數(shù)宿主對象DOM表單面向對象編程內置對象AJAXJavaScript學習大綱快速入門表單HTML和CSS學習大綱01–快速入門HTML和CSS學習大綱01–快速入門第一個程序：<script>和alert()JavaScript的工作方式：<head>中和<body>中<script>標簽中和內聯(lián)事件中JavaScript是一門解釋型語言控制臺輸出：console.log();準備工作第一個程序：<script>和alert()準備工作語句多條語句可以寫在同一行，也可以寫在不同的行中同一行中的兩條語句之間要用分號分隔不同行中的語句末尾可以不用分號，建議使用分號注釋：注釋是給開發(fā)人員看到，JavaScript引擎會自動忽略單行：//注釋內容可以獨立成行，可以在行尾多行：/*

注釋內容

*/可以獨立，可以在行中，不可以嵌套基本語法語句基本語法變量的聲明：var變量的定義：=變量的使用：不要使用引號變量變量的聲明：var變量區(qū)分大小寫MOOD和mood是不同的變量變量名只允許包含字母、數(shù)字、美元符號、下劃線如：mymood=‘happy’;不合法第一個字符不能是數(shù)字如：2mood=‘happy’;不合法變量名不能使用關鍵字和保留字如：alert，if，class都是不合法的變量名命名規(guī)范：首寫字母小寫mood、myMood或my_mood的形式變量的命名規(guī)則區(qū)分大小寫變量的命名規(guī)則可以不使用var聲明變量是JavaScript的設計缺陷ES5中的嚴格模式啟用嚴格模式：在JavaScript代碼第一行寫上'usestrict'嚴格模式JS可以不使用var聲明變量是JavaScript的設計缺陷嚴格JavaScript：弱類型語言，可以在任何階段改變數(shù)據(jù)類型字符串數(shù)值布爾值undefined、null對象函數(shù)數(shù)據(jù)類型JavaScript：弱類型語言，可以在任何階段改變數(shù)據(jù)類型由零和或多個字符構成，必須寫在引號里可以使用單引號或雙引號使用轉義字符：\注意：不管使用雙引號還是單引號，請在腳本中保持一致多行字符串字符串String由零和或多個字符構成，必須寫在引號里字符串StringJavaScript不區(qū)分整數(shù)和浮點數(shù)以下都是合法的number類型數(shù)值numberJSJavaScript不區(qū)分整數(shù)和浮點數(shù)數(shù)值numberJS兩個可選值：true或false布爾值booleanJS兩個可選值：true或false布爾值booleanJundefined：未定義null：空undefined和nullundefined：未定義undefined和null數(shù)組是一組按順序排列的集合，集合的每個值稱為元素可以使用[]定義數(shù)組數(shù)組的元素可以通過索引來訪問通過length屬性訪問數(shù)組的長度數(shù)組Array數(shù)組是一組按順序排列的集合，集合的每個值稱為元素數(shù)組ArrJavaScript的對象是一組由屬性-值組成的無序集合可以使用{}定義對象對象的屬性都是字符串類型，可以寫引號，也可以不寫對象的值可以是任意數(shù)據(jù)類型使用.屬性名或

['屬性名']運算符訪問對象的屬性對象ObjectJavaScript的對象是一組由屬性-值組成的無序集合對象條件判斷語句：if、switch循環(huán)迭代語句：while、do-while、for、for-in流程跳轉語句：break、continue結構控制語句條件判斷語句：if、switch結構控制語句類型結果undefinedfalsenullfalseboolean不轉換number如果值為0或NaN，則結果為false；否則為trueString如果值為空字符串，則結果為false；否則為trueObjecttrue布爾環(huán)境的類型轉換類型結果undefinedfalsenullfalseboo算數(shù)運算（+、-、*、/、%、++、--）關系運算（>、<、==、!=、>=、<=、===、!==）邏輯運算（!、&&、||）位運算（&、|、^、~、<<、>>、>>>）賦值運算（=、

+=、-=、*=、/=、%=、<<=、>>=、>>>=）條件運算（?:）逗號運算（,）對象運算（new、delete、.、[]、instanceof）運算符算數(shù)運算（+、-、*、/、%、++、--）運算符算數(shù)環(huán)境的類型轉換類型結果undefinedNaNnull0booleantrue是1，false是0number不轉換String空字符串轉換為0，數(shù)值字符串轉換為數(shù)值，其它是NaNObjectNaN算數(shù)環(huán)境的類型轉換類型結果undefinedNaNnull0字符串環(huán)境的類型轉換類型結果undefined‘undefined’null‘null’boolean‘true’和‘false’number‘0’，‘123’，’Infinity’，’NaN’，String不轉換Object'[objectObject]'字符串環(huán)境的類型轉換類型結果undefined‘undefi===只要數(shù)據(jù)類型不一致，則返回false，如果一致，再比較==如果數(shù)據(jù)類型相同，則直接比較如果數(shù)據(jù)類型不同，則先轉換成數(shù)值再比較，有時會得到非常詭異的結果例外規(guī)則：判斷一個值是不是NaN要使用

isNaN()函數(shù)比較運算符JS===比較運算符JSx&&y如果x轉換為boolean值時，結果為false，則不運行y，返回x的值如果x轉換為boolean值時，結果為true，則運行y，返回y的值x||y如果x轉換為boolean值時，結果為true，則不運行y，返回x的值如果x轉換為boolean值時，結果為false，則運行y，返回y的值邏輯運算符x&&y邏輯運算符HTML和CSS學習大綱02–函數(shù)HTML和CSS學習大綱02–函數(shù)函數(shù)的定義：function關鍵字函數(shù)的調用：()函數(shù)的參數(shù)函數(shù)的返回值個數(shù)不定的參數(shù)：arguments關鍵字聲明式函數(shù)：可以將函數(shù)賦值給變量基本概念函數(shù)的定義：function關鍵字基本概念函數(shù)內聲明的變量，作用域在函數(shù)內部，叫做局部變量不同函數(shù)內部的同名變量互相獨立，互不影響內部函數(shù)可以訪問外部函數(shù)定義的變量，反過來則不行如果內部函數(shù)定義了與外部函數(shù)重名的變量，則內部函數(shù)的變量將“屏蔽”外部函數(shù)的變量注意：非嚴格模式下不使用var聲明的變量，將自動變?yōu)槿肿兞孔兞康淖饔糜颞C函數(shù)作用域函數(shù)內聲明的變量，作用域在函數(shù)內部，叫做局部變量變量的作用域所有函數(shù)內聲明的變量會“提升”到函數(shù)頂部建議：先聲明函數(shù)內部用到的所有變量函數(shù)作用域中的變量提升所有函數(shù)內聲明的變量會“提升”到函數(shù)頂部函數(shù)作用域中的變量提函數(shù)外聲明的變量，作用域在全局范圍內，叫做全局變量任何變量（函數(shù)也視為變量），如果沒有在當前函數(shù)作用域中找到，就會繼續(xù)往上查找，最后如果在全局作用域中也沒有找到，則報ReferenceError錯誤命名沖突：不同的JavaScript文件如果使用了相同的全局變量，或者定義了相同名字的頂層函數(shù)，都會造成命名沖突定義名稱空間變量作用域-全局作用域函數(shù)外聲明的變量，作用域在全局范圍內，叫做全局變量變量作用域在瀏覽器環(huán)境中的JavaScript有一個全局對象window全局作用域的變量實際上被綁定到window的一個屬性全局作用域中的window對象在瀏覽器環(huán)境中的JavaScript有一個全局對象windES6之前沒有塊級作用域ES6中引入let關鍵字替代var聲明塊級作用域ES6種引入const關鍵字定義塊級別常量變量作用域-塊級作用域ES6之前沒有塊級作用域變量作用域-塊級作用域綁定到對象上的函數(shù)稱為方法函數(shù)中的this關鍵字：window對象方法中的this關鍵字：當前對象嚴格模式與非嚴格模式中的this嚴格模式中，函數(shù)中的this指向undefined非嚴格模式中，函數(shù)中的this指向window方法綁定到對象上的函數(shù)稱為方法方法HTML和CSS學習大綱03–宿主對象HTML和CSS學習大綱03–宿主對象window對象的方法alert()confirm()prompt()setInterval()setTimeout()BOM–瀏覽器對象模型window對象的屬性locationhistoryscreennavigatordocumentwindow對象的方法BOM–瀏覽器對象模型windowHTML和CSS學習大綱04–DOMHTML和CSS學習大綱04–DOM文檔對象模型：節(jié)點樹每個節(jié)點都是一個對象結點關系DOM文檔對象模型：節(jié)點樹DOM文檔對象模型：節(jié)點類型元素節(jié)點文本節(jié)點屬性節(jié)點DOM文檔對象模型：節(jié)點類型DOMgetElementById(id)getElementsByTagName(tagName)getElementsByClassName

(className)querySelector(selector)querySelectorAll(selector)獲取DOM結點getElementById(id)獲取DOM結點標準DOM用法getAttribute(attr)setAttribute(attr,value)removeAttribute(attr)DOM標準出現(xiàn)之前的寫法

.（點）

運算符沒辦法刪除一個屬性獲取和設置屬性標準DOM用法獲取和設置屬性遍歷節(jié)點childNodesnodeTypenodeValuefirstChildlastChild操作節(jié)點創(chuàng)建節(jié)點innerHTMLcreateElement(nodeName)createTextNode(text)插入節(jié)點appendChild(child)insertBefore(new,ref)遍歷節(jié)點操作節(jié)點創(chuàng)建節(jié)點操作style屬性操作class操作樣式表文件CSS-DOM操作style屬性CSS-DOM內嵌事件處理函數(shù)分離事件處理函數(shù)和HTMLDOM標準事件處理函數(shù)DOM事件內嵌事件處理函數(shù)DOM事件HTML和CSS學習大綱05–

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論