描述

开本: 16开纸张: 胶版纸包装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302455257丛书名: 高等学校计算机专业规划教材

编辑推荐

（1）由浅入深、循序渐进地介绍了HTML5、CSS3、JavaScript等前端网页设计技术。（2）图文并茂、通俗易懂，可作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文、理科相关专业或计算机公共基础的“网页开发与设计”、“网页制作”、“Web编程技术”、“Web前端开发技术”等课程教学的教材，也可作为网页设计初学者快速入门的自学读物。

内容简介

本书依据互联网行业对Web前端开发工程师岗位技术与能力的要求，结合作者长期在网页设计教学中积累的经验，由浅入深、循序渐进地介绍了HTML5、CSS3、JavaScript等前端网页设计技术。
全书共分为13章，全面讲述HTML5、CSS3和JavaScript技术。第1～8章重点介绍网页设计的相关概念、HTML5语言基础和网页设计开发工具Sublime Text的使用；第9、10章讲解CSS3样式表与网页布局的相关知识；第11、12章讲述JavaScript语言的相关内容和前台动态页面的制作；第13章讲解HTML5高级应用技术。
本书图文并茂、通俗易懂，可作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文、理科相关专业或计算机公共基础的“网页开发与设计”、“网页制作”、“Web编程技术”、“Web前端开发技术”等课程教学的教材，也可作为网页设计初学者快速入门的自学读物。

目　　录

第1章Internet与Web基础/1

1.1Internet与万维网1

1.1.1Internet的诞生与发展2

1.1.2万维网的诞生2

1.2统一资源标识符和域名3

1.2.1统一资源定位符3

1.2.2域名4

1.3浏览器与服务器5

1.3.1B/S模型5

1.4HTML语言与HTML55

1.4.1HTML语言6

1.4.2HTML的版本——HTML56

1.5Web前端开发相关技术9

1.5.1CSS9

1.5.2JavaScript9

1.6Sublime Text简介10

1.6.1Sublime Text的安装10

1.6.2Sublime Text的使用12

1.7本章小结17

第2章HTML5结构与基础语法/18

2.1HTML5文档结构18

2.1.1文档类型定义19

2.1.2头部内容19

2.1.3主体内容20

2.2HTML5基本语法21

2.2.1标记语法21

2.2.2属性语法22

2.3注释23

2.4编写与命名规范23

2.4.1编写规范23

2.4.2命名规范24

2.5上机练习24

2.6本章小结25

〖1〗HTML5网页设计教程目录[3]〖3〗第3章文字与段落/27

3.1文字内容27

3.1.1标题字27

3.1.2添加空格28

3.1.3添加特殊符号29

3.1.4注释标记30

3.2文字修饰30

3.2.1粗体、斜体、下画线30

3.2.2删除线31

3.2.3上标和下标31

3.2.4设置地址文字32

3.3段落33

3.3.1段落标记33

3.3.2换行标记34

3.3.3居中标记34

3.3.4水平分隔线34

3.3.5预格式化标记35

3.4上机练习36

3.5本章小结37

第4章超链接/39

4.1超链接简介39

4.2创建超链接39

4.2.1相对路径和路径39

4.2.2内部链接41

4.2.3外部链接41

4.3链接对象41

4.3.1文字链接41

4.3.2图片链接42

4.3.3书签链接43

4.3.4电子邮件链接46

4.3.5FTP链接47

4.3.6下载文件链接47

4.4上机练习47

4.5本章小结49

第5章列表/50

5.1列表简介50

5.2无序列表50

5.3有序列表51

5.3.1有序列表及编号样式51

5.3.2编号起始值52

5.3.3列表项编号52

5.4嵌套列表55

5.5定义列表56

5.6上机练习57

5.7本章小结59

第6章多媒体应用/60

6.1图片60

6.1.1图片标记60

6.1.2指定图像的高与宽61

6.1.3指定图像的对齐方式62

6.2音频和视频64

6.2.1视频文件格式64

6.2.2video标签的属性64

