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