Web前端開發(fā)案例教程 HTML5+CSS3+JavaScript+jQuery

1.1　HTML發(fā)展歷史1 \n
1.2　CSS發(fā)展歷史2 \n
1.3　JavaScript發(fā)展歷史2 \n
1.4　HTML常用開發(fā)工具3 \n
1.5　Web項(xiàng)目開發(fā)入門4 \n
1.5.1　使用HBuilder新建項(xiàng)目4 \n
1.5.2　Web項(xiàng)目基本結(jié)構(gòu)5 \n
1.5.3　新建一個(gè)HTML文件5 \n
1.5.4　HTML文檔的基本結(jié)構(gòu)6 \n
1.5.5　HTML的相關(guān)基本定義7 \n
單元總結(jié)7 \n
習(xí)題8 \n
2.1　文本標(biāo)簽9 \n
2.1.1　標(biāo)題標(biāo)簽9 \n
2.1.2　字體標(biāo)簽10 \n
2.1.3　段落標(biāo)簽11 \n
2.1.4　換行標(biāo)簽11 \n
2.1.5　預(yù)格式化標(biāo)簽12 \n
2.1.6　轉(zhuǎn)義字符13 \n
2.1.7　文字修飾標(biāo)簽14 \n
2.1.8　文本標(biāo)簽綜合案例 \n
新聞頁面15 \n
2.2　列表標(biāo)簽16 \n
2.2.1　無序列表16 \n
2.2.2　有序列表17 \n
2.2.3　嵌套列表網(wǎng)站導(dǎo)航欄18 \n
2.3　分隔線標(biāo)簽19 \n
2.4　圖片標(biāo)簽20 \n
2.5　超鏈接標(biāo)簽21 \n
2.5.1　文本鏈接21 \n
2.5.2　書簽鏈接22 \n
2.5.3　圖像鏈接23 \n
2.5.4　Email鏈接25 \n
2.6　多媒體標(biāo)簽 —— Web頁面 \n
音視頻播放26 \n
2.6.1　audio音頻標(biāo)簽 —— \n
音頻播放26 \n
2.6.2　video視頻標(biāo)簽 —— \n
視頻播放27 \n
2.7　標(biāo)簽類型28 \n
2.7.1　行內(nèi)標(biāo)簽28 \n
2.7.2　塊狀標(biāo)簽29 \n
2.7.3　行內(nèi)塊狀標(biāo)簽30 \n
2.7.4　標(biāo)簽顯示模式轉(zhuǎn)換display30 \n
2.8　meta標(biāo)簽31 \n
2.8.1　概述31 \n
2.8.2　屬性31 \n
單元總結(jié)33 \n
習(xí)題33 \n
拓展實(shí)訓(xùn)34 \n
3.1　表格35 \n
3.1.1　表格概念35 \n
3.1.2　表格結(jié)構(gòu)36 \n
3.1.3　表格屬性37 \n
3.1.4　表格綜合案例 —— 電子 \n
圖書目錄38 \n
3.2　表單40 \n
3.2.1　表單概述40 \n
3.2.2　表單控件40 \n
3.2.3　HTML5 input控件新增功能43 \n
3.2.4　HTML5表單控件新增屬性48 \n
3.2.5　表單綜合案例 ——用戶 \n
信息注冊(cè)頁面51 \n
單元總結(jié)53 \n
習(xí)題53 \n
拓展實(shí)訓(xùn)54 \n
4.1　CSS3基本概念55 \n
4.1.1　CSS3的作用55 \n
4.1.2　CSS3基本語法55 \n
4.1.3　CSS3應(yīng)用樣式56 \n
4.1.4　CSS3代碼注釋57 \n
4.2　CSS3基本選擇器57 \n
4.2.1　元素選擇器57 \n
4.2.2　ID選擇器59 \n
4.2.3　類選擇器60 \n
4.2.4　屬性選擇器62 \n
4.2.5　派生選擇器63 \n
4.2.6　偽類選擇器69 \n
4.2.7　偽元素選擇器70 \n
4.3　CSS3字體樣式屬性72 \n
4.3.1　fontsize:字號(hào)大小72 \n
4.3.2　fontfamily:字體73 \n
4.3.3　fontweight:字體粗細(xì)74 \n
4.3.4　fontstyle:字體風(fēng)格74 \n
4.3.5　font:綜合設(shè)置字體樣式74 \n
4.4　CSS3文本屬性74 \n
4.4.1　color：文本顏色74 \n
4.4.2　lineheight：行間距74 \n
4.4.3　textalign：水平對(duì)齊方式74 \n
4.4.4　textindent：首行縮進(jìn)75 \n
4.4.5　textdecoration： \n
文本的裝飾75 \n
4.5　CSS3背景屬性75 \n
4.5.1　backgroundcolor： \n
背景顏色75 \n
4.5.2　backgroundimage： \n
背景圖片75 \n
4.5.3　backgroundrepeat： \n
背景平鋪75 \n
4.5.4　backgroundposition： \n
背景位置76 \n
單元總結(jié)76 \n
習(xí)題77 \n
拓展實(shí)訓(xùn)78 \n
5.1　CSS3盒子模型79 \n
5.1.1　CSS3內(nèi)邊距屬性81 \n
5.1.2　CSS3值復(fù)制82 \n
5.1.3　CSS3外邊距屬性83 \n
5.1.4　CSS3邊框?qū)傩?4 \n
5.1.5　CSS3輪廓屬性86 \n
5.1.6　盒子模型綜合案例 —— 用戶 \n
登錄頁面美化86 \n
5.2　CSS3常見網(wǎng)頁布局實(shí)現(xiàn)88 \n
5.2.1　一列固定寬度且居中型89 \n
5.2.2　兩列左窄右寬型91 \n
5.2.3　通欄平均分布型92 \n
5.3　CSS3浮動(dòng)95 \n
5.3.1　float圖文環(huán)繞95 \n
5.3.2　clear清除浮動(dòng)97 \n
5.3.3　浮動(dòng)綜合案例 —— 網(wǎng)站 \n
導(dǎo)航欄設(shè)計(jì)98 \n
5.4　CSS3定位100 \n
5.4.1　position位置屬性101 \n
5.4.2　定位位置101 \n
5.4.3　static靜態(tài)定位101 \n
5.4.4　relative相對(duì)定位102 \n
5.4.5　absolute絕對(duì)定位　103 \n
5.4.6　fixed固定定位—— 客服區(qū)域103 \n
5.4.7　sticky黏性定位105 \n
5.4.8　子絕父相 —— 輪播控制106 \n
5.4.9　zindex定位層序108 \n
5.4.10　定位綜合案例—— 快捷 \n
導(dǎo)航欄108 \n
5.5　CSS3彈性布局110 \n
5.5.1　flex基本概念110 \n
5.5.2　flex容器的屬性111 \n
5.5.3　item項(xiàng)目的屬性113 \n
5.5.4　彈性布局綜合案例 —— \n
商品陳列115 \n
5.6　CSS3變形與動(dòng)畫116 \n
5.6.1　CSS3變形116 \n
5.6.2　CSS3過渡120 \n
5.6.3　CSS3動(dòng)畫121 \n
單元總結(jié)122 \n
習(xí)題123 \n
拓展實(shí)訓(xùn)124 \n
6.1　JavaScript程序概述125 \n
6.1.1　JavaScript 構(gòu)成125 \n
6.1.2　JavaScript程序編寫126 \n
6.1.3　JavaScript 程序執(zhí)行順序127 \n
6.1.4　JavaScript基本語法128 \n
6.2　變量與運(yùn)算符129 \n
6.2.1　變量129 \n
6.2.2　標(biāo)識(shí)符、關(guān)鍵字和保留字130 \n
6.2.3　數(shù)據(jù)類型132 \n
6.2.4　運(yùn)算符134 \n
6.3　JavaScript數(shù)組139 \n
6.3.1　數(shù)組定義139 \n
6.3.2　數(shù)組元素訪問140 \n
6.3.3　數(shù)組長(zhǎng)度140 \n
6.3.4　數(shù)組操作140 \n
6.4　JavaScript對(duì)象144 \n
6.4.1　對(duì)象定義144 \n
6.4.2　對(duì)象屬性操作144 \n
6.5　程序結(jié)構(gòu)145 \n
6.5.1　分支結(jié)構(gòu)145 \n
6.5.2　循環(huán)結(jié)構(gòu)149 \n
6.6　函數(shù)152 \n
6.6.1　函數(shù)聲明與調(diào)用152 \n
6.6.2　變量的作用域155 \n
6.6.3　程序設(shè)計(jì)綜合案例 —— \n
楊輝三角156 \n
6.7　正則表達(dá)式158 \n
6.7.1　正則表達(dá)式定義158 \n
6.7.2　操作正則表達(dá)式的方法161 \n
6.7.3　正則表達(dá)式綜合案例 —— \n
用戶注冊(cè)信息驗(yàn)證163 \n
單元總結(jié)165 \n
習(xí)題165 \n
拓展實(shí)訓(xùn)165 \n
7.1　對(duì)象模型與彈出框166 \n
7.1.1　文檔對(duì)象模型DOM166 \n
7.1.2　瀏覽器對(duì)象模型BOM167 \n
7.1.3　彈出框168 \n
7.2　元素與節(jié)點(diǎn)170 \n
7.2.1　元素操作170 \n
7.2.2　節(jié)點(diǎn)操作173 \n
7.3　事件處理程序178 \n
7.3