6.2.3为视频添加控件和自动播放65

6.2.4为视频指定循环播放和海报图像66

6.2.5阻止视频预加载68

6.2.6音频文件格式68

6.2.7audio标签的属性70

6.2.8自动播放、循环和载入音频70

6.2.9使用多种来源的视频和备用文本72

6.3本章小结74

第7章表格/75

7.1表格标记75

7.1.1表格标题76

7.1.2表格表头78

7.2表格属性79

7.2.1设置表格的边框属性79

7.2.2设置表格的宽度和高度80

7.2.3设置表格的背景颜色80

7.2.4设置表格的背景图像80

7.2.5设置表格单元格间距82

7.2.6设置表格单元格边距83

7.2.7设置表格的水平对齐属性84

7.3设置行的属性86

7.3.1行内容水平对齐86

7.3.2行内容垂直对齐86

7.4设置单元格的属性88

7.4.1设置单元格跨行88

7.4.2设置单元格跨列89

7.5表格嵌套91

7.6上机练习93

第8章表单/95

8.1表单概述95

8.1.1表单的结构95

8.1.2表单的处理96

8.1.3HTML5表单的特性96

8.2表单类型98

8.2.1创建文本框98

8.2.2创建密码框98

8.2.3创建单选按钮100

8.2.4创建复选框101

8.2.5创建提交按钮和重置按钮102

8.2.6创建隐藏字段103

8.2.7创建电子邮件框104

8.2.8搜索框105

8.2.9电话框106

8.2.10网址框107

8.2.11数字框108

8.2.12日历框109

8.3创建文本区域110

8.4创建选择框111

8.5让访问者上传文件112

8.6上机练习113

8.7本章小结114

第9章CSS3基础/115

9.1CSS115

9.1.1CSS简介115

9.1.2从CSS到CSS3115

9.1.3CSS3新特性115

9.2样式表的定义与使用116

9.2.1定义内联样式表116

9.2.2定义内部样式表116

9.2.3链接外部样式表117

9.3定义选择器117

9.3.1按照类型选择元素117

9.3.2按照类选择元素118

9.3.3按照ID选择元素119

9.3.4选择元素的一部分121

9.3.5伪类选择器121

9.4文本与排版样式的使用126

9.4.1长度、百分比单位126

9.4.2文本样式属性127

9.5背景和颜色的使用138

9.5.1设置颜色的方法138

9.5.2设置背景颜色140

9.5.3设置背景图片141

9.6设置超链接样式143

9.7盒子概念与使用145

9.7.1盒子的概念145

9.7.2设置元素外边界145

9.7.3设置元素边框147

9.7.4设置元素内边界149

9.8列表150

9.9上机练习151

9.10本章小结154

第10章CSS3高级应用/155

10.1div元素155

10.2导航栏设计158

10.3动画设计159

10.3.1@keyframes规则159

10.3.22D变形160

10.3.2平滑过渡165

10.3.33D动画167

10.3.4渐变效果171

10.4用户界面177

10.4.1CSS3调整尺寸177

10.4.2CSS3方框大小调整177

10.4.3CSS3外形修饰178

10.5页面布局178

10.5.1多栏布局178

10.5.2盒布局179

10.6上机练习181

10.7本章小结183

第11章JavaScript基础语法/184

11.1JavaScript简介184

11.2JavaScript的使用184

11.2.1将JavaScript插入网页的方法184

11.2.2JavaScript的位置186

11.3JavaScript变量187

11.3.1变量的类型及声明187

11.4JavaScript数据类型188

11.4.1数据类型的相关内容188

11.4.2数据类型189

11.5JavaScript运算符和表达式191

11.5.1表达式191

11.5.2运算符192

11.6JavaScript控制语句196

11.7JavaScript对象和函数201

11.7.1JavaScript对象201

11.7.2JavaScript函数201

11.8JavaScript注释201

11.9上机练习——JavaScript综合实例202

11.10本章小结204

第12章JavaScript面向对象编程/205

