表格的灵活应用

Cellpadding和Cellspacing属性

Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的意思是单元格间距，指的是单元格之间的距离。

案例2-1：表格的样式

表单

表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。

表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序(例如CGI，ASP，PHP，JSP等)进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。

表单头及其属性

表单中常用控件

在常用的表单制作过程中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。

块级元素

预排版标记

包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。

设计网页框架

使用框架

一般在工程应用中，都是由三个页面组成的框架组合，分成上框架，右框架和左框架

CSS编程技术

CSS(Cascading Style Sheets)中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术

1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。

CSS概述

简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。

CSS样式规则组成为：选择符 { 属性: 值 }，单一选择符的复合样式声明应该用分号隔开，如：选择符 { 属性1: 值1; 属性2: 值2 }。

使用CSS

加载CSS样式的三种方式

使用CSS来格式化网页，共有三种方式：

在HEAD中引用

在BODY中引用

作为文件来引用

HEAD内引用

BODY内引用

文件外引用

文件外导入

CSS与标记对应的三种方式

标记选择符

任何HTML元素都可以是一个CSS的选择符。上面所有的样式表都是采用标记选择符引入的。例如：P { BACKGROUND:YELLOW;}，这里用的标记选择符是P。

类选择符

在STYLE标记定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式

ID选择符

定义ID选择符时，在样式名之前加“#名字”，引用的时候使用“ID=名字”。

定义超级链接样式

可以指定A标记以不同的方式显示。

一个超级链接有几种不同的状态：

未被访问链接(Link)

已访问链接(Visited)

鼠标移动过(Hover)

可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“TEXT-DECORATION:NONE”将超级链接的下划线去掉。

定义超级链接样式

JavaScript编程技术

JavaScript是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器Internet Explore(IE)才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。

JavaScript是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系统，所以说它是独立于操作平台的。JavaScript 1.0最初是在Netscape Navigator 2.0及Netscape LiveWire 1.0上实现的，目前JavaScript的版本是JavaScript 1.2。

从本质上说JavaScript和Java没有什么联系，但是同时作为语言，可以从三个角度来区别。

(1)JavaScript是解释型的语言，当程序执行的时候，浏览器一边解释一边执行。而Java是编译型的语言，必须经过编译才能执行。

(2)代码格式不一样，Java代码经过编译后成为二进制文件，而JavaScript是纯文本的文件。

(3)在HTML中的嵌入方式不一样。Java可以通过小应用程序嵌入HTML文件，而JavaScript可直接写入一个文本文件或HTML文件中。

网页中引入JavaScript

变量与数组

变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。

JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“var strUserName;”。

变量

变量命名需要遵守以下六个规则

(1)变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。

(2)变量名长度在0～255字符之间。

(3)除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。

(4)不可以使用JavaScript的运算符号，例如：+，–，＊，／等。

(5)不可以使用JavaScript用到的保留字，例如：sqrt(开方)，parseInt(转换成整型)等。

(6)在JavaScript中，变量名大小写是有所区别的，例如：变量s12和S12是不同的两个变量。

声明数组

用new和Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象

由于JavaScript区分大小写，所以Array的首字母必须是大写。

使用数组

表达式与运算符

程序主要功能是运算，例如加、减、乘、除等基本操作。

算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，

逻辑运算符

逻辑运算符包括：与运算符“&&”、或运算符“||”和取反运算符“！”

字符串运算符的使用方法

条件表达式

控制语句之条件语句

JavaScript提供的语句可以分为以下4大类。

(1)条件和分支语句：If…else语句，switch语句。

(2)循环语句：for语句，do…while语句， break语句和continue语句。

(3)对象操作语句：new，this和with。

(4)注释语句：“//”或“/*   */”。

if语句

switch语句

流控制语句之循环语句

循环语句包括：for语句、while语句，循环控制转移语句continue和break语句。

for语句的基本语法如下。

for (初始化部分；条件部分；更新部分)

{

语句块

}

for 语句

while 语句

break语句

continue语句

JavaScript函数

函数在定义时并没有被执行，只有函数被调用时，其中的代码才真正被执行。为了实现函数的定义和调用，JavaScript语句提供了两个关键字：function和return。JavaScript函数的基本语法如下：

function 函数名称(参数表)

{

语句块;

}

函数定义和调用

案例名称：函数定义和调用

程序名称：2-37.htm

function getSqrt(iNum)

{

var iTemp = iNum * iNum;

document.write(iTemp);

}

getSqrt(8);

函数的返回值

事件的概念

JavaScript事件主要包括三大类的事件：超级连接事件，浏览器事件和界面事件。

界面事件包括：

Click(单击)

MouseOut(鼠标移出)

MouseOver(鼠标移过)

MouseDown(鼠标按下)等。

单击事件

下拉列表

下拉列表是常用的一种网页元素，一般利用ONCHANGE事件来处理。

动态按钮

当鼠标移动到按钮上的时候，按钮就会凸起来。这通过JavaScript的事件实现起来非常方便。

首先必须准备两张图片，当鼠标移上去的时候，自动切换成另一张图片就可以了

动态按钮

对象处理语句

for…in语句

with语句

JavaScript内置对象

内置对象都有自己的方法和属性，访问属性的语法是：“对象名.属性名称”。

访问方法的语法是：“对象名.方法名称(参数表)”。所谓的方法就是一个普通的函数被封装到一个对象中

