基礎班00php上課進度

1、day1：偉大發(fā)明（蒸汽機，電視，電腦，互聯(lián)網(wǎng)）互聯(lián)網(wǎng)介紹，web 編程介紹，web 前端介紹html 設計網(wǎng)頁基本：表形與表意相結合。，編輯器，瀏覽器及工具：第一個網(wǎng)頁：o world。基本格式。幫助文檔：Html 手冊.字體元素HTML4 參考手冊.，strong b iu sub sup font address big small排版元素p br hr pre blockquote div span h1h6列表元素ul ol li dl dt dd案例：“關于”，“你要去哪里”補充介紹 xml，xhtml二進制原理，字符編碼原理。day2：元素 a link base多元素 img

2、map area object embed表格元素 table tr th td caption thead tbody tfoot案例：“你要去哪里（帶）”，“地圖”表格案例：“課程表”，“參賽選手”day3：表單元素：form input button select option textarea案例：用戶登錄（簡單），用戶頁（復雜）框架元素： frameset frame noframes iframe框架案例：企業(yè)三欄其它元素：style script綜合案例：當當?shù)卿?day4:html 設計目標：讓內容（包括文字和多）以一定的方式和一定的意義表現(xiàn)出來。html 的局限：當需要呈現(xiàn)相

3、同內容形式的時候，需要重復寫大量的代碼，并且如果需要修改的時候，還是需要重復修改大量代碼，非常不靈活。（舉例：多項定義列表）css 出場：使用 css 可以解決上述問題（舉例修改）引入案例：詞典（定義列表應用）網(wǎng)頁設計的升華：頁面內容與表現(xiàn)分離，內容使用基本簡單，只為表示基本含義與層次結構，表現(xiàn)則使用 css 在另外的位置進行設定。幫助文檔：CSS2.1 中文完全參考手冊.css 基礎：基本語法形式，樣式分類（行內，內部，外部，導入），選擇器類型（【id，class，tag，通用】，偽類，偽元素，層級選擇器，分組選擇器），選擇器優(yōu)先級（行內idclasstag通用）講樣式分類使用 2-3 個文

4、字效果，講選擇器分類使用 2-3 個效果文字/段落樣式：color, font-size，font-weight，font-family，font-style，line-height，letter-spacing， word-spacing，text-align，text-indent，vertical-align文本與字體樣式屬性案例：信息/參賽選手信息盒子模型基礎：盒子的形狀，盒子的寬高（width，height），盒子的padding，content）盒子基本案例：“30 元現(xiàn)金券等你拿”。盒子案例的局限：并列的盒子怎么辦？引出浮動基本做法：左浮，右浮，清除浮動：float，width，

5、heigh，案例：浮動基本布局色塊頁：3 行，中間行分左右列。案例：瓜瓜網(wǎng)整體布局（margin，border，day5：盒子模型進一步細化：盒子寬高列表，背景，背景定位，邊框細化，內外邊距，層次關系。浮動細化：布局的基本原理，浮動的特性，清除浮動的作用和方法。浮動就是讓一個元素脫離其所在父盒子的正常文檔流，使其“浮”起來以致父盒子的邊框線框不住自己（但起始位置還是以其所在的位置為起點的）?？雌饋砀负凶拥母叨戎胁辉贂プ詣佑嬎阍摳雍凶铀紦?jù)的高度。Css 其他屬性/高級特性：列表，定位，偽類案例：呱呱網(wǎng)頭部，導航，公告，banner 圖，呱呱網(wǎng)左邊 3 欄內容day6：div 布局深入與總結

6、：內容與表現(xiàn)分離，分塊，整體到局部，標準流與非標準流，絕對定位，層疊順序，塊元素與行元素的轉換。常見 bug 及兼容性調試案例為主：呱呱網(wǎng)其余部分有時間可補充：inline-block 布局，設計一個新站點（佳能首頁）day7:javascript 介紹：發(fā)展歷程，代碼形式，運行機制o world 程序，write 和 alert 使用基本語則：一條語句結束，注釋，區(qū)分大小寫，代碼規(guī)范（層次縮進）變量，數(shù)據(jù)類型（string, number, null, undefined|object, array）變量名規(guī)則表達式與運算符（算術，比較，邏輯，位，字符串，賦值，其他），運算符的優(yōu)先級，括號的

