超值优惠券
¥50
100可用 有效期2天

全场图书通用(淘书团除外)

不再提示
关闭
图书盲袋,以书为“药”
欢迎光临中图网 请 | 注册
> >>
HTML+CSS趣码快乐编程

HTML+CSS趣码快乐编程

出版社:陕西科学技术出版社出版时间:2020-02-01
开本: 16开 页数: 232
本类榜单:少儿销量榜
中 图 价:¥49.1(6.3折) 定价  ¥78.0 登录后可看到会员价
加入购物车 收藏
运费6元,满39元免运费
?新疆、西藏除外
本类五星书更多>

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元素。标签可以简单地分为双标签和单标签两大类。 双标签与单标签的基本结构 轻松学 双标签 语法:内容。

商品评论(0条)
暂无评论……
书友推荐
本类畅销
编辑推荐
返回顶部
中图网
在线客服