使用时间对象

案例名称：使用时间对象

程序名称：2-44.htm

var curr=new Date();

document.write("今天是");

switch(curr.getDay()){

case 0:document.write("周日,休息了！");break;

case 1:document.write("周一,需要工作！");break;

case 2:document.write("周二,需要工作！");break;

case 3:document.write("周三,需要工作！");break;

case 4:document.write("周四,需要工作！");break;

case 5:document.write("周五,需要工作！");break;

case 6:document.write("周六,休息了！");break;

}

网页时钟

Math对象

String对象

一般利用String对象提供的函数来处理字符串。String对字符串的处理主要提供了下列方法。

(1)charAt(idx)：第一个字符位置是“0”，返回指定位置处的字符。

(2)indexOf(Chr)：返回指定子字符串的位置，从左到右，找不到返回–1。

(3)lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回–1。

(4)toLowerCase()：将字符串中的字符全部转化成小写。

(5)toUpperCase()：将字符串中的字符全部转化成大写。

String对象

案例2-5：字符串扫描统计

JavaScript的常用函数

介绍几个常用的函数：

eval()函数

parseInt()函数

parseFloat函数。

使用eval()函数

parseInt()函数和parseFloat()函数

parseInt()函数功能是从一个字符串中提出一个整数，如果遇到字符串中除了数字以外的字符，parseInt()就停止转换，返回已有的结果。

如果第一个字符不是数字，parseInt()就返回“NaN”值。ParseFloat()函数和parseInt()函数相似，区别parseFloat()可以提取小数。

parseInt函数和parseFloat函数

案例名称：使用parseInt函数和parseFloat函数

程序名称：2-48.htm

var a = parseInt("123China");

var b = parseFloat("123.12China");

document.write (a + "
");

document.write (b);

对象层次及DOM模型

DOM

DOM(Document Object Model)是文档对象模型的缩写，文档对象模型提供了文档的定位模型。

使用window对象

function new_win()

{

window.open("new.htm","my","toolbar=no, left=150, top=200, menubar=no, width=150,height=150");

}

使用location属性

案例名称：使用location属性

程序名称：2-51.htm

function test_location()

{

window.location="new.htm";

}

History对象

案例名称：使用History对象

程序名称：2-52.htm

function goforward()

{

history.go(1);

}

function goback()

{

history.go(-1)

}

Web应用经典案例研究

在Web应用开发中有一些关键的动态编程技术，下面六种最常用的关键技术：

动态表格

常用的网页对话框

动态网页框架

表单验证

程序控制Form表单

在页面中执行客户端的可执行文件

动态表格彻底研究

对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。

表格的动态选中

三种网页对话框

在Web应用开发中，有三种形式的网页对话框：

1、使用window.open打开的网页

2、使用Web模式对话框

3、使用Web非模式对话框

动态网页框架彻底研究

可以象对普通Windows窗口一样操作网页框架，可以最大化窗口页可以最小化窗口，

表单验证

常用的表单验证有两种方式

第一种是利用onsubmit事件实现验证

第二种是利用普通按钮实现验证

程序控制Form表单

执行客户端的可执行文件

小结

本章首先介绍HTML的发展历史

然后介绍HTML的基本框架

详细介绍了HTML的各种常用标记：文字标记、图片标记、超级链接标记，等等

介绍CSS的基本使用方法，如何让CSS与HTML协同工作

介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句

JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用

本章习题

2-1. 如何在网页中设置字体？有哪些字体可以使用？

2-2. 如何引入一张图片？如何给图片加上边框？

2-3. 如何使用超级链接？如何将超级链接的下划线去掉？

2-4. 如何定义跨行的表格？如何将表格的字体和边框的距离加大？

2-5. 框架有几种基本形式？如何使用？

2-6. 加载CSS样式的方式有哪些？如何使用？

2-7. 编写E-mail注册的表单。(上机练习)

2-8. 编写程序统计1到50中所有偶数的和。(分别用for和while语句实现)

2-9. 编写程序实现：取系统时间，如果时间在6:00－12:00之间，输出“早上好”；如果时间在12:00－18:00，输出“下午好”；如果时间在18:00－24:00之间，输出“晚上好”；如果时间在0:00－6:00，输出“凌晨好”。

2-10. 在字符串“I am a girl, I like dancing!”的每个字符之间加上一个字符“#”，输出字符为：“I# #a#m# #a# #girl#,# #I# #like# #d#a#n#c#i#n#g#!”，并统计“#”的个数。

相关PPT

HTML5基础培训ppt课件：这是HTML5基础培训ppt课件下载，主要介绍了什么是HTML5；HTML5新特性和那些效果；HTML5目前存在的应用局限；开放讨论：HTML5适合应用于我们哪些项目，欢迎点击下载。

HTML5基础培训ppt课件幻灯片：这是HTML5基础培训ppt课件幻灯片下载，主要介绍了什么是HTML5；HTML5新特性和那些效果；HTML5目前存在的应用局限；开放讨论：HTML5适合应用于我们哪些项目，欢迎点击下载。

html5 ppt模板：这是html5 ppt模板，包括了HTML5简介，HTML5新特性和那些效果，HTML5浏览器支持情况，HTML5移动开发框架介绍，HTML5目前存在的应用局限等内容。

《htmlppt课件》是由用户Silent}{ill于2017-09-01上传，属于课件PPT。