Web前端一站式開(kāi)發(fā)手冊(cè)：HTML5+CSS3+JavaScript

第1章 Web基礎(chǔ)知識(shí) 001
1.1 Web前端開(kāi)發(fā) 002
1.1.1 什么是前端開(kāi)發(fā) 002
1.1.2 前端開(kāi)發(fā)要學(xué)哪些內(nèi)容 002
1.2 Web工作原理 003
1.2.1 因特網(wǎng)與萬(wàn)維網(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)頁(yè) 005
1.2.6 瀏覽器的工作原理 005
1.2.7 網(wǎng)頁(yè)與網(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文件的基本標(biāo)記 008
1.4.1 開(kāi)始標(biāo)簽 009
1.4.2 頭部標(biāo)簽 009
1.4.3 標(biāo)題標(biāo)簽 009
1.4.4 主體標(biāo)簽 010
1.4.5 元信息標(biāo)簽 010
1.4.6 綜合實(shí)戰(zhàn) 制作我的第一個(gè)網(wǎng)頁(yè) 011
課后作業(yè) 簡(jiǎn)單網(wǎng)頁(yè)的制作方法 013

第2章 填充網(wǎng)頁(yè)內(nèi)容 015
2.1 網(wǎng)頁(yè)中文字和段落 016
2.1.1 標(biāo)題文字 016
課堂練習(xí)：制作大小不同的標(biāo)題 016
2.1.2 文字對(duì)齊 017
課堂練習(xí)：使用align設(shè)置對(duì)齊方式 017
2.1.3 文字字體 018
課堂練習(xí)：字體的設(shè)置 018
2.1.4 段落換行 019
課堂練習(xí)：給文字換行 019
2.1.5 字體顏色 020
課堂練習(xí)：給文字設(shè)置色彩 020
2.1.6 文字的上標(biāo)和下標(biāo) 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)頁(yè)中的圖片樣式 024
2.2.1 圖片的格式 024
2.2.2 給網(wǎng)頁(yè)添加圖片 025
課堂練習(xí)：使用img標(biāo)簽 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
綜合實(shí)戰(zhàn) 定義圖片熱區(qū) 030
課后作業(yè) 設(shè)置字體和圖片樣式 032

第3章 表格布局網(wǎng)頁(yè) 034
3.1 創(chuàng)建表格 035
3.1.1 表格的基本構(gòu)成 035
3.1.2 表格的標(biāo)題 035
課堂練習(xí)：制作表格的標(biāo)題 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)文字的對(duì)齊方式 045
課堂練習(xí)：如何設(shè)置行內(nèi)文字的對(duì)齊方式 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í)：將多個(gè)單元格進(jìn)行合并 053
綜合實(shí)戰(zhàn) 利用表格制作簡(jiǎn)單的網(wǎng)頁(yè) 055
課后作業(yè) 制作一張課程表 057

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

第5章 HTML5常用元素 082
5.1 HTML5新特性 083
5.1.1 HTML5的兼容性 083
5.1.2 HTML5的化繁為簡(jiǎn) 083
5.1.3 HTML5的通用訪問(wèn) 084
5.1.4 HTML5標(biāo)準(zhǔn)改進(jìn) 084
5.2 HTML5優(yōu)勢(shì) 084
5.2.1 頁(yè)面的交互性能更強(qiáng)大 085