【现货速发】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趣码快乐编程本书主要讲解前端页面的基础铺设，其内容分不同模块导入，层次分明、前后贯穿，逐步深入学习HTML及CSS的基础知识与运用。
第1章，主要简单介绍HTML的概况，初步对HTML产生兴趣和好奇。
第2章，介绍HTML结构中常用的标签以及运用，通过简单生动的举例来协助读者理解与操作。
第3章，介绍HTML页面美观，引人入胜的秘密武器——CSS工具。
第4章——第11章，分别介绍在页面设计中所常用的基本的元素及工具，字体设计、盒模型与行块元素、表格的制作、表单的运用、内容的显示与隐藏、变换与过渡效果、浮动以及定位等的设定。

如今互联网发展极其迅速，我们的生活已经离不开互联网，在互联网发展的历史中出现了一个又一个大咖，比如比尔·盖茨、Facebook创始人马克·扎克伯格等互联网领军人物，他们从小就对编程感兴趣，十几岁就可以编写计算机程序。编程其实不难，只要你喜欢玩，喜欢探索新奇的失误，小朋友们一样可以轻松学习编程。
HTML CSS趣码快乐编程图书主要面向青少年儿童，在风格设计方面比较活泼、生动、有趣，将专业术语与生活中的常见事物进行类比，便于理解，层层深入，让孩子们像看动画一样轻松主动地学习编程。
本书囊括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标签中。
这里用到了
2.（单选题）关于下面语句A和B，说法正确的是（）。
语句A：HTML文档一般都会包括“头”和“主体”两部分。
语句B：HTML文档的扩展名为.htm或.html。
A. 两句都对 B. 两句都错
C. 只有A对 D. 只有B对
3.（单选题）可以在下列哪个HTML元素中放置网页标题？（） 
A.