整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML5+CSS3 Web前端開發與實例教程：微課視頻版》
本書內容
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》秉承“思政引領，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對標企業和行業需求；引入現代Web前端開發的核心技術，如Flex布局、Grid布局，以及人工智能編程插件，同時融入企業開發實踐，確保學習內容與實際工作緊密相關。全書以一個完整案例為主線，結合綜合項目實戰操作，體現育人、應用和創新三項能力。《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習題與答案、微課視頻、教案、教學大綱、章節測試、云題庫、實驗報告、學習通在線課程、企業高頻面試題、學科競賽真題等豐富的教學資源，并設有QQ群提供線上學習跟蹤和指導服務。
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》共分14章，系統地講解Web前端開發的核心技術，主要內容包括Web前端開發概述、HTML5基礎、HTML5頁面元素和屬性、表單、CSS3基礎、CSS3修飾頁面元素、CSS3高級選擇器、CSS3盒子模型、浮動與定位、CSS3高級應用、網頁布局、Flex布局、Grid布局等，并提供“大學生參軍入伍專題網站”和“文創商城”兩個實戰案例。
本書作者
盧欣欣，副教授。長期從事高校教學工作，專注Web應用開發，項目開發經驗豐富。主講《Web程序設計》《高級程序設計》《軟件開發綜合實踐》等課程，先后主編教材2部，參編教材3部。在慕課網上線的《企業網站綜合布局實戰》課程學習人數超15萬人。
崔仲遠，副教授，畢業于北京交通大學。長期從事高校教學工作和軟件項目開發工作，實戰開發經驗豐富。先后承擔《網頁特效設計》《Web前端基礎》《跨平臺腳本開發技術》等多門課程的教學任務，發表學術論文多篇，主編教材2部，參編教材3部、專著1部。主持省級教改項目1項、科研項目1項。
本書讀者
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》既可作為本專科院校計算機相關專業的Web程序設計、網頁設計與制作等課程的教材，也可作為Web應用開發人員的自學手冊和技術參考書。
本書目錄
第1章 Web前端開發概述 1
1.1 Web前端開發職責 1
1.2 Web前端開發相關概念 2
1.3 Web前端開發相關技術 3
1.3.1 Web標準 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端開發工具 5
1.4.1 代碼編輯工具：VSCode 6
1.4.2 代碼運行工具：瀏覽器 8
1.4.3 開發者工具 9
1.4.4 人工智能輔助編程工具 10
1.5 網站設計與開發流程 11
1.6 實戰案例：網頁顯示“社會主義核心價值觀” 12
1.7 本章小結 13
第2章 HTML5基礎 14
2.1 HTML5語法基礎 14
2.1.1 HTML文檔結構 14
2.1.2 HTML標簽語法 17
2.1.3 HTML注釋 18
2.2 文本控制標簽 19
2.2.1 標題標簽 19
2.2.2 段落標簽 20
2.2.3 換行標簽 20
2.2.4 文本格式化標簽 21
2.2.5 特殊字符 22
2.3 圖像標簽 23
2.3.1 網頁常用圖像格式 23
2.3.2 圖像標簽的使用 24
2.3.3 相對路徑與絕對路徑 26
2.4 超鏈接標簽 27
2.4.1 文本鏈接 27
2.4.2 圖像鏈接 28
2.4.3 書簽（錨點）鏈接 28
2.4.4 其他鏈接 30
2.5 列表 30
2.5.1 有序列表 31
2.5.2 無序列表 32
2.5.3 定義列表 34
2.5.4 嵌套列表 35
2.6 表格 36
2.6.1 表格結構 36
2.6.2 表格標簽 37
2.7 視頻和音頻標簽 41
2.7.1 視頻標簽 41
2.7.2 音頻標簽 42
2.8 其他標簽 42
2.8.1 預格式化標簽 42
2.8.2 水平線標簽 43
2.8.3 行內容器標簽 43
2.9 實戰案例：“大學生參軍網站”兵役登記頁面 44
2.10 本章小結 46
第3章 HTML5頁面元素和屬性 47
3.1 文檔結構標簽 47
3.1.1標簽 47
3.1.2標簽 49
3.1.3標簽 50
3.1.4標簽 51
3.1.5標簽 53
3.1.6標簽 53
3.1.7和標簽 54
3.1.8標簽 55
3.2 交互元素 55
3.2.1 標簽 55
3.2.2 標簽 56
3.2.3標簽 57
3.3 文本層次語義標簽 58
3.3.1 標簽 58
3.3.2 標簽 59
3.3.3 標簽 60
3.4 全局屬性 61
3.5 實戰案例：“大學生參軍網站”頁面結構 62
3.6 本章小結 64
第4章 表單 65
4.1 表單概述 65
4.2標簽 67
4.3 標簽 68
4.3.1 單行文本框 69
4.3.2 密碼框 69
4.3.3 文件域 70
4.3.4 單選按鈕和復選框 71
4.3.5 隱藏域 73
4.3.6 按鈕 73
4.3.7 HTML5新增輸入元素 76
4.4 標簽 78
4.5 標簽 79
4.6 選擇列表標簽 80
4.7 多行文本框標簽 83
4.8 表單常用屬性 84
4.9 實戰案例：“大學生參軍網站”網上咨詢表單 86
4.10 本章小結 88
第5章 CSS3基礎 89
5.1 CSS概述 89
5.2 CSS語法規則 90
5.3 CSS樣式的引入方法 91
5.3.1 行內樣式表 91
5.3.2 內部樣式表 92
5.3.3 外部樣式表 93
5.4 CSS基本選擇器 94
5.4.1 標簽選擇器 94
5.4.2 ID選擇器 95
5.4.3 類選擇器 95
5.4.4 通用選擇器 97
5.5 實戰案例：“大學生參軍網站”公共樣式表制作 97
5.6 本章小結 98
第6章 CSS3修飾頁面元素 99
6.1 CSS字體樣式 99
6.1.1 字體粗細屬性 99
6.1.2 字體風格屬性 100
6.1.3 字體大小屬性 101
6.1.4 字體族屬性 103
6.1.5 字體屬性 106
6.2 CSS文本樣式 107
6.2.1 行高屬性 107
6.2.2 顏色屬性 109
6.2.3 文本水平對齊屬性 110
6.2.4 首行縮進屬性 111
6.2.5 文本修飾屬性 111
6.2.6 字符間距屬性 112
6.2.7 字間距屬性 113
6.2.8 字母大小寫屬性 114
6.2.9 文本陰影效果屬性 115
6.3 CSS表格樣式 116
6.4 CSS表單樣式 118
6.4.1 單行文本框美化 119
6.4.2 按鈕美化 120
6.4.3 下拉列表美化 120
6.5 CSS列表樣式 122
6.6 實戰案例：“大學生參軍網站”在線咨詢頁面 123
6.7 本章小結 126
第7章 CSS3高級選擇器 127
7.1 組合選擇器 127
7.1.1 交集選擇器 127
7.1.2 并集選擇器 128
7.1.3 后代選擇器 129
7.1.4 子元素選擇器 130
7.1.5 相鄰兄弟選擇器 131
7.1.6 通用兄弟選擇器 132
7.2 屬性選擇器 133
7.3 偽類選擇器 134
7.4 偽元素選擇器 136
7.5 CSS三大特性 138
7.6 本章小結 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 認識盒子模型 142
8.1.2
標簽 144
8.2 盒子模型的相關屬性 144
8.2.1 內容區域的寬度和高度 144
8.2.2 邊框 145
8.2.3 內邊距 152
8.2.4 外邊距 153
8.3 陰影 155
8.4 box-sizing 156
8.5 背景屬性 158
8.5.1 背景顏色 158
8.5.2 背景圖像 158
8.5.3 圖像平鋪方式 158
8.5.4 背景圖像位置 160
8.5.5 背景圖像固定 161
8.5.6 背景圖像大小 161
8.5.7 背景裁剪 163
8.5.8 背景復合屬性 164
8.5.9 CSS精靈圖 165
8.6 實戰案例：“大學生參軍網站”登錄頁面 166
8.7 本章小結 169
第9章 浮動與定位 170
9.1 標準文檔流 170
9.2 元素的分類 171
9.2.1 塊級元素、行內元素與行內塊元素 171
9.2.2 元素的類型轉換 172
9.3 元素的浮動 173
9.3.1 設置浮動 174
9.3.2 清除浮動 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位屬性 181
9.4.3 靜態定位 181
9.4.4 相對定位 182
9.4.5 絕對定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 層疊等級屬性 188
9.5 實戰案例：“大學生參軍網站”輪播圖效果 190
9.6 本章小結 192
第10章 CSS3高級應用 193
10.1 變換 193
10.1.1 旋轉 194
10.1.2 傾斜 195
10.1.3 縮放 196
10.1.4 平移 197
10.1.5 變換原點 198
10.2 過渡 200
10.3 動畫 202
10.4 實戰案例：“大學生參軍網站”CSS3高級應用 205
10.5 本章小結 208
第11章 網頁布局 209
11.1 網頁布局概述 209
11.1.1 網頁布局的概念 209
11.1.2 網頁布局的流程 210
11.1.3 常見的網頁布局方法 211
11.2 網頁布局命名規范 211
11.3 常見布局的實現 212
11.3.1 單列布局 212
11.3.2 兩列常規布局 214
11.3.3 三列常規布局 216
11.3.4 兩列自適應等高布局 217
11.3.5 三列自適應布局 219
11.4 實戰案例：“大學生參軍網站”首頁主體部分 223
11.5 本章小結 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相關概念 227
12.3 容器屬性 227
12.3.1 display屬性 228
12.3.2 flex-direction屬性 228
12.3.3 flex-wrap屬性 230
12.3.4 justify-content屬性 232
12.3.5 align-items屬性 233
12.3.6 align-content屬性 235
12.4 項目屬性 236
12.4.1 order屬性 236
12.4.2 flex-grow屬性 237
12.4.3 flex-shrink屬性 239
12.4.4 flex-basis屬性 240
12.4.5 flex屬性 241
12.5 實戰案例：“大學生參軍網站”導航條 242
12.6 本章小結 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相關概念 246
13.3 容器屬性 246
13.3.1 display屬性 247
13.3.2 劃分網格 248
13.3.3 行間隔和列間隔 252
13.3.4 項目對齊方式 253
13.4 項目屬性 255
13.4.1 grid-column和grid-row屬性 255
13.4.2 grid-area屬性 257
13.5 實戰案例：“大學生參軍網站”視頻展播列表 258
13.6 本章小結 260
第14章 Web前端項目綜合實踐——文創商城 261
14.1 項目概述 261
14.2 需求分析 262
14.3 原型設計 262
14.4 公共部分的設計與實現 265
14.4.1 重置樣式 265
14.4.2 頁面頭部 265
14.4.3 頁面底部 268
14.4.4 懸浮側邊欄 270
14.5 首頁的設計與實現 271
14.5.1 甄選好物版塊 271
14.5.2 國博文房版塊 274
14.6 商品列表頁的設計與實現 277
14.6.1 商品類型篩選 277
14.6.2 分頁導航 278
14.7 商品詳情頁的設計與實現 279
14.8 本章小結 283
編輯推薦
1HTML5與CSS3是Web前端開發的兩大核心技術，它們不僅是Web前端開發工程師必須掌握的技能，也是高校一門重要的Web前端課程內容
2《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》以“從項目中來到項目中去”為主旨，從Web前端開發的基本概念入手，系統介紹HTML5、CSS3網頁編程技巧。
3《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》采取“知識點講解+示例解析+案例詳講+高頻面試題+實踐操作+學科競賽真題”的遞進式教學模式，引導讀者理解理論知識，掌握開發方法，學會復雜的網站設計技能，全面提升讀者的Web前端開發能力。
4《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習題與答案、教案、教學大綱、章節測試、云題庫、實驗報告、學習通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術。
本文摘自《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》，獲出版社和作者授權發布。
們已經學了這么久，不知道大家對于HTML標簽及屬性有沒有初步的認識了呢，我們現在是不是特別想做一個自己的網頁呢？這一部分我們給大家講完CSS中的布局屬性就可以完成一個簡單的網頁了。下面我們開始講解吧！
1、 文檔流
2、 布局屬性
3、 頁面結構
4、 頁面布局
5、 HTML5新增標簽
6、 頁面制作
首先我們先了解一下什么是文檔流。
一、 文檔流
文檔流分為普通文檔流和脫離文檔流。
普通文檔流：元素從上至下排列的順序。
脫離文檔流：元素從正常的排列順序被抽離。
我們先來看一下普通文檔流，看一下標簽是怎樣在瀏覽器中的顯示排列的。
代碼：
顯示效果：
我們看到這就是普通文檔流，那個標簽先寫的，就在瀏覽器的最開始位置顯示，后寫的標簽，就在后面依次顯示。那脫離文檔流就是讓標簽通過某種CSS屬性，讓其不是依次顯示在后面，而是按照我們的意思在瀏覽器中顯示。那這種脫離文檔流的方式有幾種呢？一種就是使用布局屬性的浮動屬性（float），一種就是定位屬性（position）。今天我們重點給大家講解的就是布局屬性。
二、 布局屬性（float 浮動）
首先我們先看一下float的使用。
1. 沒有設置浮動的兩個元素，也就是正常的文檔流。
代碼：
顯示效果：
2. 設置第一個元素左浮動
代碼：
顯示效果
設置了第一個元素左浮動后，就會改變了元素的排列順序了，left的這個元素就浮動了最上層，他的空間就被right這個元素占領了。大家很明顯的看到了right的這個元素的高度由原來的200像素變成了100像素，其中有100像素是在left這個元素的下面了。這種情況一般應用在以下場景。
網頁中的圖文混排的地方。
代碼：
顯示效果：
3. 第一個元素設置右浮動時
代碼：
顯示效果：
大家看，設置了一個元素右浮動時，left這個元素就漂浮在了右側，而他的位置被right這個元素占領了。這種情況應用在以下場景。
文字顯示在右側。這種情況通常使用一個元素右浮動。
顯示效果
4. 兩個元素同時左浮動。
代碼：
頁面顯示效果
設置兩個元素同時左浮動，通常應用在頁面布局。及導航的制作。
5. 一個元素左浮動一個元素右浮動
代碼：
顯示效果
這種情況也是常用于布局，主要運用于左右兩列的布局，或者三列的布局。
6. 兩個元素同時設置右浮動
代碼：
顯示效果
大家看到了沒有，像這種情況元素的位置都顛倒了，所以像這種情部幾乎不使用。
總結：浮動在我們在制作網頁過種中使用的頻率比較高。但是浮動還會引起種問題（后續會講浮動引起的問題），所以我們在使用浮動的時候要注意，盡量減少使用浮動。浮動可以使標簽在左側或者在右側顯示，主要運用于布局、導航的制作等。另外大家還要注意另外一個問題：在布局時，浮動的元素的后面的元素不需要占領前面的元素的位置應該怎么辦呢？（但值得注意的是浮動影響后面的元素，但是元素的內容不受影響，還是能顯示出來的）先看代碼及效果。
代碼：
顯示效果
通過代碼和效果，大家看到了，第三個元素占領了前面浮動元素的空間，如果不需占領怎么辦呢？我們就想到了用清除浮動就可以了。明天我們將繼續為大家講解清除浮動。
HTML5 是最近十年來 Web 開發標準最巨大的飛躍，目前蘋果、谷歌、微軟世界三大移動互聯網巨頭都支持了 HTML5，HTML5 的發展給移動互聯網應用帶來了全新的變化。HTML5 的出現，給移動互聯網帶來了新的變革，為移動互聯網中富媒體的應用提供了新的思路，并具有廣闊的應用前景。所以HTML5適應了目前的移動互聯網應用潮流。
Html5課程內容主要包括以下八個方面：Web頁面制作基礎，UI網站設計，編程基礎技術，后端開發技術，移動互聯網應用，特效開發高級實戰，企業級應用開發以及網頁游戲開發。
兄弟連教育根據公司和行業發展的實際需要設計教學內容，現行的課程體系包括四大階段和特級課：“基礎網頁布局與響應式布局”、“前端核心技術：Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開發”，”特級課：微信開發”。
第一階段：基礎網頁布局與響應式布局
主要內容：
1、HTML CSS
2、PS操作，網頁切圖
3、基本網頁布局
4、HTML5 語義標簽
5、HTML5 智能表單
6、CSS3
7、Media Query響應式布局
--------------------------------------------------分割符---------------------------------------------------------------------------
詳細內容包括：
WEB開發構件
系統及文件基本操作
基本的快捷鍵
描述 Windows Mac OS
編輯菜單 Alt + E Ctrl + F2 + F
文件菜單 Alt + F Ctrl + F2 + E
視圖菜單 Alt + V Ctrl + F2 + V
全選文本 Ctrl + A Cmd + A
復制文本 Ctrl + C Cmd + C
查找文本 Ctrl + F Cmd + F
查找替換文本 Ctrl + H Cmd + F
新建文檔 Ctrl + N Cmd + N
打開文件 Ctrl + O Cmd + O
打印選項 Ctrl + P Cmd + P
保存文件 Ctrl + S Cmd + S
粘貼文本 Ctrl + V Cmd + V
剪切文本 Ctrl + X Cmd + X
重做文本 Ctrl + Y Shift + Cmd + Z
撤銷文本 Ctrl + Z Cmd + Z
文本編輯 描述 Windows Mac OS
光標移動操作
文本編輯操作
Web 瀏覽器操作
標簽/窗口管理
打印當前網頁
保存當前網頁
地址欄操作
書簽操作
屏幕截圖
WEB開發構件
C/S結構
B/S結構
HTTP協議
傳輸數據方式：post,get
HTTP消息類型：2xx,4xx,5xx
URL組成
HTML介紹
HTML發展史
HTML5簡介
新標準
引入原生多媒體支持
引入可編程內容
引入予以Web
http協議
HTTP消息類型：2xx,4xx,5xx
開發軟件
nodepad++
sublime
dreamweaver
HTML介紹
HTML發展史
HTML5介紹
HTML基本語法與規范
標簽
屬性
固有屬性
自定義屬性
通用屬性
元素
父元素（理解）
子元素
兄弟元素
后代元素
主體結構
長度單位
顏色單位
基礎標簽
文本類標簽
文本格式化標簽
<b> 定義粗體文本
<strong> 定義加重語氣
<em> 定義著重文字
<i> 定義斜體字
<br> 換行標簽
<sub> 定義下標字
<sup> 定義上標字
<ins> 定義插入字
<del> 定義刪除字
<code> 定義計算機代碼
<kbd> 定義鍵盤碼
<samp> 定義計算機代碼樣本
<var> 定義變量
<pre> 定義預格式文本
<abbr> 定義縮寫
<address> 定義地址
<bdo> 定義文字方向
<blockquote> 定義長的引用
<q> 定義短的引用語
<cite> 定義引用、引證
<dfn> 定義一個定義項目。
計算機輸出類
語義，引用及標簽定義
鏈接<a>
標題Hn
HTML框架iframe
段落P
列表標簽
字符實體
空格  
< 小于號 < <
> 大于號 > >
& 和號 & &
" 引號 " "
' 撇號 ' (IE不支持) '
￠ 分 ¢ ¢
￡ 鎊 £ £
￥ 日元 ¥ ¥
€ 歐元 € €
§ 小節 § §
? 版權 © ©
? 注冊商標 ® ®
? 商標 ™ ™
× 乘號 × ×
÷ 除號 ÷ ÷
表格標簽
colgroup
caption
table
thead
col
span
th
tbody
tr
td
colspan
rowspan
tfoot
頭部標簽
<!doctype html>
<head> 定義了文檔的信息
<title> 定義了文檔的標題
<base> 定義了頁面鏈接標簽的默認鏈接地址
<link> 定義了一個文檔和外部資源之間的關系
<meta> 定義了HTML文檔中的元數據
charsetNew character_set 定義文檔的字符編碼。
content text 定義與 http-equiv 或 name 屬性相關的元信息。
http-equiv content-type
default-style
refresh 把 content 屬性關聯到 HTTP 頭部。
name application-name
author
description
generator
keywords 把 content 屬
<script> 定義了客戶端的腳本文件
<style> 定義了HTML文檔的樣式文件
多媒體標簽
1. img
1.1 導入一張圖片
1.2 屬性
src 圖片地址
width 設置圖片寬
height 設置圖片高
border 設置圖片邊框
alt 不顯示圖片時的提示信息
title 鼠標放上時顯示的圖片描述信息
usemap map標簽的name #name
2. map
2.1 給圖片劃分區域 配合area
2.2 屬性
name 給map指定一個name
3. area
3.1 在map的配合下給圖片劃分指定形狀的區域
3.2 屬性
shape 劃分的形狀
coords 形狀的坐標·
href 要鏈接的地址
target 新網頁打開方式
4. audio
4.1 導入音頻的標簽 HTML5新標簽
4.2 屬性
src 音頻源的路徑 必備
controls 顯示控制按鈕 必備
autoplay 自動播放
loop 是否循環
preload 預加載 不能跟autoplay屬性混用
4.3 audio標簽內部加文字，如果瀏覽器支持這個標簽則文字不會顯示 ，如果不支持就會顯示
4.4 audio標簽的兩個格式
簡單格式
<audio src="../video/music.mp3" controls>您的破瀏覽器不支持，請升級瀏覽器
</audio>
完整格式 視頻源單獨放到source標簽中
<audio controls>
您的破瀏覽器不支持，請升級瀏覽器
<source src='../video/music.mp3' type='audio/mp3'>
<source src='../video/music.wav' type='audio/wav'>
</audio>
5. video
5.1 導入視頻的標簽 HTML5新標簽
5.2 屬性
src 路徑
controls 顯示控制按鈕
autoplay 自動播放 屬性值 auto none
loop 是否循環播放
width 視頻的寬
height 視頻的高
poster 縮略圖地址
6. source
6.1 配合video標簽 導入不同格式的視頻 HTML5新標簽
6.2 屬性
src 視頻地址
7. canvas 用于畫圖的標簽
8. embed
8.1 導入多媒體文件 音頻 視頻 HTML5新標簽
8.2 屬性
src 多媒體文件地址
width
height
HTML表單及智能表單
1. 表單相關標簽
1.1 form 客戶端跟服務器端進行交互，常用語 登錄 注冊 調查問卷...
① 定義表單 所有的表單控件放在form中
② 屬性
action 表單要提交的地址
method 提交方法 get（默認）提交的值會顯示在url上 不安全而且傳遞的值數量有限 post 提交的內容不會顯示 在url上，傳遞的值范圍也比get方式的大，相對安全
target 打開新網頁的方式 _self _blank _top _parent
enctype="multipart/form-data" 傳文件必須加上
1.2 input
① 定義輸入框密碼框單選框復選框.....
② 屬性
type input的類型
name input的名字
value input的值
checked 默認radio和checkbox
size input框的大小 type:text password textarea
maxlength input最大輸入長度 type:text password
1.3 button
① 以標簽形式定義按鈕
② 屬性
type 設置submit（默認值）， 按鈕具有提交功能 設置為button，普通按鈕 reset 重置
1.4 textarea
① 文本域 雙標簽
② 屬性
name 指定名字
rows 指定行數 決定文本域高度
cols 指定列數 決定文本域寬度
1.5 select
① 選擇框 下拉框 單選框
② 屬性
name 指定名字
multiple 設置為多選
1.6 option
① 定義select中的的選項
② 屬性
value 指定真正的值
selected 默認值
1.7 optgroup
① 給option分組 不常用
1.8 fieldset 套在form的外部 添加邊框 不常用
1.9 legend 在邊框定義form的標題 不常用
1.20 input select textarea button 稱作表單控件元素
1.21 通用屬性 所有的表單控件元素都具有屬性 disabled enabled(默認)
2. form表單input中type類型
text 文本框 value設置默認值
password 密碼框 value設置默認值
radio 單選框 所有的redio name相同才能單選 value設置真正提交的值 默認的按鈕可以設置checked
checkbox 復選框 value設置真正提交的值 設置默認添加checked屬性
image 提交按鈕，按鈕樣式來自圖片 配合src屬性
submit 提交按鈕， value指定按鈕上的文字
reset 重置按鈕 value指定按鈕上的文字
button button按鈕 value指定按鈕上的文字
file 上傳框
hidden 隱藏域 name value
3. label標簽
用來嵌套input， 點擊label嵌套的任何元素都可以激活label內的input
屬性 for 指定 input的id
語義標簽
<header> 定義了文檔的頭部區域
<nav> 定義運行中的進度（進程）。
<article> 定義頁面獨立的內容區域。
<figure> 規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption> 定義 <figure> 元素的標題
<aside> 定義頁面的側邊欄內容。
<section> 定義文檔中的節（section、區段）。
<footer> 定義 section 或 document 的頁腳。
<address> 定義文檔作者或擁有者的聯系信息
<bdi> 允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command> 定義命令按鈕，比如單選按鈕、復選框或按鈕
<details> 用于描述文檔或文檔某個部分的細節
<summary> 標簽包含 details 元素的標題
<dialog> 定義對話框，比如提示框
dt
dd
<mark> 定義帶有記號的文本。
<meter> 定義度量衡。僅用于已知最大和最小值的度量。
<progress> 定義任何類型的任務的進度。
<ruby> 定義 ruby 注釋（中文注音或字符）。
<rt> 定義字符（中文注音或字符）的解釋或發音。
<rp> 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。
<time> 定義日期或時間。
<wbr> 規定在文本中的何處適合添加換行符。
CSS基礎與規范知識
1. CSS的定義
Cascading Style Sheets 層疊樣式表（級聯樣式表）
2. CSS的作用
定義網頁外觀，如字體、背景、顏色等
3. CSS特點
① 精確的定位 準確的控制頁面的任何元素
② 精細的控制 可以做到像素級別的調整
③ 樣式與內容的分離 便于維護，便于重用
4. 發展歷程
① CSS1 作為一項W3C推薦，CSS1發布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。
② CSS2 作為一項 W3C 推薦，CSS2發布于 1999年1月11日。CSS2添加了對媒介（打印機和聽覺設備）和可下載字體的支持。
③ CSS3 CSS3 計劃將 CSS 劃分為更小的模塊。2001年至今 HTML5+CSS3
CSS選擇器
HTML tag
Class
包含選擇器：div span a
ID
組合選擇 div,span,a
任意選擇器（通配符選擇器）*
關系選擇器
包含選擇符
子選擇符
相鄰選擇符
兄弟選擇符
屬性選擇器
偽類選擇器
偽對象選擇器
CSS3屬性
尺寸
邊框
背景
內補白
外補白
布局
定位
字體
文本
列表
表格
用戶界面
多欄
2D變換
過渡
動畫
Photoshop網頁設計基礎
I設計介紹
photoshop安裝與設置
位圖與矢量圖
網頁常用圖片格式
圖像大小與分辨率
選區創建和編輯
選區的創建
選區工具M
套鎖工具L
快速選區工具W和魔術棒W
鋼筆選區
創建矢量路徑
錨點操作
鋼筆工具
形狀轉選區ctrl+Enter
選區的編輯
選區的存儲
應用輔助功能
使用標尺ctrl+R
設置網格：視圖>顯示>網格ctrl+'
應用變換功能
選擇>可變換選區ctrl＋T
縮放
旋轉
扭曲
透視
變形
水平翻轉
垂直翻轉
應用內容識別比例功能
操控變形
裁剪圖像
裁剪工具
基礎繪畫
了解繪畫和繪畫修飾工具
畫筆
顏色替換
涂抹工具
繪畫的基本技巧
繪制直線,按住shift
繪制曲線
定義顏色
使用拾色器
漸變工具
填充前景色：alt＋delete
填充背景色：control＋delete
為圖像填充顏色shift+f5
圖形、路徑計算
網頁布局規范
Web設計規范
banner設計
網頁柵格系統
網頁構成
命名規范
導航設計
版式設計
網頁配色
Photoshop網頁切圖
網頁切圖及切圖常見問題
精靈圖片技術
專題頁設計
W3C盒子模型
div+css網頁布局
HTML5兼容性處理
使用 HTML5布局元素的布局
Media Query響應式布局
原生響應式布局
媒體查詢+尺寸屬性：百分比，max-width,max-height,min-width,min-height
--------------------------------------------------分割符---------------------------------------------------------------------------
可實現效果
1、表格制作個人簡歷
2、使用表單制作注冊頁面
3、div+css基本網頁布局
4、PS網頁設計
5、精靈圖片技術
6、語義化標簽布局
7、智能表單驗證
8、多媒體播放
9、css3:圓角邊框、邊框九宮格特效、多圖背景、動畫、漸變和倒影、多列屬性布局、服務器端字體
10、響應式網頁實現
--------------------------------------------------分割符---------------------------------------------------------------------------
第二階段：前端核心技術：Javascript
主要內容：
1、Javascript
2、Ajax
3、JQuery
4、JS高級特效
--------------------------------------------------分割符---------------------------------------------------------------------------
詳細內容：
JavaScript 腳本語言
什么是JavaScript？
1. JavaScript 是一種客戶端腳本語言（腳本語言是一種輕量級的編程語言）。
2. JavaScript 通常被直接嵌入 HTML 頁面。
3. JavaScript 是一種解釋性語言（就是說，代碼執行不進行預編譯）。
特點：
1. 弱類型
2. 基于對象。(因為面向對象需要具有封裝、繼承、多態的特征)
JavaScript語言中包含三個核心：ECMAScript基本語法、DOM、BOM
JavaScript是基于對象的腳本語言。
在HTML中如何使用JavaScript
1. 使用<script></script>標簽：
屬性：
charset（可選）字符集設置、
defer（可選執行順序）值：defer、
language(已廢除)、
src（可選）使用外部的js腳本文件
type(必選)類型：值：text/javascript
<script type="text/javascript">
<!--
javaScript語言
//-->
</script>
2. 在html標簽的事件中，超級鏈接里。
<button onclick="javaScript語言"></button>
<a href="javascript：alert('aa');alert('bb')">點擊</a>
3. 外部導入方式（推薦）：
<script type="text/javascript" src="my.js"></script>
JavaScript的語法：
1.區分大小寫：變量名、函數名、運算符以及其他一切東西都是區分大小寫的。
2.他和php一樣屬于弱類型語言。
3.每行結尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(推薦))
4.腳本注釋：
// 單行注釋
/* 多行注釋 */
5.括號表示代碼塊:{}
6.變量的定義：使用var關鍵字來聲明。
變量的命名規范是：字母數字，$符和下劃線構成，但是不可以以數字開始。
變量名不可以使用關鍵字.
typeof函數獲取一個變量的類型：
7.JavaScript的數據類型：
undefined 類型
null 類型（對象）
boolean 類型
number 類型
object引用類型
8. 類型轉換：
JavaScript的運算符
1. 一元運算符
delete：用于刪除對象中屬性的 如：delete o.name; //刪除o對象中的name屬性
void： void 運算符對任何值返回 undefined。沒有返回值的函數真正返回的都是 undefined。
++ --
一元加法和一元減法
2. 位運算符
位運算 NOT ~
位運算 AND &
位運算 OR |
位運算 XOR ^ (不同為1，相同則為0)
左移運算 <<
右移運算 >>
3. 邏輯運算符
邏輯 NOT ! 運算符 非
邏輯 AND && 運算符 與
邏輯 OR || 運算符 或
4. 乘性運算符：*（ 乘） /(除) %（取模）求余
5. 加性運算符： + -
*其中+號具有兩重意思：字串連接和數值求和。
就是加號”+“兩側都是數值則求和，否則做字串連接
6. 關系運算符 > >= < <=
7. 等性運算符 == === != !==
8. 條件運算符 ? : (三元運算符)
9. 賦值運算符 = += -= *= /= %= >>= <<=
10 逗號運算符
用逗號運算符可以在一條語句中執行多個運算。
var iNum1=1, iNum2=2, iNum3=3;
javaScript（語句流程控制）
1. 判斷語句 if語句； if... else ... if ... else if ... else...
2. 多分支語句： switch（）{。 case ：。。。。}
switch (i) {
case 20: alert("20");
break;
case 30: alert("30");
break;
case 40: alert("40");
break;
default: alert("other");
}
3. 循環語句（迭代語句）
for：
while
do...while
*for-in 語句: 語句是嚴格的迭代語句，用于枚舉對象的屬性。
var a = [10,20,30,40,50];
//迭代的是數組的下標。
for(i in a){
document.write(a[i]);
}
//輸出： 1020304050
4. break 和 continue 語句對循環中的代碼執行提供了更嚴格的控制。
5. *with 語句用于設置代碼在特定對象中的作用域。
//擴充知識：
1. 在網頁文檔中獲取一個節點對象（HTML標簽）
document.getElementById("mid"); //獲取標簽id屬性值為mid的節點對象
2. 定時相關函數：
setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時執行指定函數
clearTimeout(iTimeoutID) -- 取消上面的單次定時
setInterval(vCode, iMilliSeconds [, sLanguage]) --無限次定時執行指定函數
clearInterval(iIntervalID)-- 取消上面的多次定時
一、JavaScript的函數：
標準格式： function 函數名（[參數列表..]）{
函數體。。。
[return 返回值;]
}
JavaScript三種定義函數方法：
*第一種是使用function語句定義函數
如上面格式
第二種是使用Function()構造函數來定義函數（不常用）
var 函數名 = new Function(“參數1”，”參數2”，”參數3”……”函數體”);
如：
var 函數名 = new Function(”x”,”y”,”var z=x+y;return z;”);
*第三種是在表達式中定義函數
var 函數名 = function(參數1，參數2，…){函數體};
//例如：
//定義
var add = function(a,b){
return a+b;
}
//調用函數
document.write(add(50,20));
arguments 對象
在函數代碼中，使用特殊對象 arguments，開發者無需明確指出參數名，就能訪問它們。
例如，在函數 sayHi() 中，第一個參數是 message。用 arguments[0]
也可以訪問這個值，即第一個參數的值（第一個參數位于位置 0，
第二個參數位于位置 1，依此類推）。
關于變量和參數問題：
函數外面定義的變量是全局變量，函數內可以直接使用。
在函數內部沒有使用var定義的=變量則為全局變量，
*在函數內使用var關鍵字定義的變量是局部變量，即出了函數外邊無法獲取。
js函數定義的參數沒有默認值（目前只有最新的火狐瀏覽器支持）
二、系統中常用的內置函數：
escape() //字串編碼
unescape() //字串反編碼
*eval() //將參數字符串作為腳本代碼來執行。
*isNaN() // is not a number (不是一個數值)
*parseInt()
*parseFloat()
三、JavaScript的對象的定義和使用
1.使用構造函數創建內置對象
var myObject = new Object();
myObject.name = “lijie”;
myObject.age = 20;
myObject.say = function(){...}
2.直接創建自定義對象
var 對象名 = {屬性名1：屬性值，屬性名2：屬性值2，…….}
*3.使用自定義構造函數創建對象
function pen(name,color,price){
//對象的name屬性
this.name = name;
//對象的color屬性
this.color = color;
//對象的piece屬性
this.price = price;
//對象的say方法
this.say = function(){};
}
var pen = new pen(“鉛筆”,”紅色”,20);
pen.say();
一、for…in語句
----------------------------------------
for(var i in window){
document.write(i+”----”+window[i]);
}
這種語句可以遍歷對象中的所有屬性或數組中的所有元素。
二、with語句
--------------------------------------------
如果使用with語句，就可以簡化對象屬性調用的層次。
document.write(‘test1’);
document.write(‘test2’);
document.write(‘test3’);
可以使用with來簡化：
with(document){
write(‘test1’);
write(‘test2’);
write(‘test3’);
}
三、JavaScript內置對象
* Array（數組）
var a= new Array(); //創建一個空數組
a = new Array(10); //創建一個數組單元為10個的數組。
a = new Array(10,20,30);//創建一個指定數組單元的數組。
a=['a','b','c','d']; //快捷定義數組
常用屬性：
length--獲取長度。
常用方法：
toString() 把數組轉換為字符串，并返回結果。
sort() 對數組的元素進行排序
join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
pop() 刪除并返回數組的最后一個元素
push() 向數組的末尾添加一個或更多元素，并返回新的長度。
* Boolean 布爾值包裝類對象
方法：toSource() 返回該對象的源代碼。
toString() 把邏輯值轉換為字符串，并返回結果。
valueOf() 返回 Boolean 對象的原始值。
* Date
var dd = new Date();
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth() 從 Date 對象返回月份 (0 ~ 11)。
getFullYear() 從 Date 對象以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 對象的小時 (0 ~ 23)。
getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
同上還有很多set方法用來設置。
* Math 對象用于執行數學任務。方法是靜態的。
abs(x) 返回數的絕對值。
ceil(x) 對數進行上舍入。
floor(x) 對數進行下舍入。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四舍五入為最接近的整數。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
* Number
toString();
toFixed 把數字轉換為字符串，結果的小數點后有指定位數的數字。
* String 子串處理對象
anchor() 創建 HTML 錨。
*charAt() 返回在指定位置的字符。
charCodeAt()返回在指定的位置的字符的 Unicode 編碼。
*indexOf() 檢索字符串。
*lastIndexOf() 從后向前搜索字符串。
match() 找到一個或多個正在表達式的匹配。
*replace() 替換與正則表達式匹配的子串。
search() 檢索與正則表達式相匹配的值。
slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分。
split() 把字符串分割為字符串數組。
substr() 從起始索引號提取字符串中指定數目的字符。
*substring() 提取字符串中兩個指定的索引號之間的字符。
toLocaleLowerCase() 把字符串轉換為小寫。
toLocaleUpperCase() 把字符串轉換為大寫。
*toLowerCase() 把字符串轉換為小寫。
*toUpperCase() 把字符串轉換為大寫。
* RegExp
exec()正則匹配
test()
match()
* Global
escape(string) -- 可對字符串進行編碼
unescape(string) -- 函數可對通過 escape() 編碼的字符串進行解碼。
encodeURI(URIstring) -- 函數可把字符串作為 URI 進行編碼。
decodeURI(URIstring) -- 函數可對 encodeURI() 函數編碼過的 URI 進行解碼。
*eval(string) -- 函數可計算某個字符串，并執行其中的的 JavaScript 代碼。
getClass(javaobj) -- 函數可返回一個 JavaObject 的 JavaClass。
*isNaN(x) -- 函數用于檢查其參數是否是非數字值。
Number(object) --函數把對象的值轉換為數字。
*parseFloat(string) -- 函數可解析一個字符串，并返回一個浮點數。
*parseInt(string, radix)
事件處理
一、事件源: 任何一個HTML元素（節點） body, div , button p, a, h1 .......
二、事件: 你的操作
鼠標:
* click 單擊
dblclick 雙擊
contextmenu (在body) 文本菜單（鼠標右鍵使用）
要想屏蔽鼠標右鍵使用return false
window.document.oncontextmenu=function(ent){...}
* mouseover 放上(移入)
* mouseout 離開（移出）
mousedown 按下
mouseup 抬起
* mousemove 移動
鍵盤：
keypress 鍵盤事件
keydown 按下
文檔：(主要使用在body標簽中)
* load 加載
unload 關閉(為了兼容可使用下面函數)
beforeunload 關閉之前
表單：
* focus 焦點
* blur 失去焦點
* submit 提交事件
* change 改變（如下拉框選擇事件）
其它：
* scroll 滾動事件(常用延遲加載、瀑布流技術)
window.onscroll=function(){
document.documentElement.scrollTop;//獲取滾動條的上距離
document.documentElement.scrollLeft;//滾動條的左距離
}
selectd 事件
。。。。
三、事件處理程序
使用一個匿名或回調函數
有三種方法加事件
第一種：
格式： <tag on事件="事件處理程序" />
*第二種：
<script>
對象.on事件=事件處理程序
</script>
第三種：(火狐不兼容)
<script for="事件源ID" event="on事件">事件處理程序</script>
事件對象：
屬性：
1. srcElement
2. keyCode 鍵盤值
事件 event window.event
1. srcElement 代表事件源對象
2. keyCode 事件發生時的鍵盤碼 keypress , keydown keyup
3. clientX, clientY 坐標位置
4. screenX, screenY
5. returnValue
6. cancelBubble;
//為頁面添加鼠標右點擊事件
window.document.oncontextmenu=function(ent){
//兼容IE和火狐瀏覽器兼容
var event=ent || window.event;
//獲取事件坐標位置
var x=event.clientX;
var y=event.clientY;
...
}
一、BOM
1. window對象
常用的屬性：
*document ：對 Document 對象的只讀引用
*history ：對 History 對象的只讀引用。
*location：用于窗口或框架的 Location 對象
Navigator： 對 Navigator 對象的只讀引用
*parent： 返回父窗口。
length: 設置或返回窗口中的框架數量。
Screen: 對 Screen 對象的只讀引用
status: 設置窗口狀態欄的文本。
top: 返回最頂層的先輩窗口。
常用方法：
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
close() 關閉瀏覽器窗口。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
scrollTo() 把內容滾動到指定的坐標。
setTimeout() 在指定的毫秒數后調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
2. Navigator 對象
Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。
常用屬性：
with(document) {
write ("你的瀏覽器信息：<ul>");
write ("<li>代碼："+navigator.appCodeName+"</li>");
write ("<li>名稱："+navigator.appName+"</li>");
write ("<li>版本："+navigator.appVersion+"</li>");
write ("<li>語言："+navigator.language+"</li>");
write ("<li>編譯平臺："+navigator.platform+"</li>");
write ("<li>用戶表頭："+navigator.userAgent+"</li>");
write ("</ul>");
}
3. Screen 對象包含有關客戶端顯示屏幕的信息。
常用屬性：
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
參考了解其他屬性信息獲取方式
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
4. History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
5. Location 對象包含有關當前 URL 的信息。
講解DOM
一、基本概念
HTML DOM 定義了訪問和操作HTML文檔的標準方法。
HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
DOM 被分為不同的部分：
1.Core DOM
定義了一套標準的針對任何結構化文檔的對象
2.XML DOM
定義了一套標準的針對 XML 文檔的對象
3.HTML DOM
定義了一套標準的針對 HTML 文檔的對象。
節點：根據 DOM，HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
>整個文檔是一個文檔節點
>每個 HTML 標簽是一個元素節點
>包含在 HTML 元素中的文本是文本節點
>每一個 HTML 屬性是一個屬性節點
>注釋屬于注釋節點
節點彼此間都存在關系。
>除文檔節點之外的每個節點都有父節點。
>大部分元素節點都有子節點。
>當節點分享同一個父節點時，它們就是同輩（同級節點）。
>節點也可以擁有后代，后代指某個節點的所有子節點，或者這些子節點的子節點
>節點也可以擁有先輩。先輩是某個節點的父節點，或者父節點的父節點
查找并訪問節點
你可通過若干種方法來查找您希望操作的元素：
>通過使用 getElementById() 和 getElementsByTagName() 方法
>通過使用一個元素節點的 parentNode、firstChild 以及 lastChild childNodes屬性
節點信息
每個節點都擁有包含著關于節點某些信息的屬性。這些屬性是：
nodeName（節點名稱）
nodeValue（節點值）
nodeType（節點類型）
nodeName 屬性含有某個節點的名稱。
元素節點的 nodeName 是標簽名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
二、HTML DOM 對象參考
Document: 代表整個 HTML 文檔，可被用來訪問頁面中的所有元素
常用集合屬性：forms
Anchor : 代表 <a> 元素
Area : 代表圖像映射中的 <area> 元素
Base : 代表 <base> 元素
Body : 代表 <body> 元素
Button : 代表 <button> 元素
Event : 代表某個事件的狀態
Form : 代表 <form> 元素
Frame : 代表 <frame> 元素
Frameset: 代表 <frameset> 元素
Iframe : 代表 <iframe> 元素
Image : 代表 <img> 元素
Input button : 代表 HTML 表單中的一個按鈕
Input checkbox : 代表 HTML 表單中的復選框
Input file : 代表 HTML 表單中的文件上傳
Input hidden : 代表 HTML 表單中的隱藏域
Input password : 代表 HTML 表單中的密碼域
Input radio : 代表 HTML 表單中的單選按鈕
Input reset : 代表 HTML 表單中的重置按鈕
Input submit : 代表 HTML 表單中的確認按鈕
Input text : 代表 HTML 表單中的文本輸入域（文本框）
Link : 代表 <link> 元素
Meta : 代表 <meta> 元素
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨的樣式聲明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
AJAX
var xmlhttp;
1. 創建請求對象
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 設置回調函數（監聽）
xmlhttp.onreadystatechange=函數名；
或
xmlhttp.onreadystatechange=function(){
函數體。。。
}
3. 初始化：
xmlhttp.open("GET",url,true);
4. 發送：
xmlhttp.send();
其中：xmlhttp請求對象：
**屬性：
*readyState //請求狀態：0,1,2,3,4
*responseText//響應內容
responseXML //xml響應對象
*status //瀏覽器響應狀態：200正常， 404 請求地址不存在 ,,
statusText //狀態內容
*onreadystatechange //回調函數屬性
方法：
abort() //取消當前響應，關閉連接并且結束任何未決的網絡活動。
getAllResponseHeaders() //把 HTTP 響應頭部作為未解析的字符串返回。
getResponseHeader() //返回指定的 HTTP 響應頭部的值
*open() //初始化 HTTP 請求參數
*send() //發送 HTTP 請求，使用傳遞給 open() 方法的參數
*setRequestHeader() //向一個打開但未發送的請求設置或添加一個 HTTP 請求。
自定義Ajax實例使用
jQuery的基本語法
對象的訪問
each()
size()
length
selector
context
get()
index()
jQuery 屬性操作
屬性
attr
removeAttr
prop
removeProp
CSS
addClass
removeClass
toggleClass
HTML代碼/文本/值
html()
text()
val()
基礎知識
JQuery簡介
JQuery 安裝
JQuery語法
jQuery CSS 操作
css:css()
位置
offset()
position()
scrollTop()
scrollLeft()
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeifht()
outerWIdth()
jQuery 選擇器
基本
層級
偽類
內容
可見性
屬性
子元素
表單
表單對象屬性
jQuery 篩選
過濾
查找
串聯
jQuery HTML文檔處理
內部插入
外部插入
包裹
替換
刪除
復制
jQuery 事件
頁面載入
事件處理
事件委派
事件切換
事件
jQuery效果
jQuery 隱藏顯示
jQuery 淡入淡出
jQuery 滑動
jQuery 動畫
jQuery停止動畫
jQuery Callback
Jquery chaining
jQuery Ajax
jQuery Ajax簡介
jQuery load()方法
jQuery get()/post()方法
jQuery 其他
jQuery noConflict()方法
jQuery JSONP
數組和對象操作
函數操作
測試操作
字符串操作
瀏覽器及特性檢測
URL
數據緩存
隊列機制
jQuery 插件
插件使用
jQuery 自定義插件方法
--------------------------------------------------分割符---------------------------------------------------------------------------
可實現效果
1、刷新改背景
2、獲取和設置時間
3、從URL中獲取文件名
4、簡單的計算器
5、滾動類效果
6、自定義菜單
7、下拉菜單
8、手風琴菜單
9、彈出層
10、瀑布流布局，滾動事件
11、選項卡開發
12、幻燈播放
13、拖拽效果
14、淘寶商品的放大效果
15、登錄注冊驗證
16、首頁多特效合成
17、后臺效果制作
18、瀑布流
19、點名器
20、抽獎
--------------------------------------------------分割符---------------------------------------------------------------------------
第三個階段：HTML5新特性
主要內容：
1、視頻/音頻
2、地理定位
3、Web 存儲
4、應用緩存
5、拖放
6、文件讀取
7、Web Workers
8、畫布 SVG
9、CSS預處理
10、BootStrap 響應式框架
--------------------------------------------------分割符---------------------------------------------------------------------------
詳細內容：
HTML5 多媒體
audio/video API操作
地理位置信息獲取
geolocation API操作
地球間兩點距離計算方法
地圖API調用
HTML5離線緩存
cache manifest規范及格式
HTML5本地存儲
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
拖放（Drag 和 drop）
FileReader
瀏覽器多線程
畫布 SVG 動畫實現
SASS使用
SASS的基本語法
Bootstrap配置
使用Bootstrap布局頁面
Bootstrap全局樣式
柵格系統原理
Bootstrap各種常用組件
Bootstrap常用插件應用
--------------------------------------------------分割符---------------------------------------------------------------------------
可實現效果：
制作屬于自己的音/視頻播放器
查看經緯度
獲取公交路線
顯示路線導航
離線應用
多線程優化用戶體驗
拖放歌曲列表
圖片拖放顯示
拖放照片墻
繪畫五角星
繪制時鐘
勻速、變速、圓周、曲線等物理運動
碰撞原理與實現
九大行星圍繞運動
鼠標交互特效
使用SASS制作動態CSS程序
使用UI框架實現響應式布局
--------------------------------------------------分割符---------------------------------------------------------------------------
第四階段：MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開發
主要內容：
1、Node.js
2、MongoDB
3、Express
4、AngularJS
5、WEB APP制作
--------------------------------------------------分割符---------------------------------------------------------------------------
詳細內容:
NodeJS與瀏覽器js的區別
NodeJS基礎
NodeJS安裝
模塊
require
exports
module
NPM
代碼的組織和部署
模塊路徑解析規則
包（package）
index.js
package.json
文件操作
Buffer（數據塊）
Stream（數據流）
File System（文件系統）
Path（路徑）
網絡操作
HTTP
HTTPS
URL
Query String
Zlib
Net
NPM/Bower依賴管理工具
Zepto.js庫
NodeJS文件操作
使用NodeJS搭建Web服務器
使用NodeJS搭建Socket服務器
數據倉庫：
SQL:結構化查詢語言(Structured Query Language)
常見的SQL:MySQL Oracle MariaDB PostgreSQL等SQL
常見的NoSQL：MongoDB Redis Memcache
MongoDB：
C++語言編寫，基于分布式文件存儲的開源數據庫系統
BSON:類JSON對象（Binary JSON，二進制形式的存儲格式）
{"username":"zhangsan","age":20,"sex":"男"}
由"鍵值對"組成
結構劃分：
數據庫(database) db
集合(collection)
文檔(document)
字段(field)
安裝MongoDB
1.針對庫的操作
查看所有庫
創建并進入數據庫
查看當前庫
刪除數據庫
2.集合操作
查看當前集合
3.針對文檔操作
插入數據
修改數據：
刪除
查詢數據
Express框架快速構建WEB應用程序
Express簡介+MVC簡介
Express路由模塊
模板引擎 jade ejs handlebars
nosql數據庫MogoDB管理數據
使用mongoose操作MongoDB
Angular JS介紹
Angular JS 表達式
Angular JS簡介
Angular JS指令
Angular JS模型
Angular JS Scope(作用域)
Angular JS 控制器
Angular JS 過濾器
Angular JS Http
Angular JS 表格
Angular JS SQL
Angular JS HTML DOM
Angular JS 事件
Angular JS模塊
Angular JS表單
Angular JS輸入驗證
Angular JS Bootstrap應用
Angular JS 包含
Angular JS 應用
App介紹
WebApp/NativeApp/HybirdApp簡介
Cordova線下打包App
移動應用開發平臺云端打包App
--------------------------------------------------分割符---------------------------------------------------------------------------
可實現以下效果
使用Nodejs搭建
應用程序的服務端
使用Socket長連接實時網絡通信技術制作聊天室
帶有前后臺的簡單博客系統
使用AngularJS打造單頁面購物車應用
打包手機端應用
--------------------------------------------------分割符---------------------------------------------------------------------------
特級課：微信開發
主要內容：微信開發
1、微信接口開發
2、微信應用開發
3、微信UI框架
4、原型設計
5、面試題講解
--------------------------------------------------分割符---------------------------------------------------------------------------
詳細內容
微信JSSDK使用
分享接口
圖像接口
音頻接口
智能接口
設備信息
地理位置
界面操作
WEUI框架
原型設計
用戶體驗設計
面試題
--------------------------------------------------分割符---------------------------------------------------------------------------
可實現但不限于以下效果
微信測智商
測測上輩子是誰
測運勢
留言板
照片分享發送
語音識別
位置顯示
WEUI框架制作微信原生樣式界面
小編已盡力排版，如小伙伴們覺得依然較亂，請留言
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
