网志栈编辑推荐
暂无
内容简介
贺春雷编著的这本《HTML+CSS+JavaScript网页 设计简明教程》从初学者的角度出发，以通俗易懂的 语言、丰富多彩的案例，详细介绍如何使用HTML、 CSS和JavaScript设计直观、漂亮、功能强大的网页 。
全书共分为16章，主要内容包括HTML发展历史、 开发工具、文档语法、头部内容和主体内容的常用标 记、网页注释，文本标记和列表标记，表格设计和表 单输入，层和框架，HTML 5中的新增元素、新增表单 、文件应用、数据存储对象、本地数据库、Web离线 应用、WebWork处理线程、跨文档消息通信、地理位 置信息的获取，CSS发展历史、CSS注释、CSS选择器 、CSS关键字和字符串，基本单位、字体属性、文本 属性、背景属性、边框属性、间隙和填充属性，CSS 3中新增的选择器、颜色和文本属性、边框属性、背 景属性、盒布局和多列布局属性、用户界面属性、渐 变效果、过渡属性、转换和动画属性，JavaScript历 史、数据类型、变量、常用运算符，选择语句、循环 语句、break语句、continue语句、return语句、异 常处理语句，系统对象、内置函数、自定义对象和函 数，以及JavaScript中的正则表达式和事件处理等。
在本书最后一章的综合案例中，通过3个完整的案例 ，演示HTML、CSS和JavaScript的使用。
作者简介
暂无
目录
第1章HTML基础语法
1.1了解HTML语言
1.1.1HTML概述
1.1.2HTML发展历史
1.1.3HTML编辑器
1.1.4认识Dreamweaver工具
1.2HTML的语法
1.2.1HTML文档
1.2.2标记语法
1.2.3属性语法
1.2.4全局属性
1.3头部内容
1.3.1＜title＞标记
1.3.2＜base＞标记
l3.3＜meta＞标记
1.3.4＜style＞标记
1.3.5＜script＞标记
1.4主体内容
1.4.1页面背景
1.4.2页面边距
1.4.3段落标记
1.4.4超链接标记
1.4.5图像标记
1.4.6其他常用标记
1.5为HTML添加注释
1.6实验指导——显示一篇完整的文章
1.7习题
第2章文本标记和列表标记
2.1文本标记
2.1.1＜font＞标记
2.1.2＜ruby＞标记
2.1.3物理样式标记
2.1.4逻辑样式标记
2.2列表标记
2.2.1列表标记的用途
2.2.2无序列表
2.2.3有序列表
2.2.4解说列表
2.3列表嵌套
2.3.1标记自身嵌套
2.3.2解说列表嵌套无序列表
2.3.3无序列表嵌套有序列表
2.4实验指导——实现多层列表嵌套
2.5习题
第3章表格设计和表单输入
3.1了解表格
3.1.1表格结构
3.1.2设置单元格
3.1.3表格的标题
3.2表格标记的属性
3.2.1宽度和高度
3.2.2背景颜色
3.2.3边框设置
3.2.4单元格间距
3.2.5行内容水平对齐
3.2.6跨行和跨列
3.2.7表格的描述
3.3表格分组显示
3.3.1按行分组显示
3.3.2按列分组显示
3.4实验指导——将表格进行嵌套
3.5了解表单
3.5.1表单概述
3.5.2表单语法
3.6表单元素
3.6.1input元素
3.6.2textarea元素
3.6.3select元素
3.7实验指导——设计用户资料修改页面
3.8习题
第4章层和框架
4.1了解层
4.1.1div元素
4.1.2div的属性
4.1.3并列图层的遮挡
4.2了解框架
4.2.1框架概述
4.2.2框架的结构
4.3框架标记
4.3.1frameset元素
4.3.2noframes元素
4.3.3frame元素
4.4实验指导——搭建用户信息管理系统的框架
4.5内联框架
4.5.1iframe元素
4.5.2使用iframe元素
4.6框架和框架集
4.7实验指导——使用Dreamweaver创建框架集
……
第5章HTML5的新增元素
第6章HTML5新增表单及其应用
第7章HTML5实现高级功能
第8章CSS基础语法
第9章CSS的常用属性
第10章CSS3的新增属性
第11章JavaScript基础语法
第12章JavaScript的常用语句
第13章系统对象和函数
第14章正则表达式
第15章JavaScript的事件处理
第16章综合案例实践
前沿
前 言
随着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. 编写人员
除了本书的封面作者之外，参与本书编写的人员还有侯政云、刘利利、郑志荣、肖进、侯艳书、崔再喜、侯政洪、李海燕、祝红涛、刘俊强等。在本书的编写过程中，我们力求精益求精，但难免存在一些不足之处，恳请广大读者批评指正。
免费在线读
第2章 ；文本标记和列表标记
在HTML中，可以使用文本标记、段落标记和列表标记等对文本进行各种各样的格式化工作，它们都是文本级的标记，不仅可以应用于一段文本，也可以应用于文本中的单个字符。在第1章中已经介绍了常用的段落标记，本章将向读者介绍HTML中常用的文本标记和列表标记。
通过本章的学习，读者不仅可以掌握常用的标记和标记，也可以了解文本修饰标记，还可以掌握HMTL中列表标记的使用。
本章学习目标如下：
l ； 掌握标记的使用。
l ； 了解标记的使用。
l ； 熟悉常用的物理样式标记。
l ； 熟悉常用的逻辑样式标记。
l ； 掌握如何实现无序列表。
l ； 掌握如何实现有序列表。
l ； 熟悉如何实现解说列表。
l ； 掌握不同列表之间的嵌套。
2.1 ；文 本 标 记
文本标记用于HTML网页正文内容的文本部分，这些文本标记被用于引用、定义、强调文本/段落/行等文本模块。通过使用这些文本标记，可以使网页中的文本显示不同的样式，从而吸引浏览者注意到该文本的内容。
下面将简单了解常用的文本标记。
2.1.1 ；标记
标记指定文本的字体、字体尺寸和字体颜色等内容。
标记并不被推荐使用，但是该标记在Web上的使用还是非常广泛的。如今，一些流行的网页制作工具仍然能生成包含标记的代码。W3C推荐使用CSS代替标记来格式化文本。
标记的基本格式如下：
；
属性="属性值">；
；
标记中包含多个属性，其常用属性及其说明如表2-1所示。
表2-1 ；标记的常用属性
属性名称
属性取值
说 ；明
size
0~7
设置文本的字体大小，数字越大，文本字体显示得越大。如果在数字的前面加上“+”，则代表比预设的字体大小还大几级；如果是加上“-”，则代表比预设的文字大小还小几级。通常情况下，默认值是3，可以使用来设置该值的大小
color
十六进制或英文名称
设置文本的颜色
face
字体名称
设置文本采用的字体名称
；
【例2-1】
下面来演示标记及其属性的使用方法：
；
标记size属性值前加上-
标记size属性值前加上+
标记的默认显示
标记的size属性值设置为5
； 设置size、color和face属性
设置size、color和face属性
；
在浏览器中运行上述代码，查看效果，如图2-1所示。
将文本显示为粗体
将文本设置为斜体
为文本添加删除线(建议使用标记来代替)
设置为电报字体
为文本添加下划线
将文本变小，低于基线显示
将文本变大，高于基线显示
将文本显示为比正常字体小
将文本显示为比正常字体大
；
【例2-3】
本例使用表2-2中的物理样式标记演示效果。实现代码如下：
；
总是向你索取 却不曾说谢谢你直到长大以后 才懂得你不容易每次离开总是 装作轻松的样子微笑着说回去吧 转身泪湿眼底多想和从前一样 牵你温暖手掌可是你不在我身旁 托清风捎去安康时光时光慢些吧 不要再让你变老了我愿用我一切 换你岁月长留一生要强的爸爸 我能为你做些什么
；
在浏览器中运行上述代码，查看效果，如图2-2所示。
图2-2 ；物理样式标记的效果
2.1.4 ；逻辑样式标记
逻辑样式标记通常会被称为短语元素或语义字符控制标记，用来标明窗口标记中文本的逻辑样式。逻辑样式标记可以增加HTML文件的可读性，在文本显示功能方面与物理样式标记没有什么不同，都是用来强调某些文本的显示。不同的浏览器对这些样式标记的体现可能会有所不同，表2-3中列出了一些常用的逻辑样式标记，并且对这些标记进行了简单说明。
表2-3 ；常用的逻辑样式标记
标 ；记
说 ；明
表示缩写字
表示地址
设置一段被引用的文本
标记文本是引用或引言，通常以斜体表示
标记文本是程序代码，通常使用等宽字体表示
标记文本是词汇或术语的定义，通常以斜体显示
使文本区别于其他文本强调显示，通常以斜体显示
标记要用户输入的文本，通常用等宽字体表示
使文本强调或突出于周围文本，通常加粗显示
标记是程序输出的文本，通常用等宽字体显示
标识并显示变量或输出程序，通常以斜体显示
；
* 提示： ；在如表2-3所示的逻辑样式标记中，部分标记(例如)是HTML 5中新增的标记，在后面的章节中会详细介绍。另外，本节不再对上述表中的标记一一举例说明，感兴趣的读者可以自己进行尝试。
2.2 ；列 表 标 记
使用HTML可以方便地创建列表形式来呈现文本内容，列表项目是以项目符号开始的，这样有利于将不同的内容分类呈现，并且体现出重点。使用HTML也可以设置编号样式、重置计数，或者设置个别列表项目或整个列表项目的符号样式选项。
本节将向读者介绍HTML中常用的列表标记，在介绍这些标记之前，会对列表标记进行说明。
2.2.1 ；列表标记的用途
许多信息数据本身就具有条理，信息数据之间还具有层次性，有些甚至还有顺序。例如电视节目单、图书目录和每周的工作记录等。通常情况下，可以使用一种有条理的样式来排版这样的信息，并给每一个信息数据项配备一个项目符号或者编号，使其能反映信息本身所具有的那种条理性，或称为层次性、有序性等，这就是通常所说的清单或列表。
HTML为Web程序设计者提供了指定信息清单的多个机制，在HTML中，所有的列表必须包含一个或多个列表项，HTML列表可以用来容纳下列信息：
l ； 有条理但无序的信息。
l ； 有序信息。
l ； 一系列的定义说明性信息。
l ； 有层次的信息。
HTML的列表标记便于创建包含上述信息的网页，列表标记在HTML文档中的编码很容易，并且它们可以被嵌套。
HTML有三种形式的列表：无序列表、有序列表和解说列表(即定义列表)。
2.2.2 ；无序列表
当一些信息相互之间有条理但是没有顺序时，可以使用无序列表来容纳这些信息。简单地说，无序列表不用数字标记每个列表项，而采用一个符号标记每个列表项，例如黑色的圆点。
在HTML中，使用
来实现无序列表，每个列表项由
标记实现，该标记的结束标记并不是必需的。基本格式如下：
；
第一个无序列表项
第二个无序列表项
第三个无序列表项
；
在上述格式中，li元素显示列表项，通常情况下列表项不能只有一项，而是有许多项。另外，ul元素中只能包含li元素，而不能包含其他的内容。
【例2-4】
在每周工作之前，李萍女士都会为自己制订一个详细的计划，而且会把每周重要的事情记录下来。本例通过无序列表标记显示她所记录的列表项，代码如下：
；
本周任务计划
去书店买本书：《世间曾有三毛》
去逛街：给爸爸妈妈买衣服
周六早上9点钟要去见客户
周日带着乐乐去公园画画
；
在浏览器中运行上述代码，查看无序列表的效果，如图2-3所示。
图2-3 ；无序列表的效果
type属性是
标记的常用属性，该属性用于定义显示的项目符号，如表2-4所示。
表2-4 ；type属性的取值
属性取值
说 ；明
disc
默认值，项目符号是实心圆点
circle
项目符号是空心圆点
square
项目符号是实心方块
；
【例2-5】
在例2-4代码的基础上进行添加，再添加两个无序列表标记，并且将type属性的值分别指定为circle和square。代码如下：
；
本周上榜图书
《花非花 雾非雾》
《黑道皇后》
随遇而安
友情链接
购书指南
账户管理
配送方式
；
运行上述代码，查看无序列表效果，如图2-4所示。
图2-4 ；使用
标记的type属性
2.2.3 ；有序列表
当一些信息相互之间有顺序时，可以使用HTML的有序列表来容纳这些信息。有序列表中的每个列表项前标有数字，表示顺序。有序列表由
实现，每个列表项由
标记开始。基本格式如下：
；
第一个有序列表项
第二个有序列表项
第三个有序列表项
；
【例2-6】
下面代码演示了一段有序列表：
；
销售图书排名
《随遇而安》
《看见》
《唯爱与美食不可辜负》
；
在浏览器中运行上述代码，查看效果，如图2-5所示。
图2-5 ；有序列表的效果
1．有序列表的type属性
有序列表在浏览器中显示时将为每一个列表项编号(如图2-5所示)，默认值从1开始连续编号。用户可以选择其他的项目符号类型，与无序列表一样，有序列表的项目符号通过type属性进行控制，该属性的值及其说明如表2-5所示。
表2-5 ；type属性的取值
属性取值
说 ；明
1
默认值，项目符号是以阿拉伯数字1、2、3、4...来表示的
A
项目符号是以大写字母A、B、C、D...来表示的
a
项目符号是以小写字母a、b、c、d...来表示的
I
项目符号是以大写罗马I、II、III...来表示的
i
项目符号是以小写罗马i、ii、iii...来表示的
；
【例2-7】
在前面示例的基础上添加有序列表的实现代码，分别将type属性的值设置为I和B。代码如下：
；
成功的三要素
坚持
不要脸
坚持不要脸
你想去哪里？
北京
深圳
上海
；
在浏览器中运行上述代码，查看效果，如图2-6所示。
图2-6 ；
标记的type属性
2．有序列表的start属性
标记除了常用的type属性外，还包含一个start属性，该属性用来定义一个有序列表中的开始的条目序号，默认的开始序号为1。基本格式如下：
；
；
【例2-8】
本例演示
标记的基本使用，并且除了为该标记指定type属性的值外，还需要指定start属性的值。代码如下：
；
销售图书排名
《随遇而安》
《看见》
《唯爱与美食不可辜负》
；
将
标记的start属性值设置为3以后，该列表中的项目序号就不再从1开始了，而是从3开始。在浏览器中的运行效果如图2-7所示。
图2-7 ；使用start属性
3．有序列表内容反转
在HTML 5中新增加了一个reversed属性，该属性用来表示有序列表是否反转序号显示，即按照降序显示序号。reversed属性的值是一个表示真(true)或假(false)的逻辑值，设置为true时，表示反转序号显示。
【例2-9】
在例2-8的基础上进行更改，为
标记添加reversed属性，并将该属性的值指定为true。代码如下：
；
销售图书排名
《随遇而安》
《看见》
《唯爱与美食不可辜负》
；
上述代码中将start属性的值设置为1，这时反转序号时会自动将序号减1。另外，由于reversed属性是HTML 5中新增的，部分浏览器并不提供对该属性的支持，因此，这些浏览器中可能不会显示效果。图2-8显示了在谷歌浏览器中的反转效果，从该图中可以看出，列表序号分别为1、0和-1。
图2-8 ；使用reversed属性的效果
4．指定列表项序号的数值
在有序列表中，不可能从一个先前的列表来继续列表编号或者隐藏对一些列表项的编号。但是可以通过设置列表项的value属性来对列表项的编号复位，编号以新的起始来继续后面的列表项。
value属性仅仅适用于
标记，属性的值用来指定当前列表项的序号，例2-10显示了value属性的基本使用。
【例2-10】
在本例中定义一个有序列表，并且在第3个列表项中直接将value属性的值指定为5，不显示第3个和第4个列表项。代码如下：
；
我最喜欢的老歌
张韶涵《隐形的翅膀》
张雨生《我的未来不是梦》
动力火车《雨蝶》
蔡依林《特务J》
；
在浏览器中运行上述代码，查看效果，如图2-9所示。
图2-9 ；为列表项指定序号
HTML+CSS+JavaScript网页设计简明教程 配光盘 高等学校应用型特色规划教材 pdf下载声明
本pdf资料下载仅供个人学习和研究使用，不能用于商业用途，请在下载后24小时内删除。如果喜欢，请购买正版
