PPT内容
这是htmlppt课件,关于第2章Web编程技术,包括了HTML的发展历史,HTML的基本框架,HTML的各种常用标记:文字标记、图片标记、超级链接标记,CSS的基本使用方法,如何让CSS与HTML协同工作,JavaScript中的变量、数组、表达式、运算符、流程控制语句,JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用等内容,欢迎点击下载。
第2章 Web编程技术
内容提要
本章首先介绍HTML的发展历史
然后介绍HTML的基本框架
详细介绍了HTML的各种常用标记:文字标记、图片标记、超级链接标记,等等
介绍CSS的基本使用方法,如何让CSS与HTML协同工作
介绍JavaScript中的变量、数组、表达式、运算符、流程控制语句
JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用
HTML编程技术
要把信息发布到全球,就必须要使用能够被大众接受的语言,也就是使用一种大多数计算机能够识别的语言。
在Internet上,通常使用的发布语言是HTML
HTML概述
在20世纪90年代Web网络的迅速兴起,使得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概述
HEAD头元素
HTML的常用标记
HTML的常用标记有一些共同特点:都放在BODY标记里面。
常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等
字体标记
图片标记
超级链接
列表
1.基本表格
代表表格的列。 表格的灵活应用 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。 |