7、使用案例：求三角形的斜邊，一元二次方程根的求解，賦值傳值傳值，字符相加day8：流程控制之分支結構：if，switch，案例：給成績進行評價， 顯示幾，流程控制之循環(huán)結構：for，while，do whireak 與 continue，案例：1-100 范圍內能被 3 整除的數(shù)的和，1-100 范圍內既能被 3 整除又不能被 7 整除的數(shù)有哪些，星號金字塔，99 乘法表，黑白紅球各多少，函數(shù)：概念，定義，調用，參數(shù)，返回值，變量作用域，系統(tǒng)內部函數(shù)案例：已知 r 求圓的面積；已知兩直角邊求斜邊；已知長寬是否閏年，表面積；給定年份判斷day9：內置對象：String, Math, Date，Ar

8、ray案例：用戶名只能是字母且不超過 10 個；限制用戶上傳文件的類型；隨機輸出 5 個 1-100之間的整數(shù)； 跟電腦玩石頭剪子布；1000 天之后是哪一天；到現(xiàn)在為止你活了多少天了？假設 30 歲你要“功成名就/成名立萬/成家立業(yè)”，你還有多少天去奮斗？數(shù)組：概念，定義，取值，賦值，循環(huán)（for 和for in），二維數(shù)組，數(shù)組遍歷，數(shù)組常用方法案例：求一個整數(shù)數(shù)組的平均值；求一個整數(shù)數(shù)組中的奇數(shù)的個數(shù)和偶數(shù)的個數(shù)；求一個整數(shù)數(shù)組中的最大值和最小值以及各自的下標；交換一個數(shù)組中最大值和最小值的位置；將一個整數(shù)數(shù)組的奇數(shù)都乘以 2；將一個數(shù)組的元素順序“反轉”過來。案例：求一個 3 行 4

9、列的二維數(shù)組的平均值及最大值和最小值，并交換其位置，求一個二維數(shù)組的“周邊元素的和”。day10：對象介紹：對象就是一個具體的“物體”，這個物體有自己的特性特征特點（屬性）和功能/行為/動作（方法）。網(wǎng)頁中的對象：html對象DOM 介紹，htmlDom，Dom 控制網(wǎng)頁，操作 Dom 對象的屬性和樣式案例：讓一個 div 變得“面目全非”。事件 event：概念，事件源，事件處理程序，事件名稱，事件對象瀏覽器差異，事件類型案例：燈泡開關切換案例：網(wǎng)頁版計算器（自動計算，onblur）案例：登錄提示：文字，顏色，背景，進出邏輯案例：事件鏈：在一個輸入框中進行如下操作并顯示所有經歷過的事件并顯示

10、到 textarea中：鼠標進入后點擊獲得焦點并輸入一個字符“a”然后再鼠標點擊外部區(qū)域離開該輸入框。案例：移動瞄準：onload 的時候將網(wǎng)頁的一個區(qū)域初始化為“黑為瞄準狀態(tài)并時刻顯示坐標。案例：點出滿天小星星：每點擊一下，就“創(chuàng)建一個 img 對象”，鼠標進入后變day11：BOM 介紹，BOM 結構window 對象：若干方法。其他 window 子對象：location, history, screen, navigator,案例 1：點擊按鈕彈出小窗 q 口自動彈出窗口。案例 2：切換。案例 3：網(wǎng)頁時鐘（如果要求時鐘在一分鐘之后就自動停掉，怎么辦？）案例 4：根據(jù)用戶顯示器的分辨率

11、載入不同的網(wǎng)頁，并根據(jù)用戶使用的瀏覽器不同也給出不同的提示：IE 用戶提示“你 out 了，現(xiàn)在流行火狐呢”，F(xiàn)F 用戶提示“你很時髦啊，緊跟時代腳步”day12:網(wǎng)頁 DOM 內置對象：法大全。Element，body，forms，images，links，all，及找對象的辦擴展：table 對象：table-rows-row-cells-cell。DOM 基礎：含義，結構與層次關系，節(jié)點（node，對比：元素，素 1，文本 2，屬性 3），對象），節(jié)點類型（元常用屬性：ChildNodes，attributes, nodeName, nodeValue, nodeType）,Child,

