第1章 Web基礎(chǔ)知識 001
1.1 Web前端開發(fā) 002
1.1.1 什么是前端開發(fā) 002
1.1.2 前端開發(fā)要學(xué)哪些內(nèi)容 002
1.2 Web工作原理 003
1.2.1 因特網(wǎng)與萬維網(wǎng) 003
1.2.2 Web架構(gòu) 003
1.2.3 協(xié)議 004
1.2.4 服務(wù)器 005
1.2.5 什么是網(wǎng)頁 005
1.2.6 瀏覽器的工作原理 005
1.2.7 網(wǎng)頁與網(wǎng)站的關(guān)系 006
1.3 HTML概念與HTML5的聯(lián)系 006
1.3.1 什么是HTML 006
1.3.2 HTML到XHTML 007
1.3.3 HTML5的發(fā)展 008
1.4 HTML文件的基本標記 008
1.4.1 開始標簽 009
1.4.2 頭部標簽 009
1.4.3 標題標簽 009
1.4.4 主體標簽 010
1.4.5 元信息標簽 010
1.4.6 綜合實戰(zhàn) 制作我的第一個網(wǎng)頁 011
課后作業(yè) 簡單網(wǎng)頁的制作方法 013

第2章 填充網(wǎng)頁內(nèi)容 015
2.1 網(wǎng)頁中文字和段落 016
2.1.1 標題文字 016
課堂練習(xí)：制作大小不同的標題 016
2.1.2 文字對齊 017
課堂練習(xí)：使用align設(shè)置對齊方式 017
2.1.3 文字字體 018
課堂練習(xí)：字體的設(shè)置 018
2.1.4 段落換行 019
課堂練習(xí)：給文字換行 019
2.1.5 字體顏色 020
課堂練習(xí)：給文字設(shè)置色彩 020
2.1.6 文字的上標和下標 021
課堂練習(xí)：制作數(shù)學(xué)方程式 021
2.1.7 文字刪除線 021
課堂練習(xí)：刪除線的制作 022
2.1.8 文字不換行 022
課堂練習(xí)：制作文字不換行效果 022
2.1.9 文字加粗 023
課堂練習(xí)：讓文字更加突出 023
2.2 網(wǎng)頁中的圖片樣式 024
2.2.1 圖片的格式 024
2.2.2 給網(wǎng)頁添加圖片 025
課堂練習(xí)：使用img標簽 025
2.2.3 設(shè)置圖片的大小 026
課堂練習(xí)：圖片的大小設(shè)置 026
2.2.4 圖片的邊框顯示 027
課堂練習(xí)：給圖片設(shè)置邊框 027
2.2.5 水平間距 027
課堂練習(xí)：設(shè)置圖片的間距效果 028
2.2.6 提示文字 029
課堂練習(xí)：設(shè)置圖片的提示文字 029
2.2.7 文字替換圖片 029
課堂練習(xí)：設(shè)置圖片的替換文字 030
綜合實戰(zhàn) 定義圖片熱區(qū) 030
課后作業(yè) 設(shè)置字體和圖片樣式 032

第3章 表格布局網(wǎng)頁 034
3.1 創(chuàng)建表格 035
3.1.1 表格的基本構(gòu)成 035
3.1.2 表格的標題 035
課堂練習(xí)：制作表格的標題 035
3.1.3 表格的表頭 037
課堂練習(xí)：制作表格的表頭 037
3.2 設(shè)置表格邊框樣式 038
3.2.1 給表格設(shè)置邊框 038
課堂練習(xí)：設(shè)置表格邊框 038
3.2.2 給表格邊框設(shè)置顏色 039
課堂練習(xí)：設(shè)置表格邊框顏色 040
3.2.3 表格中的單元格間距 041
課堂練習(xí)：設(shè)置表格單元格間距 041
3.2.4 表格中文字與邊框間距 042
課堂練習(xí)：在文字和邊框之間設(shè)置間距 042
3.3 設(shè)置表格行內(nèi)屬性 043
3.3.1 行的背景顏色及大小 043
課堂練習(xí)：設(shè)置行的背景顏色和大小 043
3.3.2 行內(nèi)文字的對齊方式 045
課堂練習(xí)：如何設(shè)置行內(nèi)文字的對齊方式 045
3.4 設(shè)置表格的背景 046
3.4.1 表格背景顏色 047
課堂練習(xí)：表格整體顏色的設(shè)置 047
3.4.2 為表格背景插入圖像 048
課堂練習(xí)：插入表格的背景圖片 048
3.5 設(shè)置單元格的樣式 049
3.5.1 單元格的大小 049
課堂練習(xí)：設(shè)置單元格的大小 049
3.5.2 單元格的背景顏色 051
課堂練習(xí)：設(shè)置單元格的背景顏色 051
3.5.3 單元格的邊框?qū)傩?052
課堂練習(xí)：給單元格邊框設(shè)置屬性 052
3.5.4 合并單元格 053
課堂練習(xí)：將多個單元格進行合并 053
綜合實戰(zhàn) 利用表格制作簡單的網(wǎng)頁 055
課后作業(yè) 制作一張課程表 057

第4章 列表和超鏈接 059
4.1 使用無序列表 060
4.1.1 ul標簽使用方法 060
課堂練習(xí)：制作無序列表 060
4.1.2 type無序列表類型 061
課堂練習(xí)：制作無序列表類型 061
4.2 使用有序列表 063
4.2.1 ol定義有序列表 063
課堂練習(xí)：制作有序列表 063
4.2.2 type有序列表類型 064
課堂練習(xí)：設(shè)置有序列表類型 064
4.2.3 start有序列表的起始值 065
課堂練習(xí)：制作列表的起始值 065
4.2.4 dl定義列表標簽 066
課堂練習(xí)：制作定義列表 066
4.2.5 menu菜單列表 068
課堂練習(xí)：制作菜單列表樣式 069
4.2.6 color設(shè)置列表文字顏色 069
課堂練習(xí)：給列表項目設(shè)置顏色 070
4.3 列表的嵌套 070
4.3.1 定義列表的嵌套 070
課堂練習(xí)：使用嵌套列表制作詩集 071
4.3.2 無序列表和有序列表的嵌套 072
課堂練習(xí)：制作中國歷史朝代出現(xiàn)的順序 072
4.3.3 有序列表之間的嵌套 073
課堂練習(xí)：有序列表的嵌套方法 073
4.4 超鏈接的路徑 075
4.4.1 絕對路徑 075
4.4.2 相對路徑 075
4.5 創(chuàng)建超鏈接 075
4.5.1 超鏈接標簽的屬性 075
4.5.2 內(nèi)部鏈接 076
課堂練習(xí)：制作網(wǎng)頁中的鏈接方法 076
4.5.3 外部鏈接 077
課堂練習(xí)：鏈接到外部網(wǎng)頁 077
綜合實戰(zhàn) 制作網(wǎng)站首頁菜單 078
課后作業(yè) 首頁的二級菜單 080

第5章 HTML5常用元素 082
5.1 HTML5新特性 083
5.1.1 HTML5的兼容性 083
5.1.2 HTML5的化繁為簡 083
5.1.3 HTML5的通用訪問 084
5.1.4 HTML5標準改進 084
5.2 HTML5優(yōu)勢 084
5.2.1 頁面的交互性能更強大 085