《Html5+JavaScript+Css3開(kāi)發(fā)手冊(cè):基礎(chǔ)·案例·應(yīng)用》是“計(jì)算機(jī)科學(xué)與技術(shù)手冊(cè)系列”圖書之一,該系列圖書內(nèi)容全面,以理論聯(lián)系實(shí)際、能學(xué)到并做到為宗旨,以技術(shù)為核心,以案例為輔助,引領(lǐng)讀者全面學(xué)習(xí)基礎(chǔ)技術(shù)、代碼編寫方法和具體應(yīng)用項(xiàng)目,旨在為想要進(jìn)入相應(yīng)領(lǐng)域的技術(shù)人員提供新而全的技術(shù)性內(nèi)容及案例。
本書是一本側(cè)重編程基礎(chǔ)+實(shí)踐的Web前端開(kāi)發(fā)圖書,從基礎(chǔ)、案例、應(yīng)用三個(gè)層次循序漸進(jìn)地介紹了Web前端開(kāi)發(fā)從入門到實(shí)戰(zhàn)所需知識(shí),使讀者在打好基礎(chǔ)的同時(shí)快速提升實(shí)踐能力。本書內(nèi)容充實(shí),給讀者提供了較為豐富全面的技術(shù)支持和案例強(qiáng)化,通過(guò)各種示例將學(xué)習(xí)與應(yīng)用相結(jié)合,打造輕松學(xué)習(xí)、零壓力學(xué)習(xí)的環(huán)境,通過(guò)案例對(duì)所學(xué)知識(shí)進(jìn)行綜合應(yīng)用,通過(guò)開(kāi)發(fā)實(shí)際項(xiàng)目將各個(gè)知識(shí)點(diǎn)應(yīng)用到實(shí)際工作中,幫助讀者實(shí)現(xiàn)學(xué)以致用,快速掌握前端開(kāi)發(fā)的各項(xiàng)技能。
本書提供豐富的資源,包含131個(gè)實(shí)例、10個(gè)案例、2個(gè)項(xiàng)目,力求為讀者打造一本基礎(chǔ)+案例+應(yīng)用一體化的、精彩的前端開(kāi)發(fā)圖書。
本書不僅適合初學(xué)者、編程愛(ài)好者、零基礎(chǔ)的編程自學(xué)者,也可供計(jì)算機(jī)相關(guān)專業(yè)師生、程序開(kāi)發(fā)人員以及程序測(cè)試和維護(hù)人員等閱讀參考。
基礎(chǔ)篇
第1章 HTML基礎(chǔ)
1.1 HTML基礎(chǔ) 2
1.1.1 什么是HTML 2
1.1.2 HTML的發(fā)展歷程 3
1.2 HTML5相關(guān)概念與基本結(jié)構(gòu) 3
1.2.1 HTML5的相關(guān)概念 3
1.2.2 HTML5的基本結(jié)構(gòu) 4
【實(shí)例1.1】運(yùn)用屬性,渲染頁(yè)面效果 6
1.3 編寫第一個(gè)HTML5文件 9
1.3.1 HTML5文件的編寫方法 9
1.3.2 手工編寫頁(yè)面 9
1.3.3 使用可視化軟件制作頁(yè)面 10
第2章 標(biāo)題和段落
2.1 添加標(biāo)題 15
2.1.1 添加各級(jí)標(biāo)題 16
【實(shí)例2.1】巧用標(biāo)題標(biāo)簽,編寫程序員笑話 16
2.1.2 設(shè)置標(biāo)題的對(duì)齊方式 17
【實(shí)例2.2】活用文字居中,推薦商品信息 18
2.2 添加段落 18
2.2.1 段落標(biāo)簽的使用 18
【實(shí)例2.3】巧用段落標(biāo)簽,介紹創(chuàng)意文字 19
2.2.2 段落中的換行標(biāo)簽 19
【實(shí)例2.4】巧用換行,書寫故事 19
2.3 添加文字裝飾效果 20
2.3.1 設(shè)置上標(biāo)與下標(biāo) 20
【實(shí)例2.5】使用上下標(biāo),展示數(shù)學(xué)方程式 21
2.3.2 文字的斜體、下劃線與刪除線 21
【實(shí)例2.6】活用文字裝飾,推薦商品信息 21
2.4 添加水平線 22
【實(shí)例2.7】巧用水平線繪制行表格 22
2.5 綜合案例——二十四節(jié)氣歌 23
2.5.1 分析數(shù)據(jù) 23
2.5.2 實(shí)現(xiàn)過(guò)程 24
2.6 實(shí)戰(zhàn)練習(xí) 24
第3章 圖像和超鏈接
3.1 添加圖像 25
3.1.1 圖像的基本格式 25
3.1.2 添加圖像 26
【實(shí)例3.1】使用
標(biāo)簽實(shí)現(xiàn)五子棋的游戲簡(jiǎn)介 26
3.2 設(shè)置圖像屬性 27
3.2.1 圖像大小與邊框 27
【實(shí)例3.2】改變手機(jī)商品詳情中的圖片大小和邊框 27
3.2.2 替換文本與提示文字 28
【實(shí)例3.3】設(shè)置圖片的提示文字與替換文本 28
3.2.3 圖像間距與對(duì)齊方式 29
【實(shí)例3.4】使用align屬性改變頭像的位置 30
3.3 添加超鏈接 30
3.3.1 添加文本鏈接 30
【實(shí)例3.5】巧用文本鏈接實(shí)現(xiàn)商城導(dǎo)航 31
3.3.2 添加書簽鏈接 31
【實(shí)例3.6】巧用書簽鏈接實(shí)現(xiàn)商城網(wǎng)頁(yè)內(nèi)部跳轉(zhuǎn) 32
3.4 圖像的超鏈接與熱區(qū)鏈接 33
3.4.1 圖像的超鏈接 33
【實(shí)例3.7】添加圖片鏈接實(shí)現(xiàn)手機(jī)風(fēng)暴模塊 33
3.4.2 圖像熱區(qū)鏈接 35
【實(shí)例3.8】使用熱區(qū)鏈接添加多個(gè)鏈接地址 35
3.5 綜合案例——實(shí)現(xiàn)明日學(xué)院明星講師頁(yè)面的跳轉(zhuǎn) 36
3.5.1 案例分析 37
3.5.2 實(shí)現(xiàn)過(guò)程 37
3.6 實(shí)戰(zhàn)練習(xí) 38
第4章 表格與
標(biāo)簽、
標(biāo)簽
4.1 簡(jiǎn)單表格 39
4.1.1 簡(jiǎn)單表格的制作 39
【實(shí)例4.1】使用表格標(biāo)簽編寫考試成績(jī)單 40
4.1.2 表頭的設(shè)置 41
【實(shí)例4.2】使用表頭標(biāo)簽制作簡(jiǎn)單課程表 41
4.2 表格的高級(jí)應(yīng)用 42
4.2.1 表格的樣式 42
【實(shí)例4.3】制作商品推薦表格 43
4.2.2 表格的合并 44
【實(shí)例4.4】使用表格制作復(fù)雜課程表 44
4.2.3 表格的分組 45
【實(shí)例4.5】使用表格分組制作學(xué)生聯(lián)系表 45
4.3 標(biāo)簽 46
4.3.1
標(biāo)簽的介紹 46
【實(shí)例4.6】使用
標(biāo)簽制作古詩(shī)一首 47
4.3.2
標(biāo)簽的應(yīng)用 47
【實(shí)例4.7】使用
標(biāo)簽制作個(gè)人簡(jiǎn)歷 48
4.4 標(biāo)簽 48
4.4.1 標(biāo)簽的介紹 48
【實(shí)例4.8】使用不同的語(yǔ)言表述“我愛(ài)你” 49
4.4.2 標(biāo)簽的應(yīng)用 49
【實(shí)例4.9】使用標(biāo)簽制作公司介紹短文 49
4.5 綜合案例——制作網(wǎng)頁(yè)中的女裝模塊 50
4.5.1 案例分析 50
4.5.2 實(shí)現(xiàn)過(guò)程 51
4.6 實(shí)戰(zhàn)練習(xí) 52
第5章 列表
5.1 列表的標(biāo)簽 53
5.2 無(wú)序列表 54
5.2.1 無(wú)序列表標(biāo)簽 54
【實(shí)例5.1】運(yùn)用無(wú)序列表顯示NBA東部聯(lián)盟球隊(duì)前四強(qiáng) 54
5.2.2 無(wú)序列表屬性 54
【實(shí)例5.2】運(yùn)用無(wú)序列表顯示全球品牌價(jià)值100強(qiáng)的前三名 55
5.3 有序列表 57
5.3.1 有序列表標(biāo)簽 57
【實(shí)例5.3】運(yùn)用有序列表顯示2018年俄羅斯世界杯排名前四強(qiáng) 57
5.3.2 有序列表屬性 58
【實(shí)例5.4】運(yùn)用有序列表制作商城頁(yè)面 58
5.4 定義列表 59
【實(shí)例5.5】運(yùn)用定義列表顯示古詩(shī)二首 60
5.5 無(wú)序列表和有序列表的嵌套 60
【實(shí)例5.6】運(yùn)用無(wú)序列表和有序列表制作導(dǎo)航欄 60
5.6 綜合案例——使用列表制作二級(jí)導(dǎo)航菜單 62
5.6.1 案例分析 62
5.6.2 案例實(shí)現(xiàn) 62
5.7 實(shí)戰(zhàn)練習(xí) 64
第6章 表單
6.1 表單概述 65
6.1.1 什么是表單 65
6.1.2 表單標(biāo)簽