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