web客户端技术简介

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

表格的灵活应用
• （1）ROWSPAN和COLSPAN属性的使用方法。
பைடு நூலகம்
• 利用ROWSPAN属性设置该单元格占用多行，利用COLSPAN属性设置该单元格是占用多列。
Cellpadding和Cellspacing
• （2）Cellpadding和Cellspacing属性的使用方法。 • Cellpading的意思是单元格的边距，指的是字与单元格边框的距离。Cellspacing的 Cellspacing 意思是单元格间距，指的是单元格之间的距离。
案例名称：HTML网页框架案例名称：HTML网页框架
案例名称：案例名称：HTML网页框架网页框架程序名称：程序名称：2-01.htm <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML>
这是一段最基本的HTML标识，任何HTML文档都是由一个<HTML>和</HTML>标记包含的，然后分为<HEAD>和<BODY>两大部分，页面的标识一般都是在<BODY>标识中定义的。 HTML文件不区别大小写，浏览器认为<HTML>和<html>是一样的，在使用的时候需要保持风格的完整性。 HTML文件的扩展名可以是.htm或者.html都可以，现在已经没有区别了。原来在Linux操作系统上用html作为文件的扩展名，而在Windows操作系统上用.htm，因为早期的Windows 操作系统不支持三个以上字母的文件扩展名。
超级链接
• 使用超级链接的基本的语法是：<A HREF=“Address.htm”>XX</A>。XX是一个超级链接，连接到Address.htm文件； • <A>是单词Anchor的缩写，中文的意思是“锚”，功能是从一个页面链接到另一个页面；属性 HREF定义的是链接到哪一页。
书签链接
• 如果某个页面很大，为了加强层次感，需要引入书签链接。 • 使用的方法和超级链接类似。
预排版标记
• 包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上。 • HTML文件中的英文空格一般不起作用，但是在预排版标记中空格可以显示出来。
HTML 5展望
• HTML 5草案的前身名为Web Applications 1.0，是在 2004年由WHATWG提出，再于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 • [1]WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。 • [2]目前Firefox、Google Chrome、Opera及Safari（版本 4 以上）已有支持HTML5技术。 • HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。
CSS概述
• 1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大， W3C也极力向世界推广这一先进技术。HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。 • 为什么要使用CSS呢？原因主要有如下四点：（1）弥补 HTML对网页格式化功能的不足，比如段落间距，行距等。（2）字体变化和大小。（3）页面格式的动态更新。（4）排版定位等。
1.1 什么是Ajax
• Ajax：是Asynchronous JavaScript and XML(异步JavaScript 和XML技术)的简称，是一套特殊的Web编程技术，通过这种技术，开发人员可以使用来自服务器的输入无缝地更新部分 Web页面或Web应用程序。弥补用了B/S方式开发交互式Web页面的不足。 • Ajax只是一套特殊的编程技术，一种编程思想，不是技术规定。 • Ajax并不是必须要使用XML技术，也并不是必须要异步
电子邮件链接
• 电子邮件链接提供了当点击页面上的链接时，将自动打开默认的邮件发送程序发邮件。
列表
• 列表有两种方式，一种是有序列表，另一种是无序列表。 • 无序列表是所有的行之前都有一个小圆圈，而有序列表是自动排序的，前面有序号。
基本表格
• <TABLE>是表格的基本标记。<TR>代表表格的行，<TD>代表表格的列。 • 定义一个三行两列的表格如程序2-09.htm 所示。
（2）表单中常用控件
• 在常用的表单制作过程中，经常遇到的是按钮制作、输入元素的制作等。常见的表单控件包括文本框、文本域、密码框、多选框、单选框和下拉列表框，等等。 • 除了文本域和下拉列表，其他只要修改 TYPE属性就可以了。
块级元素
• 块级元素包括DIV和SPAN两种标记。DIV 称为层标记，有时也称为块标记。利用DIV 标记和CSS的定位技术可以做出相当出色的效果。 • SPAN标记和DIV标记的基本语法是一样的，但SPAN标记和DIV标记的区别还是很大的。
（1）表单头及其属性
• 表单的通用格式是：<FORM METHOD=“Post” ACTION=“do_submit.asp”>XX </FORM>。 • 表单元素包含在<FORM>标记中，有两个重要的属性：METHOD=“Post”或“Get”，Post和Get 方式的区别在于Post是一种邮寄的方式，在浏览器的地址栏中不显示提交的信息，这种方式传送的数据量的大小没有限制；Get方式将信息传递到浏览器的地址栏上，最大传输的信息量是2 KB。当不指明是哪种方式时，默认为Get方式。 Action属性是设置利用哪个文件来处理所提交的数据。
1.2 Ajax技术涉及的相关技术
• XMLHttprequest对象这是微软中引入的一个ActiveX控件，称为 XMLHttp对象，棒定在IE5中。不久，Mozilla工程师也在Mozilla 1 和 Netscape7创建了相应的东西，即 XMLHttpRequest对象。在IE7中，除了ActiveX控件外，还有一个原本的XMLHttpRequest对象。在Safari1.2 和Opera中，也包含了此对象。
正确的嵌套： <div> <h1> This is a correct nested H1 tag </h1> </div> 不正确的嵌套： <div> <h1> This is an incorrect nested H1 tag </div> </h1>
1.2 Ajax技术涉及的相关技术
• CSS CSS层叠式样表，是HTML页面的摸板，用来描述页面中的数据的呈现方式和布局。
图片标记
• 利用“<IMG SRC=”myimage.jpg“ WIDTH=”300“ HEIGHT=”200“ BORDER=”10“>”格式可以插入一张图片，myimage.jpg文件必须和该HTML文件放在同一个目录下。 • IMG是HTML的一个标记，是IMAGE的缩写； SRC属性给出要连接的图片的路径和文件名
加载CSS样式的三种方式
• 使用CSS来格式化网页，共有三种方式：
– 在HEAD中引用 – 在BODY中引用 – 作为文件来引用。
CSS与标记对应的三种方式
• HTML标记和CSS样式表标记有3种方式：
– 标记选择符 – 类选择符 – 选择符。
定义超级链接样式
• 可以指定A标记以不同的方式显示。一个超级链接有几种不同的状态：未被访问链接（Link）、已访问链接（Visited）和鼠标移动过（Hover）。 • 可以定义超级链接文字的颜色，可以定义字体的大小，一般超级链接都有下划线，可以利用 “TEXT-DECORATION:NONE”将超级链接的下划线去掉。
• JavaScript JavaScript是一种浏览器脚本语言。必须熟练掌握了这种语言，才能掌握Ajax编程技术。
1.2 Ajax技术涉及的相关技术
• XML、XSLT、XPath
– XML：一种用语描述和结构化数据的语言； – XSLT：一种将XML文档转换为XML其它XML 文档的语言，它也可以将HTML或纯文本指定为其他输出格式； – XPath：XSLT在实施转换时，使用XPath语言来查询XML文档。XPath查询用来定位原始 XML文档的元素。
HTML的常用标记
• HTML的常用标记有一些共同特点：都放在 BODY标记里面。 • 常用的标记有字体标记、图片标记、超级链接、列表、表格和表单等。
字体标记
• 处理文字时通常利用如“<FONT FACE=” 隶书“ SIZE=”5“ COLOR=”red“> xx</FONT>”的标记 • 定义字符xx的字体显示为隶书，字号是40， xx 40 颜色是红色。程序2-03.htm说明如何使用文字格式。
表格的样式
• BORDERCOLOR属性设置表格边框的颜色，BGCOLOR属性设置背景颜色， ALIGN属性设置表格的对齐方式，<B>标记是将内部的文字加粗显示。
表单
• 表单的功能是收集用户信息实现系统与用户交互。比如E-mail信箱的注册页面就是一个十分典型的表单页面。 • 表单信息的处理过程为：当单击表单中的提交按钮时，表单中的信息就会上传到服务器中，然后由服务器端的应用程序（例如CGI，ASP，PHP 或JSP等）进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到客户端浏览器上。
1.2 Ajax技术涉及的相关技术
• Ajax技术所涉及的相关技术
– XHTML和CSS； – 文档对象模型(Document Object Model, DOM)； – JavaScript； – XML和XSLT； – XMLHttpRequest对象。
1.2 Ajax技术涉及的相关技术
• XHTML XHTML可扩展标记语言是HTML语言的后续，主要区别是HTML语法不很严格，浏览器负责合理地解释并显示 HTML标记中的内容；而XHTML现在遵循严格的XML规则。例如，XML必须是格式良好的，必须正确地打开关闭，必须正确地嵌套：
HEAD头元素
• HEAD头元素主要包括该页面的一些基本描述语句。META的属性包括：
– Description，网页的描述信息； – Keywords，关键字，当搜索引擎查找时，按此关键字查找； – Content-type Content-type，用来设置该网页的编码； – Author，用来设置该网页的作者姓名； – Refresh，用来设置网页的自动更新。当CONTENT ="3; URL=http://www.google.com"时，该网页打开 3秒钟后，就自动的转到www.google.com网站
Web客户端技术
本章概述
• • • • HTML CSS javascript DOM
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。
1.2 Ajax技术涉及的相关技术
• 文档对象模型DOM 简单地说，DOM是一种Web页面的层级或树型结构表示。其中页面的每一部分，如图形、文本框、按钮等都通过浏览器模拟。 DOM是W3C(www.w3.org)组织的标准，所有浏览器呈现的页面都遵循这种标准。
1.2 Ajax技术涉及的相关技术