-
>
它们:水怪时代
-
>
寻找中国龙立体书
-
>
非遗里的中国(全3册)一千年国粹 匠心巧思 薪火相伴
-
>
郁金香①+②(全10册)
-
>
数学简史
-
>
汴京的一天
-
>
地图上的地理故事-长城
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元素。标签可以简单地分为双标签和单标签两大类。 双标签与单标签的基本结构 轻松学 双标签 语法:内容。
- >
小考拉的故事-套装共3册
小考拉的故事-套装共3册
¥36.7¥68.0 - >
中国人在乌苏里边疆区:历史与人类学概述
中国人在乌苏里边疆区:历史与人类学概述
¥20.6¥48.0 - >
随园食单
随园食单
¥21.6¥48.0 - >
山海经
山海经
¥20.4¥68.0 - >
巴金-再思录
巴金-再思录
¥14.7¥46.0 - >
龙榆生:词曲概论/大家小书
龙榆生:词曲概论/大家小书
¥7.7¥24.0 - >
月亮与六便士
月亮与六便士
¥18.1¥42.0 - >
新文学天穹两巨星--鲁迅与胡适/红烛学术丛书(红烛学术丛书)
新文学天穹两巨星--鲁迅与胡适/红烛学术丛书(红烛学术丛书)
¥9.9¥23.0
-
儿童房专用挂图:恐龙地图-经典版、海洋地图-经典版
¥7.9¥59.6 -
地球到底有什么?(彩绘版)
¥11.8¥38 -
亲爱的科学 【自然】
¥12.1¥36 -
苹果树之歌(平装)
¥10¥22 -
亲爱的科学【人体】
¥12.1¥36 -
自然野趣大观察 鱼类(超值版)
¥13.6¥58