《Web的编程技术》由会员分享，可在线阅读，更多相关《Web的编程技术（93页珍藏版）》请在金锄头文库上搜索。
1、第2章 Web编程技术,2,内容提要,本章首先介绍HTML的发展历史 然后介绍HTML的基本框架 详细介绍了HTML的各种常用标记：文字标记、图片标记、超级链接标记，等等 介绍CSS的基本使用方法，如何让CSS与HTML协同工作 介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句 JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用,HTML编程技术,要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的语言。 在Internet上，通常使用的发布语言是HTML,HTML概述,在20世纪90年代Web网络的迅速兴起
2、，使得HTML空前繁荣。当时，HTML被发展成了许多不同的版本。出于解决这种混乱局面的考虑，迫切需要制定一个公认的HTML语言规范。 1995年11月，Internet Engineering Task Force（IETF）整理了以前的各种版本，倡导并主持开发HTML2.0规范，同年推出HTML3.0技术规范。1996年，World Wide Web Consortium（W3C）的HTML Working Group开始组织编写新的规范，于1997年1月推出了HTML3.2。在HTML3.2中做了许多重要改动。到1999年下半年推出到现在依然使用的HTML4.0,HTML概述,案例名称：H
3、TML网页框架 程序名称：2-01.htm,HEAD头元素,案例名称：HTML网页框架 程序名称：2-02.htm我的第一页面,HTML的常用标记,HTML的常用标记有一些共同特点：都放在BODY标记里面。 常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等,字体标记,案例名称：使用字体标记 程序名称：2-03.htm本书的特色是以案例为主，全书有30个完整的案例。,图片标记,案例名称：使用图片标记 程序名称：2-04.htm,超级链接,案例名称：使用超级链接 程序名称：2-05.htm其他文件上一个页面位于北京的清华大学,列表,案例名称：使用有序列表 程序名称：2-06.htm有序
4、列表热爱祖国热爱人民无序列表热爱祖国热爱党,1.基本表格,是表格的基本标记。代表表格的行，代表表格的列。,案例名称：基本表格 程序名称：2-07.htm第一行第一列第一行第二列 第二行第一列第二行第二列 第三行第一列第三行第二列 ,表格的灵活应用,案例名称：跨行和跨列 程序名称：2-08.htm跨两行跨两列10001000300020004000,Cellpadding和Cellspacing属性,Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的意思是单元格间距，指的是单元格之间的距离。,案例2-1：表格的样式,案例名称：表格的样式 程序名称：St
5、yleTable.htm序号 大学 师资评分 学生评分 设备评分1清华大学1001001002北京大学10010097,表单,表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。 表单信息的处理过程如下：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序（例如CGI，ASP，PHP，JSP等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。,表单头及其属性,案例名称：表单的基本使用方法 程序名称：2-10.htm用户名： 密码： ,表单中常用控件,在常用的表单制作过程
6、中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。,块级元素,案例名称：使用块级元素 程序名称：2-12.htmI am a layer!I am a Span!,预排版标记,包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。,设计网页框架,案例名称：上下框架 程序名称：2-14.htm,使用框架,一般在工程应用中，都是由三个页面组成的框架组合，分成上框架，右框架和左框架,CSS编程技术,CSS（Cascading Style Sheet
7、s）中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。,CSS概述,简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。CSS样式规则组成为：选择符 属性: 值 ，单一选择符的复合样式声明应该用分号隔开，如：选择符 属性1: 值1; 属性
8、2: 值2 。,使用CSS,案例名称：使用CSS 程序名称：2-16.htmH1 FONT-SIZE: X-LARGE; COLOR: RED H2 FONT-SIZE: LARGE; COLOR: BLUE 中国，我的祖国！H1显示的中国，我的祖国！H2显示的,加载CSS样式的三种方式,使用CSS来格式化网页，共有三种方式： 在HEAD中引用 在BODY中引用 作为文件来引用,HEAD内引用,案例名称：HEAD内引用 程序名称：2-17.htmH1 COLOR:GREEN;FONT-SIZE:37PX;P BACKGROUND:YELLOW;北京大学，清华大学南京大学，复旦大学,BODY内引
9、用,案例名称：BODY内引用 程序名称：2-18.htm北京大学，清华大学南京大学，复旦大学,文件外引用,案例名称：样式表文件 程序名称：mystyle.cssH1 COLOR:GREEN;FONT-SIZE:37PX;P BACKGROUND:YELLOW;,案例名称：链接CSS文件 程序名称：2-19.htm北京大学，清华大学南京大学，复旦大学,文件外导入,案例名称：导入CSS文件 程序名称：2-20.htmIMPORT URL(MYSTYLE.CSS);北京大学，清华大学南京大学，复旦大学,CSS与标记对应的三种方式,标记选择符 任何HTML元素都可以是一个CSS的选择符。上面所有的样式
10、表都是采用标记选择符引入的。例如：P BACKGROUND:YELLOW;，这里用的标记选择符是P。,类选择符,在STYLE标记定义一个“.类名”，然后在HTML标记中使用CLASS=“类名”就可以引入该样式,案例名称：类选择符 程序名称：2-21.htm.LITTLEREDCOLOR:RED;FONT-SIZE:18px.LITTLEGREENCOLOR:GREEN;FONT-SIZE:18px 这是红色，而且比较小！这是绿色，而且比较小！,ID选择符,定义ID选择符时，在样式名之前加“#名字”，引用的时候使用“ID=名字”。,案例名称：ID选择符 程序名称：2-22.htm#SZG COL
11、OR:RED 这是ID选择符号！,定义超级链接样式,可以指定A标记以不同的方式显示。 一个超级链接有几种不同的状态： 未被访问链接（Link） 已访问链接（Visited） 鼠标移动过（Hover）可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用“TEXT-DECORATION:NONE”将超级链接的下划线去掉。,定义超级链接样式,案例名称：定义超级链接样式 程序名称：2-23.htmA:LINKCOLOR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONEA:VISITEDCOLOR:BLUE;FONT-SIZE:9PT;TEXT-
12、DECORATION:NONEA:HOVERCOLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE这是超级链接,JavaScript编程技术,JavaScript是一种Script脚本语言，所谓的脚本语言就是可以和HTML语言混合使用的语言。VBScript也是Script语言中的一种，但是VBScript只有微软的浏览器Internet Explore（IE）才能完全支持。而JavaScript则不管是什么浏览器都可以运行，这也是JavaScript的一个优点。 JavaScript是一种高级的脚本描述性语言，并不需要依赖于特定的机器和操作系
13、统，所以说它是独立于操作平台的。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中的嵌入方式不一样。Ja
14、va可以通过小应用程序嵌入HTML文件，而JavaScript可直接写入一个文本文件或HTML文件中。,网页中引入JavaScript,案例名称：第一个JavaScript程序 程序名称：2-24.htmdocument.write(“这是以JavaScript输出的!“),变量与数组,变量和数组是JavaScript的基础，JavaScript和C语言属于同一语系，许多基本语法一样。不管是在JavaScript中还是在其他程序语言中，最基本的概念是变量。 JavaScript定义变量只有一个关键字“var”，在JavaScript中定义一个用户名变量的语法为：“var strUserName
15、;”。,变量,案例名称：使用变量 程序名称：2-25.htmvar strWelcome = “欢迎您！“;var iCounter = 10;iCounter = iCounter + 1;document.write(strWelcome);document.write(iCounter);,变量命名需要遵守以下六个规则,（1）变量命名必须以一个英文字母或是下划线为开头，也就是变量名第一个字符必须是A到Z或是a到z之间的字母或是“_”。 （2）变量名长度在0255字符之间。 （3）除了首字符，其他字符可以使用任何字符、数字及下划线，但是不可以使用空格。 （4）不可以使用JavaScript
16、的运算符号，例如：+，等。 （5）不可以使用JavaScript用到的保留字，例如：sqrt（开方），parseInt（转换成整型）等。 （6）在JavaScript中，变量名大小写是有所区别的，例如：变量s12和S12是不同的两个变量。,声明数组,用new和Array关键字，new代表建立一个新的对象，Array是JavaScript内置的一个对象 由于JavaScript区分大小写，所以Array的首字母必须是大写。,使用数组,案例名称：使用数组 程序名称：2-26.htmvar arrUserName = new Array(2);arrUserName0 = “Bill“;arrUserName1 = “Bob“;document.write(arrUserName0);document.write(“);document.write(arrUserName1);document.write(“);,表达式与运算符,程序主要功能是运算，例如加、减、乘、除等基本操作。 算术运算符主要提供加、减、乘、除等操作，计算机中没有通常的乘号，用“*”代替。取余操作用“%”，,
