Web前端一站式開發(fā)手冊:HTML5+CSS3+JavaScript
定 價:99 元
- 作者:白澤 著
- 出版時間:2020/7/1
- ISBN:9787122362445
- 出 版 社:化學(xué)工業(yè)出版社
- 中圖法分類:TP312.8-62
- 頁碼:562
- 紙張:膠版紙
- 版次:1
- 開本:16開
本書以“理論知識”為鋪墊,以“實際應(yīng)用”為指向,從簡單易學(xué)的角度出發(fā),系統(tǒng)講述了Web前端開發(fā)的相關(guān)知識,內(nèi)容由淺入深,通俗易懂,知識點與案例結(jié)合緊密,所選案例新穎豐富,緊貼實戰(zhàn)。
本書從Web基礎(chǔ)知識講起,循序漸進地融入了HTML5、CSS3、JavaScript、繪圖、地理定位、本地存儲等實用技術(shù),是一本真正的Web前端開發(fā)從學(xué)到用的自學(xué)教程。
本書配備了極為豐富的學(xué)習(xí)資源,不僅有教學(xué)視頻、實例素材及源程序,還有HTML頁面基本速查、CSS常用屬性速查、JavaScript對象參考手冊,jQuery參考手冊、網(wǎng)頁配色基本知識速查等電子書。
本書適合作為Web前端開發(fā)、網(wǎng)頁設(shè)計、網(wǎng)頁制作、網(wǎng)站建設(shè)的入門級或者有一定基礎(chǔ)讀者的自學(xué)用書,也可用作高等院;蚺嘤(xùn)學(xué)校相關(guān)專業(yè)的教材及參考書。
本書編寫模式采用基礎(chǔ)知識 + 中小實例 + 實戰(zhàn)案例 + 課后作業(yè),內(nèi)容由淺入深,循序漸進,從入門中學(xué)習(xí)實戰(zhàn)應(yīng)用,從實戰(zhàn)應(yīng)用中激發(fā)學(xué)習(xí)興趣。
(1)本書是Web前端零基礎(chǔ)的啟蒙之書
(2)全書覆蓋Web前端開發(fā)的知識體系內(nèi)容
(3)理論實戰(zhàn)緊密結(jié)合,徹底擺脫紙上談兵
本書用通俗的語言、合理的結(jié)構(gòu)對Web前端的知識進行了細致的剖析。幾乎每個章節(jié)都有二維碼,微信掃一掃,可以隨時隨地看視頻,體驗感非常好。從配套到拓展,資源庫一應(yīng)俱全。全書上百個案例豐富詳盡,跟著案例去學(xué)習(xí),邊學(xué)邊做,從做中學(xué),學(xué)習(xí)體驗可以更深入、更高效。
1 為什么要學(xué)習(xí)前端
Web前端作為近幾年非;鸬能浖_發(fā)崗位,得到了許多人的青睞。Web前端即網(wǎng)站前臺部分,也叫前端開發(fā),運行在PC端、移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展,HTML5、CSS3、前端框架的應(yīng)用,跨平臺響應(yīng)式網(wǎng)頁設(shè)計能夠適應(yīng)各種屏幕分辨率,完美的動效設(shè)計給用戶帶來極高的用戶體驗。
HTML、CSS、JavaScript是前端開發(fā)中最基本也是最重要的三個技能。在頁面布局時,HTML將元素進行定義,CSS對展示的元素進行定位,再通過JavaScript實現(xiàn)相應(yīng)的效果和交互。雖然表面看起來很簡單,但這里面需要掌握的東西絕對不少。在進行開發(fā)前,需要將這些概念弄清楚,這樣在開發(fā)的過程中才會得心應(yīng)手。
學(xué)習(xí)前端開發(fā)技術(shù)有很大的優(yōu)勢:
· Web前端開發(fā)入門門檻很低,且市場的缺口很大,前景非常好。
· Web前端需要更少的邏輯思維,對計算機和物聯(lián)網(wǎng)的知識也比嵌入式系統(tǒng)少。所以,只要你想進入網(wǎng)絡(luò)前端行業(yè),有正確的學(xué)習(xí)態(tài)度和學(xué)習(xí)耐心,即使你是零基礎(chǔ),也可以學(xué)好。
· 在移動行業(yè),Web前端開發(fā)工程師是高薪的代名詞,隨著工作年限的增加,工資也相應(yīng)增加。
2 為什么要選擇本書
本書編寫模式采用基礎(chǔ)知識 + 中小實例 + 實戰(zhàn)案例 + 課后作業(yè),內(nèi)容由淺入深,循序漸進,從入門中學(xué)習(xí)實戰(zhàn)應(yīng)用,從實戰(zhàn)應(yīng)用中激發(fā)學(xué)習(xí)興趣。
(1)本書是Web前端零基礎(chǔ)的啟蒙之書
隨著網(wǎng)絡(luò)的不斷發(fā)展和成熟,前端知識已經(jīng)應(yīng)用到我們的生活中,大到公司網(wǎng)頁的制作,小到手機游戲,都要用到前端的相關(guān)知識。但隨之而來也出現(xiàn)了很多問題:很多人不知道如何入門HTML、如何學(xué)習(xí)CSS的選擇器以及如何利用JavaScript制作網(wǎng)頁特效,或者很多人只能局限于簡單的模仿,特別是在實際應(yīng)用上,與前端設(shè)計師的水平總是有些差距。鑒于此,我們編寫此書,旨在通過本書的實例講解以及專家指點,給讀者帶來一定的啟發(fā)。
(2)全書覆蓋Web前端開發(fā)的知識內(nèi)容
本書以敏銳的視角、簡練的語言,結(jié)合前端設(shè)計行業(yè)的特點,對HTML、CSS和JavaScript進行了全方位講解。書中幾乎囊括了目前前端設(shè)計的所有應(yīng)用知識點,保證讀者能夠?qū)W以致用,更快地入門前端開發(fā)。
(3)理論實戰(zhàn)緊密結(jié)合,徹底擺脫紙上談兵
本書包含大量的案例,既有針對一個元素的小案例,也有綜合總結(jié)性的大案例,所有的案例都經(jīng)過了精心設(shè)計。讀者在學(xué)習(xí)本書的時候可以通過案例更好、更快、更明了地理解知識并掌握應(yīng)用,同時這些案例也可以在開發(fā)時候直接引用。
3 本書的讀者對象
從事平面設(shè)計的工作人員
培訓(xùn)班中學(xué)習(xí)前端設(shè)計的學(xué)員
對前端設(shè)計有著濃厚興趣的愛好者
零基礎(chǔ)想轉(zhuǎn)行到前端的人員
有想進入IT行業(yè)想法的人員
有空閑時間想掌握更多技能的辦公室人員
高等院校相關(guān)專業(yè)的師生
4 學(xué)習(xí)本書的方法
想要學(xué)好前端,關(guān)鍵要看自己的態(tài)度,下面給出一些學(xué)習(xí)建議:
(1)學(xué)習(xí)前端要從概念入手
拿到本書后,會看到HTML、CSS、JavaScript的概念,只有學(xué)會這三種語言,在理解的基礎(chǔ)上才能進行應(yīng)用。要吃透這些語法、結(jié)構(gòu)的應(yīng)用例子,才能做到舉一反三。
(2)多動手實踐
起步階段問題自然不少,要做到沉著鎮(zhèn)定,不慌不亂,先自己思考問題出在何處,并動手去解決,可能有多種解決方法,但總有一種是更高效的。親自動手進行程序設(shè)計是創(chuàng)造性思維應(yīng)用的體現(xiàn),也是培養(yǎng)邏輯思維的好方法。
(3)多與他人交流
每個人的思維方式不同、角度各異,所以解決方法也會不同,通過交流可不斷吸收別人的長處,豐富前端實踐,幫助自己提高水平?梢栽谏磉呎乙粋學(xué)習(xí)前端的人,水平高低不重要,重要的是能夠志同道合地一起向前走。
(4)要不斷學(xué)習(xí)并養(yǎng)成良好的習(xí)慣
前端入門不難,但日后不斷學(xué)習(xí)很重要。在此期間要注意養(yǎng)成一些良好的編寫習(xí)慣。良好的編程風(fēng)格可以使程序結(jié)構(gòu)清晰合理,且使程序代碼便于維護。如代碼的縮進編排、規(guī)則的一致性、代碼的注釋等。
總之,學(xué)習(xí)前端就是一個“理論→實踐→再理論→再實踐”的認知過程。在這條路子上行走,每個人都會遇到“瓶頸期”,會覺得自己之前學(xué)的都一無用處,遇到的問題根本無法解決,這時候就要回頭看,回頭來再學(xué)習(xí)一些基礎(chǔ)理論。學(xué)過之后,很多以前遇到的問題都會迎刃而解,使人有豁然開朗之感。
本書用通俗的語言、合理的結(jié)構(gòu)對Web前端的知識進行了細致的剖析。幾乎每個章節(jié)都有大量二維碼,手機掃一掃,可以隨時隨地看視頻,體驗感非常好。從配套到拓展,資源庫一應(yīng)俱全。全書上百個案例豐富詳盡,跟著案例去學(xué)習(xí),邊學(xué)邊做,從做中學(xué),學(xué)習(xí)體驗可以更深入、更高效。最后祝大家學(xué)有所成。
5 本書包含哪些內(nèi)容
本書是一本介紹HTML、CSS和JavaScript開發(fā)技術(shù)的實用圖書。全書可分為4個部分。
第1~9章主要是對HTML知識的講解,從HTML基礎(chǔ)知識講起,全面介紹了HTML和HTML5的全部標簽和內(nèi)容,內(nèi)容包括:表單、表格、列表、鏈接、HTML5新增屬性、canvas繪圖、定位、拖拽和存儲等知識。
第10~17章主要是對CSS知識的講解,詳細介紹了CSS 和CSS3的絕大部分常用選擇器、屬性,并為這些選擇器、屬性提供了示例,這部分內(nèi)容涵蓋了CSS定位、盒模型、動畫、轉(zhuǎn)換、變色和自適應(yīng)等知識。
第18~22章主要是對JavaScript編程的相關(guān)內(nèi)容進行了講解,包括JavaScript基礎(chǔ)語法、JavaScript函數(shù)、JavaScript對象、DOM編程,這些內(nèi)容覆蓋了初學(xué)者的編程基礎(chǔ)。
第23章是一個綜合項目開發(fā),綜合運用了HTML 5、CSS3和JavaScript等知識制作了一個網(wǎng)站。通過對整個項目的學(xué)習(xí),既可讓讀者鞏固前面所掌握的各種知識,也可讓讀者將所學(xué)理論運用到實際開發(fā)中。
本書在編寫過程中力求嚴謹細致,但由于時間與精力有限,疏漏之處在所難免。讀者在學(xué)習(xí)過程中若遇到問題,可聯(lián)系QQ 1908754590與筆者交流。
編著者
第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