12、 lastChild, nextSibling, previousSibling, parentNode;常用方法：getribute(), setribute(), hasChildNodes(), createElement(), createTextNode(),appendChild(), removeChild(), insertBefore(), cloneNode(),案例 1：“看你能堅持多久”。案例 2：基于 table 的用戶管理系統(tǒng)案例 3：表單驗證：當當?shù)卿?，當當day13：html5 新知識與應用：html5 支持度測試：htt/test/html5/index.ht

13、ml瀏覽器統(tǒng)計： http:/data/browser新語義：舉例：http/view/297739.htmfooter，header，nav（純語義 article（文章：外部文章區(qū)），：腳部，頭部，導航），section（分區(qū)，區(qū)塊，文章的“節(jié)”）， aside（邊欄：相關參考區(qū)），details（詳細內容：與 summary 配合，表示顯示的“概要/標題”，點擊打開關閉內容），hgroup（標題組：對標題time（時間或日期，純語義）進行組合），與資源：audio（聲音：mp3, ogg, wav），（：ogg, mpeg4）source（為 audio 和定義資源），embed（嵌入內

14、容，外部插件），功能性：mark（標記文字，突出顯示）， progress（進度條），新表單元素：input type=”date/datetime/url/number/time/range/k”datalist（數(shù)據(jù)列表：表示可選數(shù)據(jù)表，配合 inputtext使用，設置其 list=”xxid”），output（輸出區(qū)，語義性質，表現(xiàn)類似 span，但作為表單使，當然可以上傳到 server），新屬性：hidden,contenteditable，placeholder本地：window.localStorage.lastname=Smith;/localStorage.setItem(

15、lastname, smith);/localStorage.setItemlastname=smith;sesStorage.lastname=John;：var v1 = localStorage.lastname，localStoragelastname，localStorage.getItem(lastname”);sesStorage.lastname，sesStorage lastname，sesStorage.getItem(“l(fā)astname”);清除： localStorage.removeItem(“l(fā)astname”)；localStorage.clear();canva

16、s（畫布），畫布應用：.geementI (canvas1); /畫布對象canvas1 =cntxt = canvas1.getContext(2d); /畫布對象上的“畫筆”，所有圖形都用它“畫”出來/畫線cntxt.moveTo(20,20);/將畫筆移動到某點 cntxt.strokeStyle = #ff0000; /設置畫筆填充樣式 cntxt.lineWidth = 3;/設置線寬cntxt.lineTo(100,50);/畫到點 100，50 cntxt.lineTo(50,100);/再畫到點 50，100/畫線cntxt.stroke();/畫矩形圖案：cntxt.stro

17、keStyle = rgb(255,0,0); /填充色cntxt.strokeRect(350,20,50,30);/畫矩形框：左上角位置，寬高cntxt.fillStyle = rgb(255,0,0);/填充色cntxt.fillRect(110,20,150,100);/畫矩形塊：左上角位置，寬高cntxt.clearRect(120,40,60,60);/“挖矩形塊”：左上角位置，寬高繪制路徑：就是連續(xù)畫一些線，然后最后會將第一根的起始和最后一根線的末尾連起來成為閉合的區(qū)塊并可以將其填充顏色或其他beginPath()/開始路徑。cntxt.moveTo(320,300); /將畫筆

18、定位到某處，此時還可以設置畫筆的顏色，粗細lineTo(x,y);/或 arc(x, y, radius, startAngle, endAngle,lockwise)。/畫一系列線closePath()/關閉路徑，實際就是使用當前線形自動將首尾連接/或 fill()；/畫線或填充stroke()/繪制圓?。篶ntxt.arc(x, y, radius, startAngle, endAngle,lockwise)/圓心坐標 x，y，半徑，起始角度（弧度），終止角度（弧度），順/逆(false/true)時針）/弧度指以圓心為原點，以 x 方向為起始線，順時針方向的角度（弧度）day14-day15：呱呱網(wǎng)首頁：html+css+js 的綜合應用 當當網(wǎng)動態(tài)效果：html+css+js 綜合應用day16：系統(tǒng)模式（單機，CS/模式，BS/模式）網(wǎng)絡原理（ip，dns，hosts 文件）