12.1内置对象205

12.1.1字符串对象205

12.1.2数学对象207

12.1.3日期对象207

12.1.4数组对象208

12.1.5Boolean对象209

12.2宿主对象209

12.2.1DOM对象的属性和方法209

12.2.2DOM对象的操作212

12.2.3window对象214

12.3常用其他对象215

12.3.1表单对象215

12.3.2Image对象215

12.4事件编程216

12.4.1事件处理216

12.4.2事件驱动217

12.5上机练习——JavaScript综合实例219

12.6本章小结222

第13章HTML5高级应用/223

13.1使用HTML5绘制图形223

13.1.1绘制基本图形224

13.1.2使用moveTo与lineTo绘制直线227

13.1.3使用bezierCurveTo绘制贝塞尔曲线229

13.1.4绘制渐变图形231

13.1.5绘制平移效果的图形234

13.1.6绘制缩放效果的图形235

13.1.7绘制旋转效果的图形236

13.1.8绘制组合效果的图形237

13.1.9绘制带阴影的图形240

13.1.10使用图像241

13.2本地存储243

13.2.1Web存储243

13.2.2使用本地数据库进行本地存储245

13.3离线缓存248

13.3.1建立一个应用缓存248

13.3.2配置manifest文件249

13.3.3更新缓存250

13.4地理位置250

13.4.1地理位置元素的基础知识250

13.5本章小结253

前　　言

序言前言随着HTML5、CSS3和JavaScript技术的广泛应用， Web前端开发者的工作量大大减轻，开发成本不断降低，三者是Web项目开发中非常重要的开发技术。HTML5跨平台的优势使其在未来的技术市场中逐渐发展成为主流开发技术，占据越来越重要的地位。本书以HTML5为主体，搭配CSS3和JavaScript，并且立足于当前网络行业，成为您充实自己实力或踏入网页设计领域的好帮手。1. 本书内容全书共分为13章，各章节主要内容如下: 第1章主要对Internet与Web技术进行概述。包括Internet与万维网、域名、URL等概念，以及开发工具sublime text的安装和使用。第2章介绍HTML5的网页文档结构。包括HTML5文档的基本框架、标记和标记属性等语法，为编写Web程序打下基础。第3章介绍HTML5文档文字与段落的处理，包括文字内容、文字修饰、段落等常用标记。第4章介绍用HTML5建立超链接。包括文字、图片、邮箱的超链接，锚点的使用和相对路径与路径的概念等。第5章介绍用HTML5创建列表。包括无序列表、有序列表、嵌套列表和自定义列表。第6章介绍多媒体的应用。包括图片、音频和视频的应用。第7章介绍用HTML5创建表格。包括表格的常用属性、样式设计、表格嵌套等。第8章介绍使用表单。包括表单概述、表单基本元素的使用和表单的验证方法和属性等。第9章介绍HTML5的高级应用。包括画布、地理位置、Web存储、应用缓存等高级应用技术。第10章介绍CSS3基础。包括CSS3基础语法、选择器、媒体查询等。第11章介绍CSS3的高级应用。包括Div元素、导航栏设计、动画设计等。第12章介绍JavaScript基本语法和内置对象。包括JavaScript简介、数据类型与变量、运算符与表达式、流程控制语句和函数、字符串对象、数学对象、日期对象和数组对象等。第13章介绍JavaScript的对象编程。包括常用对象、DOM操作和事件编程。2. 本书特色 (1) 知识全面，内容丰富。内容由浅入深，涵盖了所有HTML5、CSS3和JavaScript知识点，便于读者全面掌握网页设计技术。(2) 循序渐进，难度适中。知识结构安排合理，把知识点融汇于案例实训中，并且结合经典案例进行讲解和拓展，帮助读者快速入门。(3) 理论与实际紧密结合。书中穿插大量综合案例，帮助读者学习理论知识的同时，更好地结合开发实践，掌握网页设计工作中解决实际问题的方法。(4) 结合工具，高效开发。本书采用Web开发中广泛应用的Sublime Text3开发工具进行讲述，使读者在学习知识的同时，能够熟练高效地使用工具。(5) 配套资源完善。为帮助读者更好地使用本教材进行学习，教材配套相关教学资源，提供免费的图片、代码等相关素材，还特别为教师提供PowerPoint教案，方便教师授课使用。〖1〗HTML5网页设计教程前言[3]〖3〗3. 读者对象本书适合作为高等学校计算机科学与技术、软件工程、信息管理与信息系统、网络工程、物联网工程、信息科学技术、数字媒体技术及其他文、理科相关专业或计算机公共基础的“网页开发与设计”、“网页制作”、“Web编程技术”、“Web前端开发技术”等课程教学的教材，也可作为网页设计初学者快速入门的自学读物。书中大量的示例模拟了真实的网页设计案例，对读者的学习有现实的借鉴意义。 4. 作者团队本书作者孙甲霞、吕莹莹、李学勇等长期从事网页设计课程教学工作。孙甲霞编写第1～3章，吕莹莹编写第4～7章，金松林编写第8～10章，李学勇编写第11～13章，另外，在本书的编写过程中，牛燕尾在素材的整理等工作中也付出了辛勤的劳动，才能使此书和读者见面。在本书的编写过程中，我们力求精益求精，但由于水平有限，书中难免有不足之处，恳请读者谅解。读者如果遇到问题或有意见和建议，敬请与我们联系，我们将全力提供帮助。
编者2017年1月

