掃一掃
關(guān)注中圖網(wǎng)
官方微博
本類五星書更多>
-
>
它們：水怪時代
-
>
尋找中國龍立體書
-
>
非遺里的中國(全3冊)一千年國粹 匠心巧思 薪火相伴
-
>
郁金香①+②(全10冊)
-
>
數(shù)學(xué)簡史
-
>
汴京的一天
-
>
地圖上的地理故事-長城
HTML+CSS趣碼快樂編程 版權(quán)信息
- ISBN：9787536977303
- 條形碼：9787536977303 ; 978-7-5369-7730-3
- 裝幀：一般膠版紙
- 冊數(shù)：暫無
- 重量：暫無
- 所屬分類：>>
HTML+CSS趣碼快樂編程 本書特色
適讀人群 ：5-12歲如今互聯(lián)網(wǎng)發(fā)展極其迅速，我們的生活已經(jīng)離不開互聯(lián)網(wǎng)，在互聯(lián)網(wǎng)發(fā)展的歷史中出現(xiàn)了一個又一個大咖，比如比爾·蓋茨、Facebook創(chuàng)始人馬克·扎克伯格等互聯(lián)網(wǎng)領(lǐng)軍人物，他們從小就對編程感興趣，十幾歲就可以編寫計算機(jī)程序。編程其實不難，只要你喜歡玩，喜歡探索新奇的失誤，小朋友們一樣可以輕松學(xué)習(xí)編程。HTML+CSS趣碼快樂編程圖書主要面向青少年兒童，在風(fēng)格設(shè)計方面比較活潑、生動、有趣，將專業(yè)術(shù)語與生活中的常見事物進(jìn)行類比，便于理解，層層深入，讓孩子們像看動畫一樣輕松主動地學(xué)習(xí)編程。本書囊括HTML、CSS中主要且必要的知識點，每章內(nèi)容分不同模塊逐步導(dǎo)入，設(shè)定“知識目標(biāo)”，通過“指點迷津”進(jìn)行內(nèi)容講解，“通關(guān)秘籍”總結(jié)概括本章重要知識點，再經(jīng)過“大顯身手”練習(xí)加強(qiáng)鞏固，“項目創(chuàng)新大通關(guān)”可帶領(lǐng)讀者運用所學(xué)內(nèi)容自己實現(xiàn)編程設(shè)計。除此之外，每章節(jié)后配有相應(yīng)的二維碼，掃碼即可觀看老師對本章內(nèi)容的講解，讓讀者更好地理解領(lǐng)會要點，逐步實現(xiàn)自己上手操作的能力。
HTML+CSS趣碼快樂編程 內(nèi)容簡介
HTML+CSS趣碼快樂編程本書主要講解前端頁面的基礎(chǔ)鋪設(shè)，其內(nèi)容分不同模塊導(dǎo)入，層次分明、前后貫穿，逐步深入學(xué)習(xí)HTML及CSS的基礎(chǔ)知識與運用。第1章，主要簡單介紹HTML的概況，初步對HTML產(chǎn)生興趣和好奇。第2章，介紹HTML結(jié)構(gòu)中常用的標(biāo)簽以及運用，通過簡單生動的舉例來協(xié)助讀者理解與操作。第3章，介紹HTML頁面美觀，引人入勝的秘密武器——CSS工具。第4章——第11章，分別介紹在頁面設(shè)計中所常用的基本的元素及工具，字體設(shè)計、盒模型與行塊元素、表格的制作、表單的運用、內(nèi)容的顯示與隱藏、變換與過渡效果、浮動以及定位等的設(shè)定。
HTML+CSS趣碼快樂編程 目錄
第1章探索HTML之美
1.1認(rèn)識**個朋友——HTML的概念/2
HTML的基本概念/2
HTML與其他編程語言的區(qū)別/2
HTML的發(fā)展歷程/3
初識瀏覽器/3
1.2HTML的骨架結(jié)構(gòu)/5
HTML的基本結(jié)構(gòu)與語法/5
編輯器的下載及使用/7
1.3初識標(biāo)簽/14
雙標(biāo)簽與單標(biāo)簽的基本結(jié)構(gòu)/14
標(biāo)簽之間的關(guān)系/16
HTML標(biāo)簽的語義化/17
第2章HTML的寶藏——常用標(biāo)簽
2.1排版標(biāo)簽/20
p標(biāo)簽/20
br標(biāo)簽/21
hr標(biāo)簽/22
注釋標(biāo)簽/22
排版標(biāo)簽的綜合運用/23
2.2字體標(biāo)簽/26
h系列標(biāo)簽/26
粗體標(biāo)簽/28
斜體標(biāo)簽/29
sup標(biāo)簽和sub標(biāo)簽/30
字體標(biāo)簽的綜合運用/30
2.3列表標(biāo)簽/33
什么是列表？/34
無序列表標(biāo)簽/34
有序列表標(biāo)簽/37
自定義列表標(biāo)簽/39
2.4圖形標(biāo)簽/43
什么是圖片標(biāo)簽？/43
img標(biāo)簽的基本屬性/43
路徑/44
路徑的分類/46
img標(biāo)簽的其他屬性/47
2.5a標(biāo)簽/53
a標(biāo)簽的應(yīng)用場景/53
a標(biāo)簽的語法/53
a標(biāo)簽的屬性/56
2.6div標(biāo)簽與span標(biāo)簽/58
網(wǎng)頁拆分/58
網(wǎng)頁拆分原則/59
div標(biāo)簽/60
span標(biāo)簽/63
2.7特殊字符標(biāo)簽/66
常用的特殊字符/66
2.8初識行塊標(biāo)簽/67
塊級標(biāo)簽/67
行級標(biāo)簽/68
常見塊級標(biāo)簽和行級標(biāo)簽/68
第3章寶藏的鑰匙——CSS
3.1認(rèn)識CSS/70
什么是CSS？/70
CSS的作用/70
CSS基礎(chǔ)語法/70
CSS的引入方式/71
3.2CSS布局與選擇器/74
id選擇器/74
字體顏色（color）/75
CSS基礎(chǔ)屬性及常用單位/76
background進(jìn)階/78
class選擇器/83
id與class命名規(guī)范/85
外邊距（margin）/85
內(nèi)邊距（padding）/89
邊框（border）、描邊（outline）/90
3.3CSS選擇器進(jìn)階/95
標(biāo)簽選擇器/95
后代選擇器/96
群組選擇器/98
偽類選擇器/99
通配符/101
第4章字體與文本
4.1字體操作屬性/106
字體類型（font-family）/106
字體大。╢ont-size）/106
字體樣式（font-style）/107
字體粗細(xì)（font-weight）/107
字體屬性簡寫（font）/108
4.2文本操作屬性/111
文本行高（line-height）/112
文本修飾（text-decoration）/114
文本首行縮進(jìn)（text-indent）/115
文本水平對齊（text-align）/116
列表樣式（list-style）/118
第5章盒模型與行塊元素
5.1盒模型與行塊元素的概念/122
標(biāo)準(zhǔn)盒模型/122
行級與塊級元素的區(qū)別/122
5.2行塊元素轉(zhuǎn)換/124
行塊元素的轉(zhuǎn)換屬性/124
瀏覽器調(diào)試臺/126
第6章整齊的道路——表格
6.1網(wǎng)頁中的表格/130
為什么使用表格？/130
表格的基本結(jié)構(gòu)/130
表格的基本語法/131
表格的結(jié)構(gòu)化/132
跨列、跨行的表格/133
6.2表格的綜合應(yīng)用/135
第7章重要城市——表單
7.1初識表單/140
表單概述/140
form標(biāo)簽/140
7.2表單中的常用標(biāo)簽/141
input標(biāo)簽/141
input標(biāo)簽分類/141
多行文本域/143
下拉列表/144
label標(biāo)簽/144
7.3表單屬性/146
size屬性/146
maxlength屬性/147
checked屬性/147
selected屬性/147
placeholder屬性/148
disabled屬性/149
7.4表單的應(yīng)用/151
第8章大顯身手——顯示與隱藏
8.1display與visibility/164
display與visibility的概念/164
display與visibility的屬性值/164
display與visibility的區(qū)別/164
8.2opacity（不透明度）/166
opacity的概念/166
opacity的應(yīng)用/167
第9章感受2D變換與過渡效果
9.1transition（過渡）/170
9.2transform（變換）/173
旋轉(zhuǎn)（rotate）/174
縮放（scale）/174
平移（translate）/177
第10章浮動的奧秘
10.1認(rèn)識浮動/180
HTML文檔流介紹/180
什么是浮動？/181
浮動屬性介紹/182
10.2浮動的應(yīng)用/182
元素向左浮動/182
元素向右浮動/183
相鄰元素含有float屬性/184
10.3清除浮動帶來的影響/186
第11章自由掌控——定位
11.1認(rèn)識定位/194
什么是定位？/194
定位屬性介紹/195
11.2定位的運用/195
相對定位/195
絕對定位/196
固定定位/197
神奇的錨點/198
定位的綜合運用/199
課后習(xí)題答案/207
展開全部
HTML+CSS趣碼快樂編程 節(jié)選
1.1認(rèn)識**個朋友——HTML的概念 1. 熟練掌握HTML的概念。 2. 理解HTML與其他編程語言的區(qū)別。 3. 了解HTML的發(fā)展及常用瀏覽器。 指點迷津 HTML的基本概念 HTML（Hyper Text Markup Language），中文翻譯為“超文本標(biāo)記語言”。它是用來描述網(wǎng)頁的一種語言（如圖1-1）。我們平常看到的網(wǎng)頁就是工程師編寫的HTML文件的呈現(xiàn)。 圖1-1HTML文件 “超文本”是指頁面內(nèi)不僅包含文本內(nèi)容，還可以包含圖片、鏈接，甚至音樂、程序等非文字元素。不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件，功能強(qiáng)大。 一個HTML文件不僅包含文本內(nèi)容，還包含一些標(biāo)記（即標(biāo)簽，在第2章進(jìn)行具體介紹），標(biāo)記語言要通過瀏覽器幫助解析才能*終實現(xiàn)完美的網(wǎng)頁效果。 需要大家牢記的一點是HTML文件的后綴名是“.html”或者“.htm”。 HTML與其他編程語言的區(qū)別 常見的計算機(jī)語言主要有三大類：編譯語言、標(biāo)記語言和腳本語言。 編譯語言：例如C、C++、Java等，它們在程序執(zhí)行之前需要一個專門的編譯過程，運行時直接使用編譯結(jié)果即可。編譯語言的優(yōu)點是程序執(zhí)行效率高，缺點是非常依賴編譯器，跨平臺性較差。 標(biāo)記語言：例如HTML，是一種將文本以及文本相關(guān)的其他信息結(jié)合起來，通過很多標(biāo)記（標(biāo)簽）展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理細(xì)節(jié)的電腦文字編碼。標(biāo)記語言的優(yōu)點是可閱讀性強(qiáng)，易于學(xué)習(xí)。 腳本語言：例如JavaScript、PHP、Python等。腳本語言介于標(biāo)記語言和編譯語言之間，不需要編譯，可以直接使用，由解釋器負(fù)責(zé)解釋。腳本語言比編譯語言的開發(fā)速度快，但腳本語言往往不夠全面。 HTML的發(fā)展歷程 HTML一直處于高速發(fā)展之中，第1版超文本標(biāo)記語言（并非標(biāo)準(zhǔn)）在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。而后經(jīng)歷了HTML2.0版本、HTML3.2版本、HTML4.0版本、HTML4.01版本等調(diào)整，在2014年10月28日，HTML5發(fā)布。它是W3C（萬維網(wǎng)聯(lián)盟）推薦標(biāo)準(zhǔn)，也是目前使用*廣泛的版本。 初識瀏覽器 瀏覽器是網(wǎng)頁運行的平臺，我們平？吹降木W(wǎng)頁都是使用瀏覽器進(jìn)行閱讀的。 瀏覽器的工作原理：瀏覽器是HTML的解析器，解析HTML文件，然后在瀏覽器窗口中展示解析頁面。 目前支持HTML5的常用瀏覽器（圖1-2）有IE、火狐（Firefox）、谷歌（Chrome）、蘋果（Safari）和歐朋（Opera）等。 圖1-2常用瀏覽器圖標(biāo) 通關(guān)秘籍 1.HTML是超文本標(biāo)記語言，它不僅包含文本內(nèi)容，還可以包含圖片、鏈接、音樂等非文字元素。 2.HTML的作用是用標(biāo)簽來描述網(wǎng)頁，讓網(wǎng)頁內(nèi)容在瀏覽器中展示出來；HTML文件的后綴名是.html或者.htm。 3.目前使用*廣泛的是HTML5版本，并且仍然在不斷完善中。 大顯身手 編程基本功 1.（單選題）HTML是什么意思？（） A.高級文本語言 B.超文本標(biāo)記語言 C.擴(kuò)展標(biāo)記語言 D.圖形化標(biāo)記語言 2.（單選題）瀏覽器對于HTML文檔的作用是什么？（） A.瀏覽器用于創(chuàng)建HTML文檔 B.瀏覽器用于查看HTML文檔 C.瀏覽器用于修改HTML文檔 D.瀏覽器用于刪除HTML文檔 3.（單選題）下面關(guān)于HTML說法錯誤的是（）。 A.HTML是一種標(biāo)記語言 B.HTML可以控制頁面和內(nèi)容的外觀 C.HTML文檔總是靜態(tài)的 D.HTML文檔是超文本文檔 4.（簡答題）請簡單描述一下HTML的作用。 1.2HTML的骨架結(jié)構(gòu) 1. 熟練掌握HTML的基本結(jié)構(gòu)及語法。 2. 學(xué)會使用編輯器提高代碼編寫效率。 指點迷津 HTML的基本結(jié)構(gòu)與語法 輕松學(xué) 生活中蓋房子需要先打地基再搭建結(jié)構(gòu)，編寫HTML文件也要遵循同樣的道理。常見的網(wǎng)頁文件基本都由圖1-3中的三對標(biāo)簽構(gòu)成骨架結(jié)構(gòu)。 圖1-3HTML的基本結(jié)構(gòu)標(biāo)簽 HTML的基本語法如下： ...：這對標(biāo)簽告訴瀏覽器“我是html文件”，書寫的代碼都要放在這對標(biāo)簽的中間。 ...：head是頭部的意思，頭部中提供了關(guān)于網(wǎng)頁的信息。 ...：body是身體的意思，這里是指網(wǎng)頁的主體，在網(wǎng)頁中展示的內(nèi)容都寫在這對標(biāo)簽的中間。 輕松練 應(yīng)用HTML的基本結(jié)構(gòu)，在瀏覽器中展示一句話：“歡迎來到趣碼星球。 ，并將網(wǎng)頁的標(biāo)題設(shè)置為“Hi, go code！”，如圖1-4所示。 圖1-4實現(xiàn)效果圖 思維導(dǎo)學(xué) 若要實現(xiàn)圖1-4的效果，我們需要在書寫代碼時分4步進(jìn)行： 第1步 打開記事本，保存時修改文件后綴名為.html，“保存類型”選擇“所有文件”。 第2步 寫出HTML的基本結(jié)構(gòu)。 第3步 書寫網(wǎng)頁標(biāo)題，網(wǎng)頁標(biāo)題需要寫在head標(biāo)簽中。 這里用到了標(biāo)簽，這個標(biāo)簽用來設(shè)置網(wǎng)頁的標(biāo)題。 第4步 書寫網(wǎng)頁的主體內(nèi)容，需要寫在body標(biāo)簽中。 *后，用瀏覽器打開這個文件，效果即如圖1-4所示。 編輯器的下載及使用 編輯器是輔助編寫代碼的一種工具軟件，它能較大程度地提高代碼的編寫效率。比如，原來需要輸入十多個字母來編寫代碼，在編輯器中，輸入兩三個字母就可以完成代碼的自動提示，既節(jié)約了時間，又避免了代碼拼寫錯誤等問題，降低了錯誤出現(xiàn)的頻率。接下來將會介紹我們編寫代碼可使用的編輯器：VS Code。 VS Code編輯器的介紹 VS Code的全稱是Visual Studio Code，是微軟公司推出的一款免費輕量級編輯器，體積小，打開文件速度快，還可以根據(jù)需求安裝各種插件。 VS Code編輯器的下載及安裝方法 下載地址 在瀏覽器地址欄里輸入https://code.visualstudio.com（VSCode編輯器的官方地址），進(jìn)入頁面后，下載區(qū)域如圖1-5所示。 圖1-5VS Code編輯器下載頁面 選擇下載版本 單擊圖1-5中右上角的Download（下載按鈕），便可進(jìn)入下載頁面，進(jìn)行對應(yīng)的版本選擇（如圖1-6），根據(jù)自己的電腦系統(tǒng)選擇下載版本。以Windows系統(tǒng)為例，下載Windows版本（圖1-6左側(cè)），單擊“Windows”后會彈出一個下載窗口，選擇合適的存儲位置后，下載即可。 圖1-6VS Code版本選擇頁面 安裝流程 下載完成后雙擊打開安裝程序，選擇“我接受協(xié)議”，如圖1-7所示。 圖1-7安裝步驟 接受協(xié)議后一直單擊“下一步”，直到安裝完畢。安裝完成后桌面上會出現(xiàn)一個圖標(biāo)，如圖1-8所示。 圖1-8VS Code圖標(biāo) 雙擊圖標(biāo)打開后出現(xiàn)主界面，如圖1-9所示。 圖1-9VS Code主界面 注意 VS Code版本在不斷更新，下載安裝后的界面可能存在一定差異，但基本功能一致。 VS Code的使用方法 單擊圖1-10中自定義部分紅框標(biāo)注的“JavaScript”和“Sublime”，安裝JavaScript插件和Sublime快捷鍵插件。這兩個插件大家一定別忘了安裝，否則會影響后續(xù)操作。 圖1-10插件安裝 創(chuàng)建文件 編寫HTML代碼需要HTML文件，HTML文件的后綴名必須為.html或者.htm。那么，在編輯器中如何創(chuàng)建HTML文件呢？ 創(chuàng)建文件有兩種方式： 1.單擊菜單欄左上角的“文件”按鈕，會彈出一個對話框，單擊**個“新建文件”即可創(chuàng)建文件。 2.點擊“開始”下的“新建文件”也可以創(chuàng)建文件，如圖1-11所示。 圖1-11創(chuàng)建文件 保存文件 創(chuàng)建完成后會進(jìn)入一個名為Untitled-1的空文本頁面，在該頁面下，按下Ctrl+S快捷鍵進(jìn)行保存，會彈出如圖1-12所示的界面，用于保存并修改文件類型。 圖1-12文件類型保存 注意 圖1-12中的紅色框是修改文件名區(qū)域，文件名*好用英文（平常的小練習(xí)、小案例可以使用中文），同時必須保證文件后綴名是.html。 快速生成HTML文檔結(jié)構(gòu) 修改完文件名后，接著在頁面中輸入“!”（必須是英文輸入法下的感嘆號，代碼中禁止出現(xiàn)任何中文輸入法標(biāo)點符號）,如圖1-13所示。 圖1-13快速生成HTML結(jié)構(gòu) 在圖1-13中，小紅框左上角出現(xiàn)了一個類似數(shù)字5的圖標(biāo)，這就是HTML文檔的標(biāo)識，說明該文件是HTML文檔。輸入感嘆號（或輸入html:5）后，按下鍵盤上的Tab鍵，就會生成HTML基本文檔結(jié)構(gòu)，如圖1-14所示。 圖1-14HTML基本文檔結(jié)構(gòu) 以上就是VS Code創(chuàng)建HTML文檔的所有流程。 VS Code常用快捷鍵 下面我們來認(rèn)識一下VS Code編輯器的常用快捷鍵，詳見下表。 VS Code編輯器的常用快捷鍵 常用快捷鍵組合 作用 Ctrl+S 快速保存 Ctrl+Z 返回上一次操作 Ctrl+Shift+S 快速復(fù)制 通關(guān)秘籍 1.body標(biāo)簽存放的是網(wǎng)頁的主體內(nèi)容。 2.head標(biāo)簽存放的是網(wǎng)頁的頭部內(nèi)容。 3.title標(biāo)簽用來設(shè)置網(wǎng)頁的標(biāo)題。 4.編輯器中有很多快捷鍵可以提高代碼的編寫速度。例如生成HTML的基本文檔結(jié)構(gòu)可以輸入“!”后，再按下Tab鍵，也可以輸入html:5再按下Tab鍵。 大顯身手 一、編程基本功 1.（單選題）下列哪個標(biāo)簽用于表示HTML文檔的結(jié)束？（） A. B. C. D. 2.（單選題）關(guān)于下面語句A和B，說法正確的是（）。 語句A：HTML文檔一般都會包括“頭”和“主體”兩部分。 語句B：HTML文檔的擴(kuò)展名為.htm或.html。 A. 兩句都對 B. 兩句都錯 C. 只有A對 D. 只有B對 3.（單選題）可以在下列哪個HTML元素中放置網(wǎng)頁標(biāo)題？（） A. B. C. D. 4. (多選題）使用瀏覽器運行下面這段代碼，下列說法正確的是（）。 A. 網(wǎng)頁的標(biāo)題是“歡迎學(xué)習(xí) HTML” B. 網(wǎng)頁的標(biāo)題是“我的**個HTML文檔” C. 網(wǎng)頁的內(nèi)容是“歡迎學(xué)習(xí) HTML” D. 網(wǎng)頁的內(nèi)容是“我的**個HTML文檔” 5．（簡答題）本節(jié)你學(xué)會使用哪個編輯器？說一說如何使用編輯器生成HTML基本結(jié)構(gòu)。 二、轉(zhuǎn)動編程大腦 自己動手完成一個HTML頁面，要求在頁面中簡單介紹你自己（不少于100字），并將網(wǎng)頁標(biāo)題設(shè)置為自己的名字。（樣例如下） 1.3初識標(biāo)簽 1. 了解標(biāo)簽的定義，熟練掌握單雙標(biāo)簽。 2. 掌握標(biāo)簽之間的嵌套及并列關(guān)系。 指點迷津 前面提到的、、都是標(biāo)簽。標(biāo)簽就是放在標(biāo)簽符“”中表示某個功能的編碼命令，也稱為HTML標(biāo)簽或HTML元素。標(biāo)簽可以簡單地分為雙標(biāo)簽和單標(biāo)簽兩大類。 雙標(biāo)簽與單標(biāo)簽的基本結(jié)構(gòu) 輕松學(xué) 雙標(biāo)簽 語法：內(nèi)容。
書友推薦
- >
小考拉的故事-套裝共3冊
- >
伯納黛特,你要去哪(2021新版)
- >
我與地壇
- >
二體千字文
- >
巴金－再思錄
- >
人文閱讀與收藏·良友文學(xué)叢書:一天的工作
- >
自卑與超越
- >
唐代進(jìn)士錄
本類暢銷
