内 容 简 介
本书从初学者的角度出发,以通俗易懂的语言、丰富多彩的案例,详细介绍如何使用HTML、CSS和JavaScript设计直观、漂亮、功能强大的网页。
全书共分为16章,主要内容包括HTML发展历史、开发工具、文档语法、头部内容和主体内容的常用标记、网页注释,文本标记和列表标记,表格设计和表单输入,层和框架,HTML 5中的新增元素、新增表单、文件应用、数据存储对象、本地数据库、Web离线应用、WebWork处理线程、跨文档消息通信、地理位置信息的获取,CSS发展历史、CSS注释、CSS选择器、CSS关键字和字符串,基本单位、字体属性、文本属性、背景属性、边框属性、间隙和填充属性,CSS 3中新增的选择器、颜色和文本属性、边框属性、背景属性、盒布局和多列布局属性、用户界面属性、渐变效果、过渡属性、转换和动画属性,JavaScript历史、数据类型、变量、常用运算符,选择语句、循环语句、break语句、continue语句、return语句、异常处理语句,系统对象、内置函数、自定义对象和函数,以及JavaScript中的正则表达式和事件处理等。在本书最后一章的综合案例中,通过3个完整的案例,演示HTML、CSS和JavaScript的使用。
本书所有的知识点都结合具体的示例进行介绍,涉及到的程序代码都给出了详细的注释,能够使读者轻松领会使用HTML、CSS和JavaScript开发网页的精髓,快速提高开发技能。
本书可供从事网页设计的初学者阅读,也可作为非计算机专业学生的参考资料。
前 言
随着Web 2.0的广泛应用,标准化的设计方式正逐渐取代传统的布局方式,网页开发者必须掌握新知识和新技术。HTML(Hyper Text Markup Language,超文本标记语言)是用来描述网页的一种语言,它提供了一系列的标记来描述网页;CSS(Cascading Style Sheets,层叠样式表)样式定义了如何显示HTML中的标记;JavaScript是世界上最流行的一种轻量级的编程语言,它不仅可用于HTML和Web,还可以广泛用于服务器、PC、笔记本电脑、平板电脑以及智能手机等设备。
HTML + CSS + JavaScript构建网页已经成为标准化的设计方式,它们扮演着各自的角色。HTML是基础架构;CSS是元素格式、页面布局的灵魂;而JavaScript是实现网页的动态性、交互性的点睛之笔。本书将向读者介绍HTML、CSS和JavaScript的相关知识,它们是相对独立的,但是在内容上又是依次递进的。
1. 本书内容
本书共分为16章,主要内容如下。
第1章:HTML基础语法。内容包括HTML概念、发展历史、开发工具、基础语法、注释,以及文本头部和文档主体常用的一些标记等。
第2章:文本标记和列表标记。详细介绍HTML中常用的文本标记和列表标记。另外,还介绍了列表标记的嵌套。
第3章:表格设计和表单输入。包含表格和表单两部分内容。其中表格包括基本语法、常用属性以及如何分组显示等内容;表单包括概念、基本语法以及常用元素等内容。
第4章:层和框架。首先从层的基础知识开始介绍,接着介绍框架的基础知识,然后介绍框架标记和内联框架,最后介绍框架集。
第5章:HTML 5的新增元素。先介绍HTML 5的语法和浏览器兼容情况,然后详细介绍HTML 5中新增加的元素,包括结构元素、语义元素、多媒体元素、绘图元素以及命令元素等。
第6章:HTML 5新增表单及其应用。包括表单和文件两大部分,详细介绍新增的表单属性、表单元素、表单输入类型,与文件有关的multiple属性、file对象、FileReader接口,以及拖拽事件和dataTransfer对象等。
第7章:HTML 5的高级功能。对HTML 5中新增加的一些高级功能进行介绍,例如数据存储对象、本地数据库存储、Web离线应用、WebWork处理线程以及跨文档消息通信和地理位置的获取等。
第8章:CSS基础语法。将向读者介绍CSS的发展历史、特点、注释规范、CSS 2使用的选择器以及如何在网页中插入CSS样式等多个内容。
第9章:CSS的常用属性。着重介绍CSS规范中提供的一些常用属性,包括字体属性、文本属性、背景属性、边框属性以及填充和间距属性等。
第10章:CSS 3的新增属性。向读者介绍CSS 3中新增的一些内容,包括新增选择器、新增颜色和文本属性、新增边框和背景属性、新增盒布局和多列布局属性、用户界面属性,以及过渡、转换、动画和渐变属性等。
第11章:JavaScript基础语法。从JavaScript的概念开始介绍,接着介绍JavaScript的代码位置和注释代码,然后分别介绍JavaScript中常用的数据类型、变量及运算符。
第12章:JavaScript的常用语句。主要介绍流程控制语句和异常处理语句。其中,流程控制语句包括选择语句、循环语句、break语句和continue语句等。
第13章:系统对象和函数。介绍JavaScript的对象和函数,包括对象的组成、对象属性和方法的获取、浏览器对象、内置对象、自定义对象、系统函数以及自定义函数等多个内容。
第14章:正则表达式。从正则表达式的基本内容开始介绍,然后依次介绍其匹配规则、常用的正则表达式、RegExp对象以及支持正则表达式的String对象的方法等多个内容。
第15章:JavaScript的事件处理。着重介绍JavaScript中的事件,包括事件概述、原始事件模型、标准事件模型和IE事件模型等。
第16章:综合案例实践。将HTML、CSS和JavaScript结合起来,实现3个简单的、比较完整的综合案例。这3个案例分别是音乐网页、贪吃蛇游戏和俄罗斯方块游戏。
2. 本书特色
本书中的大量内容来自于实际的开发项目,针对初学者和中级读者量身定做,由浅入深地介绍与HTML、CSS和JavaScript有关的知识。
本书具有以下特色。
(1) 知识全面,内容丰富
本书紧密围绕HTML、CSS和JavaScript中常用的知识点展开讲解,涵盖了实际开发中所遇到的页面标记、高级开发(例如Web离线程序、获取地理位置信息)、样式设计、脚本处理等多种知识点。
(2) 基于理论,注重实践
本书不仅介绍理论知识,而且在合适位置安排综合实验指导或者小型应用程序,将理论知识应用到实践中,以加强读者的实际应用能力,巩固基础知识。
(3) 提供案例,清晰实用
对于大多数的精选案例,都向读者提供了详细步骤,结构清晰简明,分析深入浅出,而且有些程序能够直接在项目中使用,可避免读者进行二次开发。
(4) 配备光盘,利于学习
本书为示例配备了视频教学文件,读者可以通过视频文件更加直观地学习与HTML、CSS和JavaScript有关的技术知识。
(5) 贴心提示,方便周到
为了便于读者阅读,全书还穿插着一些技巧、提示等小贴士,体例约定如下。
提示:通常是一些贴心的提醒,让读者加深印象,或者获得解决问题的方法。
注意:提出学习过程中需要特别注意的一些知识点和内容,或者相关的信息。
技巧:通过简短的文字,指出知识点在应用时的一些小窍门。
3. 读者对象
本书适合作为软件开发入门者的自学用书,也适合作为高等院校相关专业的教学参考书,还可供开发人员查阅和参考。
4. 编写人员
除了本书的封面作者之外,参与本书编写的人员还有侯政云、刘利利、郑志荣、肖进、侯艳书、崔再喜、侯政洪、李海燕、祝红涛、刘俊强等。在本书的编写过程中,我们力求精益求精,但难免存在一些不足之处,恳请广大读者批评指正。
目 录第1章 HTML基础语法 11.1 了解HTML语言 11.1.1 HTML概述 11.1.2 HTML发展历史 21.1.3 HTML编辑器 31.1.4 认识Dreamweaver工具 41.2 HTML的语法 71.2.1 HTML文档 71.2.2 标记语法 71.2.3 属性语法 81.2.4 全局属性 91.3 头部内容 101.3.1 <title>标记 111.3.2 <base>标记 111.3.3 <meta>标记 121.3.4 <style>标记 131.3.5 <script>标记 131.4 主体内容 141.4.1 页面背景 141.4.2 页面边距 141.4.3 段落标记 151.4.4 超链接标记 161.4.5 图像标记 171.4.6 其他常用标记 181.5 为HTML添加注释 221.6 实验指导——显示一篇完整的文章 231.7 习题 24第2章 文本标记和列表标记 262.1 文本标记 262.1.1 <font>标记 262.1.2 <ruby>标记 272.1.3 物理样式标记 282.1.4 逻辑样式标记 282.2 列表标记 292.2.1 列表标记的用途 292.2.2 无序列表 302.2.3 有序列表 312.2.4 解说列表 352.3 列表嵌套 372.3.1 标记自身嵌套 372.3.2 解说列表嵌套无序列表 382.3.3 无序列表嵌套有序列表 382.4 实验指导——实现多层列表嵌套 402.5 习题 41第3章 表格设计和表单输入 433.1 了解表格 433.1.1 表格结构 433.1.2 设置单元格 443.1.3 表格的标题 453.2 表格标记的属性 463.2.1 宽度和高度 463.2.2 背景颜色 473.2.3 边框设置 473.2.4 单元格间距 483.2.5 行内容水平对齐 483.2.6 跨行和跨列 493.2.7 表格的描述 503.3 表格分组显示 503.3.1 按行分组显示 503.3.2 按列分组显示 523.4 实验指导——将表格进行嵌套 543.5 了解表单 563.5.1 表单概述 563.5.2 表单语法 573.6 表单元素 583.6.1 input元素 583.6.2 textarea元素 593.6.3 select元素 603.7 实验指导——设计用户资料修改页面 623.8 习题 65第4章 层和框架 664.1 了解层 664.1.1 div元素 664.1.2 div的属性 674.1.3 并列图层的遮挡 704.2 了解框架 704.2.1 框架概述 704.2.2 框架的结构 724.3 框架标记 744.3.1 frameset元素 744.3.2 noframes元素 744.3.3 frame元素 754.4 实验指导——搭建用户信息管理系统的框架 754.5 内联框架 804.5.1 iframe元素 804.5.2 使用iframe元素 814.6 框架和框架集 834.7 实验指导——使用Dreamweaver创建框架集 834.8 习题 87第5章 HTML 5的新增元素 895.1 了解HTML 5 895.1.1 HTML 5概述 895.1.2 浏览器支持情况 905.1.3 HTML 5的标记方法 915.1.4 HTML 5兼容HTML 925.2 结构元素 945.2.1 header元素 945.2.2 article元素 955.2.3 section元素 975.2.4 nav元素 985.2.5 hgroup元素 985.2.6 footer元素 995.3 语义元素 995.3.1 块级语义元素 1005.3.2 行内语义元素 1015.4 多媒体元素 1035.4.1 多媒体概述 1035.4.2 audio元素 1055.4.3 video元素 1085.4.4 source元素 1105.4.5 判断浏览器的支持情况 1125.5 绘图元素 1135.5.1 canvas元素 1135.5.2 使用canvas元素 1145.6 HTML 5的其他新增元素 1155.6.1 其他新增元素 1155.6.2 details元素 1165.6.3 command元素 1175.6.4 track元素 1185.7 实验指导——用HTML 5的新增元素构建网页 1185.8 习题 123第6章 HTML 5新增表单及其应用 1256.1 新增的表单属性 1256.2 新增的表单元素 1266.2.1 datalist元素 1266.2.2 keygen元素 1276.2.3 output元素 1286.3 新增输入类型 1296.3.1 search类型 1296.3.2 email类型 1306.3.3 url类型 1316.3.4 datepicker类型 1326.3.5 number类型 1336.3.6 range类型 1346.3.7 color类型 1356.3.8 tel类型 1366.4 实验指导——个人用户信息注册 1376.5 文件上传操作 1396.5.1 multiple属性 1406.5.2 file对象 1416.5.3 FileReader接口 1426.6 实验指导——用FileReader对象读取文件 1456.7 文件拖拽功能 1486.7.1 拖拽事件 1486.7.2 dataTransfer对象 1486.8 习题 152第7章 HTML 5实现高级功能 1547.1 数据存储对象 1547.1.1 localStorage对象 1547.1.2 sessionStorage对象 1587.2 本地数据库 1607.2.1 打开和创建数据库 1607.2.2 事务处理方法 1617.2.3 执行数据操作 1627.3 实验指导——用本地数据库保存和读取数据 1637.4 Web离线应用程序 1677.4.1 缓存清单 1677.4.2 本地缓存对象 1697.5 Web Worker处理线程 1707.5.1 创建Worker对象 1707.5.2 使用Worker对象 1717.6 跨文档消息通信 1737.7 获取地理位置信息 1757.7.1 Geolocation API概述 1757.7.2 position对象概述 1777.8 实验指导——利用Google地图显示当前位置 1797.9 习题 182第8章 CSS基础语法 1848.1 了解CSS 1848.1.1 CSS概述 1848.1.2 CSS发展简史 1868.1.3 使用CSS的好处 1868.1.4 CSS注释 1868.2 在网页中插入CSS样式表 1878.2.1 内联样式 1878.2.2 嵌入样式 1888.2.3 外部引用样式 1898.3 CSS选择器 1928.3.1 元素选择器 1928.3.2 类选择器 1938.3.3 ID选择器 1948.3.4 属性选择器 1948.3.5 伪元素和伪类 1968.3.6 其他选择器 1988.4 关键字和字符串 2008.4.1 关键字 2008.4.2 字符串 2008.5 实验指导——HTML和CSS构建网页 2018.6 习题 204第9章 CSS的常用属性 2069.1 基本单位 2069.1.1 颜色 2069.1.2 长度 2089.1.3 百分比值 2099.2 字体属性 2099.2.1 font-family属性 2099.2.2 font-size属性 2109.2.3 font-style属性 2129.2.4 font-weight属性 2129.2.5 font属性 2139.3 文本属性 2149.3.1 letter-spacing属性 2149.3.2 word-spacing属性 2159.3.3 text-decoration属性 2159.3.4 text-align属性 2169.3.5 text-indent属性 2179.3.6 text-transform属性 2179.3.7 其他常用属性 2189.4 背景属性 2199.4.1 background-color属性 2199.4.2 background-image属性 2209.4.3 background-repeat属性 2219.4.4 background-position属性 2239.4.5 background-attachment属性 2239.4.6 background属性 2249.5 边框属性 2249.5.1 border-style属性 2259.5.2 border-width属性 2279.5.3 border-color属性 2289.5.4 border属性 2299.6 间隙和填充 2309.6.1 间隙属性 2309.6.2 填充属性 2329.7 实验指导——设置文章页面的内容 2339.8 习题 235第10章 CSS 3的新增属性 23610.1 新增的选择器 23610.1.1 属性选择器 23610.1.2 常用的伪类选择器 23810.1.3 UI元素状态伪类选择器 24110.1.4 通用兄弟选择器 24210.2 新增的颜色和文本 24210.2.1 颜色单位 24210.2.2 文本属性 24410.2.3 @font-face规则 24610.3 新增边框和背景 24810.3.1 边框属性 24810.3.2 背景属性 25110.4 新增的盒布局和多列布局 25410.4.1 盒布局属性 25410.4.2 多列类布局属性 25710.5 用户界面属性 25910.6 其他高级属性 26110.6.1 渐变的实现 26210.6.2 新增的过渡 26410.6.3 新增的转换 26610.6.4 新增的动画 26810.7 实验指导——设计直观大方的表单 27010.8 习题 273第11章 JavaScript基础语法 27511.1 了解JavaScript 27511.1.1 JavaScript概述 27511.1.2 JavaScript代码的位置 27611.1.3 JavaScript注释代码 27811.1.4 编写JavaScript程序 27811.2 数据类型和变量 27911.2.1 数据类型 27911.2.2 变量 28111.3 常用运算符 28211.3.1 算术运算符 28211.3.2 赋值运算符 28411.3.3 比较运算符 28511.3.4 逻辑运算符 28511.3.5 字符串运算符 28711.3.6 位操作运算符 28711.3.7 三元运算符 28811.4 实验指导——字符围绕鼠标动态改变 28811.5 习题 290第12章 JavaScript的常用语句 29312.1 顺序语句 29312.2 选择语句 29312.2.1 基本的if语句 29412.2.2 if else语句 29412.2.3 if else if else语句 29512.2.4 if语句的嵌套 29712.2.5 switch语句 29812.3 循环语句 30012.3.1 for语句 30012.3.2 for in语句 30112.3.3 while语句 30212.3.4 do while语句 30312.4 其他语句 30312.4.1 break语句 30312.4.2 continue语句 30412.4.3 return语句 30512.4.4 with语句 30612.5 异常处理语句 30612.5.1 try catch语句 30612.5.2 try catch finally语句 30812.6 实验指导——计算器 30812.7 习题 310第13章 系统对象和函数 31313.1 对象概述 31313.1.1 对象的组成 31313.1.2 获取对象的属性 31413.1.3 引用对象方法 31413.2 浏览器对象 31413.2.1 window对象 31513.2.2 navigator对象 31713.2.3 document对象 31813.2.4 location对象 32113.2.5 history对象 32213.2.6 screen对象 32213.3 内置对象 32313.3.1 String对象 32313.3.2 Array对象 32513.3.3 Date对象 32813.3.4 Math对象 33013.4 自定义对象 33213.5 系统函数 33313.6 自定义函数 33413.6.1 函数语法 33413.6.2 调用函数 33513.6.3 全局变量和局部变量 33513.6.4 动态函数 33613.7 实验指导——创建日历生成器 33713.8 习题 342第14章 正则表达式 34314.1 正则表达式概述 34314.2 匹配规则 34414.2.1 定位符 34414.2.2 限定符 34514.2.3 选择匹配符 34614.2.4 字符匹配符 34614.2.5 原义字符 34714.2.6 特殊字符 34814.2.7 其他匹配符 34814.3 常用的正则表达式 34914.3.1 匹配特定数字 35014.3.2 匹配特定字符串 35014.3.3 匹配其他内容 35014.4 RegExp对象 35214.4.1 创建RegExp对象 35214.4.2 属性和方法 35214.5 实验指导——验证手机号码和电话号码 35314.6 实验指导——验证IP地址是否合法 35614.7 支持正则表达式的String对象的方法 35914.7.1 search()方法 35914.7.2 match()方法 36014.7.3 replace()方法 36014.7.4 split()方法 36214.8 习题 362第15章 JavaScript的事件处理 36415.1 事件概述 36415.1.1 事件简介 36415.1.2 指定事件 36515.2 原始事件模型 36615.2.1 事件类型 36615.2.2 事件处理 36815.2.3 使用事件返回值 36915.2.4 使用this关键字 37115.3 标准事件模型 37215.3.1 事件传播 37215.3.2 注册事件处理程序 37315.3.3 事件的模块和类型 37415.3.4 常用接口概述 37515.4 实验指导——实现视频的多种操作 37715.5 IE事件模型 38115.5.1 IE Event对象 38115.5.2 IE的事件传播 38215.6 习题 382第16章 综合案例实践 38416.1 设计音乐网页 38416.1.1 网页效果 38416.1.2 设计头部区域 38616.1.3 实现主体内容 38916.2 贪吃蛇游戏 39416.2.1 设计页面 39416.2.2 JavaScript代码 39516.3 俄罗斯方块游戏 40416.3.1 了解俄罗斯方块游戏 40416.3.2 设计页面代码 40416.3.3 JavaScript脚本实现 406