媒体评论

在线试读

第3章文字与段落文字和段落是网页中重要、常用的元素。学习本章的目的是掌握HTML5文档文字与段落的处理,包括文字内容、文字修饰、段落常用标记。本章重点 掌握HTML5文档中文字内容的处理和修饰 掌握段落格式的设置3.1文字内容网页的内容主要是通过文字来体现的,HTML5中提供了许多与文字相关的标记。3.1.1标题字标题文字标记用来标示页面中的标题文字,被标示的文字将以粗体形式显示。HTML5中对标题文字的大小定义了六级…。

定义的标题。

定义小的标题。它们需要与尾标记一起使用。语法: 标题文字其中align属性用来控制标题文字的对齐方式: left为左对齐(默认方式);center为居中;right为右对齐。…的应用如例31所示。

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5

This is header 6

代码运行结果如图31所示。图31标题字实例演示3.1.2添加空格HTML中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML页面中的空格。如果在文本中写10个空格,在显示该页面之前,浏览器会删除它们中的9个。如需在页面中增加空格的数量,需要使用字符实体。[1]HTML5网页设计教程第3章文字与段落[3][3]添加空格的应用如例32所示。
HTML使用空格符号( )

使用空格缩进两个汉字的位置:

两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。

使用空格缩进四个汉字的位置:

两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。两个空格符号表示一个汉字的位置。

代码运行结果如图32所示。图32空格实例演示3.1.3添加特殊符号在HTML中,某些字符是预留的。在HTML中不能使用小于号(),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,必须在HTML源代码中使用字符实体。字符实体类似这样: &entity_name或者entity_number如需显示小于号,必须写为<或<。HTML中有许多有用的字符实体,如表31所示。续表表31HTML中常用的字符实体显示结果描述实体名称实体编号大于号>>&和号&&”引号””‘撇号 ‘(IE不支持)’￠分¢¢￡镑££￥日圆¥¥§节§§版权©©注册商标®®×乘号××÷除号÷÷提示: 实体名称对大小写敏感! 3.1.4注释标记注释标签用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释,这样做有助于以后对代码的编辑。当编写了大量代码时尤其有用。使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯(这样就不会把脚本显示为纯文本),如下面代码所示。This text is a comment

This is a regular paragraph

3.2文字修饰[4/5]3.2.1粗体、斜体、下画线1. 粗体标签规定粗体文本。 2. 斜体标签显示斜体文本效果。标签和基于内容的样式标签类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下画线等样式。3. 下画线标签定义文档的其余部分之外的插入文本。综合应用如例33所示。

