目 錄
目錄

第1章 網站前端開發要掌握的技術
1.1 制作我的個網頁
1.2 認識HTML標簽
1.3 認識HTML文件基本結構
1.4 認識＜head＞標簽
1.5 了解HTML的代碼注釋
1.6 案例拓展
第2章 認識HTML標簽
2.1 語義化，讓你的網頁更好地被搜索引擎理解
2.2 ＜h1＞～＜h6＞標簽
2.3 ＜p＞和＜br＞標簽
2.4 ＜img＞標簽
2.5 ＜a＞標簽
2.6 ＜span＞標簽
2.7 ＜strong＞和＜em＞標簽
2.8 ＜ul＞和＜li＞標簽
2.9 ＜ol＞和＜li＞標簽
2.10 ＜dl＞標簽
2.11 ＜div＞標簽
2.12 ＜input＞標簽
2.13 ＜input＞和＜datalist＞標簽
2.14 ＜input＞和＜label＞標簽
2.15 其他標簽彙總
2.16 HTML5新標簽
第3章 認識CSS樣式
3.1 CSS樣式的語法格式
3.2 CSS注釋代碼
3.3 CSS的三種樣式
3.4 關於選擇器
第4章 CSS文字排版
4.1 部分CSS屬性說明
4.2 CSS布局模型
4.3 流動模型
4.4 浮動模型
4.5 層模型
4.6素素
4.7 隱性改變display類型
第5章 居中設置
5.1 水平居中&mdash素水平居中
5.2 文字居中&mdash素水平居中
5.3 固定高度素
5.4 文字垂直居中—單行內聯 (inlin素垂直居中
5.5 未知高度素
5.6素水平垂直居中
第6章 彈性布局
6.1 什麼是彈性布局
6.2 作用在父容器上的6個彈性布局屬性
6.3 作素上的6個彈性布局屬性
6.4 關於彈性布局的總結
第7章 Bootstrap
7.1 什麼是柵格繫統
7.2 Bootstrap包含的內容
7.3 col-md-x
7.4 Bootstrap網格繫統（Grid System）的工作原理
7.5 柵格參數
第8章 JavaScript基礎
8.1 JavaScript 腳本的位置
8.2 三個彈框
8.3 創建一個簡單的變量
8.4 基礎函數
8.5 DOM基礎
8.6 DOM事件處理
8.7 綁定事件
8.8 正則表達式詳解
8.9 字符串的方法
8.10 正則表達式語法基礎
8.11 超時調用
8.12 清除超時調用
8.13 間歇調用
8.14 清除間歇調用
第9章 網易雲課堂
9.1 頁面實現
9.2 案例總結
9.3 案例拓展
第10章 水晶石頁面的實現
10.1 頁面實現
10.2 案例總結
10.3 案例拓展
第11章 百度網盤頁面的實現
11.1 頁面實現
11.2 案例總結
11.3 案例拓展
第12章 小米網頁的實現
12.1 基礎頁面準備
12.2 案例總結
12.3 案例拓展
第13章 CSS3圖片效果切換的實現
13.1 基礎頁面準備
13.2 HTML部分代碼實現
13.3 CSS代碼實現
13.4 案例總結
13.5 案例拓展
第14章 彈性布局綜合案例實現
14.1 案例實現
14.2 案例總結
14.3 案例拓展
第15章 注冊賬戶信息頁面的實現
15.1 基礎頁面準備
15.2 HTML代碼實現
15.3 JavaScript部分
15.4 案例總結
15.5 案例拓展
第16章 實驗場實現
16.1 index頁面代碼實現
16.2 實驗場1代碼實現
16.3 實驗場2代碼實現
16.4 案例總結
16.5 案例拓展
第17章 圖片輪播效果的實現
17.1 基礎頁面的實現準備
17.2 案例總結
17.3 案例拓展

隨著互聯網行業的發展，在大中型互聯網公司，網站開發崗位中前端開發工程師具有較大規模的招聘需求。本書從高等職業教育的特點出發，以工作過程繫統化為原則強調網頁布局、樣式設置和前端交互等基本能力的培養。
本教材在體例上做出了大膽嘗試，拋棄了傳統的按部就班逐個介紹對像、屬性、方法的教科書式的案例模式，轉而采用了基礎知識 案例驅動的雙軌模式。本教材共分為HTML基礎知識（包含的HTML5前沿經典應用）、CSS基礎知識（包含的CSS3應用）、JavaScript基礎知識和綜合案例四大部分，高度濃縮了基礎知識部分，精心安排了大量前沿和綜合類實例，以基礎知識鋪路，以前沿案例驅動，以綜合案例提升，借此引領學生邁入網站前端開發的大門。本教材既培養學生掌握扎實的Web基礎知識，也培養學生形成良好的Web設計素養。
本教材既可作為高等職業院校計算機各專業的“Web開發”課程的教材，也可供中職及成人教育相關專業使用或參考。
本教材內容與特點：
（1）本教材采用“基礎知識 案例驅動”的雙軌模式進行編寫。本教材先以基礎知識的鋪墊為輔，穿插小的案例用以鞏固知識點，再以實戰案例的介紹為主，每個例子都來自企業的具體應用，具有較強的實用價值。
（2）本教材提煉了各個案例所對應的學習內容，以“總結”的形式標注在各個章節中,以便於讓學生更快地掌握核心知識點。此外，在“案例拓展”中也囊括了已講解的知識和一些關於網站前端開發的外延知識，用於擴展學生的視野。
（3）針對在實際操作中可能遇到的各種問題，本教材總結了相應的注意事項和應對策略，並在各個章節中進行了詳細標注（如標注為“注意”的內容部分），以使得學生能夠在學習中盡量少走彎路，避免不必要的錯誤。
（4）本教材中的所有基礎知識和具體案例都按由易到難、由淺入深、由零到整的規則進行排布，適用於職業院校開展網頁基礎方面的課程。
由於編者水平有限，編寫時間倉促，書中難免有疏漏和不妥之處，殷切希望廣大讀者批評指正，以便後期修訂再版，並致以誠摯的謝意！

編者
2020年8月