HTML+CSS趣碼快樂編程本書主要講解前端頁面的基礎(chǔ)鋪設(shè),其內(nèi)容分不同模塊導(dǎo)入,層次分明、前后貫穿,逐步深入學(xué)習(xí)HTML及CSS的基礎(chǔ)知識(shí)與運(yùn)用。
第1章,主要簡單介紹HTML的概況,初步對(duì)HTML產(chǎn)生興趣和好奇。
第2章,介紹HTML結(jié)構(gòu)中常用的標(biāo)簽以及運(yùn)用,通過簡單生動(dòng)的舉例來協(xié)助讀者理解與操作。
第3章,介紹HTML頁面美觀,引人入勝的秘密武器——CSS工具。
第4章——第11章,分別介紹在頁面設(shè)計(jì)中所常用的基本的元素及工具,字體設(shè)計(jì)、盒模型與行塊元素、表格的制作、表單的運(yùn)用、內(nèi)容的顯示與隱藏、變換與過渡效果、浮動(dòng)以及定位等的設(shè)定。
適讀人群 :5-12歲 如今互聯(lián)網(wǎng)發(fā)展極其迅速,我們的生活已經(jīng)離不開互聯(lián)網(wǎng),在互聯(lián)網(wǎng)發(fā)展的歷史中出現(xiàn)了一個(gè)又一個(gè)大咖,比如比爾·蓋茨、Facebook創(chuàng)始人馬克·扎克伯格等互聯(lián)網(wǎng)領(lǐng)軍人物,他們從小就對(duì)編程感興趣,十幾歲就可以編寫計(jì)算機(jī)程序。編程其實(shí)不難,只要你喜歡玩,喜歡探索新奇的失誤,小朋友們一樣可以輕松學(xué)習(xí)編程。
HTML+CSS趣碼快樂編程圖書主要面向青少年兒童,在風(fēng)格設(shè)計(jì)方面比較活潑、生動(dòng)、有趣,將專業(yè)術(shù)語與生活中的常見事物進(jìn)行類比,便于理解,層層深入,讓孩子們像看動(dòng)畫一樣輕松主動(dòng)地學(xué)習(xí)編程。
本書囊括HTML、CSS中主要且必要的知識(shí)點(diǎn),每章內(nèi)容分不同模塊逐步導(dǎo)入,設(shè)定“知識(shí)目標(biāo)”,通過“指點(diǎn)迷津”進(jìn)行內(nèi)容講解,“通關(guān)秘籍”總結(jié)概括本章重要知識(shí)點(diǎn),再經(jīng)過“大顯身手”練習(xí)加強(qiáng)鞏固,“項(xiàng)目創(chuàng)新大通關(guān)”可帶領(lǐng)讀者運(yùn)用所學(xué)內(nèi)容自己實(shí)現(xiàn)編程設(shè)計(jì)。除此之外,每章節(jié)后配有相應(yīng)的二維碼,掃碼即可觀看老師對(duì)本章內(nèi)容的講解,讓讀者更好地理解領(lǐng)會(huì)要點(diǎn),逐步實(shí)現(xiàn)自己上手操作的能力。
第1章探索HTML之美
1.1認(rèn)識(shí)第一個(gè)朋友——HTML的概念/2
HTML的基本概念/2
HTML與其他編程語言的區(qū)別/2
HTML的發(fā)展歷程/3
初識(shí)瀏覽器/3
1.2HTML的骨架結(jié)構(gòu)/5
HTML的基本結(jié)構(gòu)與語法/5
編輯器的下載及使用/7
1.3初識(shí)標(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)簽的綜合運(yùn)用/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)簽的綜合運(yùn)用/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初識(shí)行塊標(biāo)簽/67
塊級(jí)標(biāo)簽/67
行級(jí)標(biāo)簽/68
常見塊級(jí)標(biāo)簽和行級(jí)標(biāo)簽/68
第3章寶藏的鑰匙——CSS
3.1認(rèn)識(shí)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
文本水平對(duì)齊(text-align)/116
列表樣式(list-style)/118
第5章盒模型與行塊元素
5.1盒模型與行塊元素的概念/122
標(biāo)準(zhǔn)盒模型/122
行級(jí)與塊級(jí)元素的區(qū)別/122
5.2行塊元素轉(zhuǎn)換/124
行塊元素的轉(zhuǎn)換屬性/124
瀏覽器調(diào)試臺(tái)/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初識(shí)表單/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章浮動(dòng)的奧秘
10.1認(rèn)識(shí)浮動(dòng)/180
HTML文檔流介紹/180
什么是浮動(dòng)?/181
浮動(dòng)屬性介紹/182
10.2浮動(dòng)的應(yīng)用/182
元素向左浮動(dòng)/182
元素向右浮動(dòng)/183
相鄰元素含有float屬性/184
10.3清除浮動(dòng)帶來的影響/186
第11章自由掌控——定位
11.1認(rèn)識(shí)定位/194
什么是定位?/194
定位屬性介紹/195
11.2定位的運(yùn)用/195
相對(duì)定位/195
絕對(duì)定位/196
固定定位/197
神奇的錨點(diǎn)/198
定位的綜合運(yùn)用/199
課后習(xí)題答案/207