粗体斜体

一打有二十十二件。

代码运行结果如图33所示。图33粗体、斜体、下画线效果演示注意: 标签一定要和结束标签结合起来使用。3.2.2删除线标签定义文档中已删除的文本。3.2.3上标和下标^{标签可定义上标文本。包含在^{标签和其结束标签}中的内容将会以当前文本流中字符高度的一半来显示,但与当前文本流中文字的字体和字号都是一样的。_{标签可定义下标文本。包含在 _{标签和其结束标签} 中的内容将会以当前文本流中字符高度的一半来显示,但与当前文本流中文字的字体和字号都是一样的。上标和下标的应用如例34所示。</p>
<address> 标签</address>
<p>这段文本包含 _下标这段文本包含 ^上标X1 Y2²=15代码运行结果如图34所示。图34上标和下标效果演示提示: 无论是_{标签还是与它对应的^{标签,在数学等式、科学符号和化学公式中都非常有用。3.2.4设置地址文字}}}}

标签定义文档或文章的作者、拥有者的联系信息。如果

元素位于元素内,则表示文档的联系信息。如果

元素位于

元素内,则表示文章的联系信息。

元素中的文本通常呈现为斜体。大多数浏览器会在address元素前后添加折行。设置地址文字的应用如例35所示。</p> <address> 标签</address> <p>

Written by HTML5

Address: Box 564, Disneyland
Phone: 12 34 56 78

代码运行结果如图35所示。图35设置地址文字效果演示提示:

标签不应该用于描述通信地址,除非它是联系信息的一部分。3.3段落[4/5]3.3.1段落标记

…

定义了一个段,是一种块级标记,其结尾标签可以省略。不过在使用浏览器的样式表单时为了避免出现差错,还是建议使用结尾标签。提示: 块级标记是相对于行内标记来讲的,可以换行,而行内标记中的内容默认排列方式是同行排列,直到宽度超出包含它容器宽度时才自动换行。段落标记

的应用如例36所示。

网页标题
这是我的个段落

我是段落内容

第二个段落

3.3.2换行标记使用

标记分段时,在段落之间有一空行。如果不希望出现空行,可以使用
换行标记。当浏览器遇到
标记时会另起一行,中间不插入空行。3.3.3居中标记居中标记

用于对其所包括的文本进行水平居中。居中标记的应用如例37所示。段落居中
这段文字是居中的代码运行结果如图36所示。图36居中标记效果演示3.3.4水平分隔线水平线标记

语法为:

浏览器遇到水平线标记,会在页面上画出一条水平线。水平线可以把页面分成几部分,使页面内容更加清晰醒目。

标记的属性用来控制水平线的样式,常用的属性如表32所示。表32

标记的属性属性功能示例size水平线的粗细,以像素为单位,默认值是1

width水平线的宽度,可以以像素为单位,也可以用对屏幕的百分比表示,默认值为100%

align水平线对齐方式,可取值为: left、center或right,默认值是center

color水平线的颜色

3.3.5预格式化标记

元素可定义预格式化的文本,使HTML文档中的空格、制表符、回车换行符起作用。
元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。常应用于表示计算机的源代码。
元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如

书摘插画

抢先评论了 “HTML5网页设计教程” 取消回复

还没有评论。

HTML5网页设计教程

集成HTML5、CSS3、JavaScript等前端网页设计技术。

作者:孙甲霞、吕莹莹、李学勇、金松林、郑颖出版社:清华大学出版社出版时间:2016年12月

ISBN: 9787302455257

年中特卖用“SALE15”折扣卷全场书籍85折！可与三本88折，六本78折的优惠叠加计算！全球包邮!

描述

定义的标题。

定义小的标题。它们需要与尾标记一起使用。语法: 标题文字其中align属性用来控制标题文字的对齐方式: left为左对齐(默认方式);center为居中;right为右对齐。…的应用如例31所示。

This is header 1