《WEBUI培训之一》由会员分享，可在线阅读，更多相关《WEBUI培训之一（23页珍藏版）》请在金锄头文库上搜索。
1、WEBUIWEBUI培训之一培训之一什么是什么是HTML超文本置标语言（超文本置标语言（英文英文：HyperText Markup Language，简称为，简称为HTML） 是是为为网页网页创建和其它可在创建和其它可在网页浏览器网页浏览器中中看到的信息设计的一种看到的信息设计的一种置标语言置标语言。HTML被用来结构化信息被用来结构化信息例如标题、例如标题、段落和列表等等，也可用来在一定程度段落和列表等等，也可用来在一定程度上描述文档的外观和上描述文档的外观和语义语义。 2l结构性结构性标记，描述文字的意图，例如： Golf 指明浏览器将Golf显示为二级标题。结构性标记并未指示浏览器的显示
2、方式，但是大多数浏览器标准化了这些元素的显示，例如默认情况下上述的标题会被 显示为较大的粗体文字。比较常用的结构性标记有： html元素 标记HTML内容的开始和结束。 head元素 标记HTML文件头，包含不在正文中显示的关键字、标题、脚本等等。 title元素 标记HTML文件的标题。 body元素 标记HTML文件正文的开始和结束。 l呈现性呈现性标记。描述文字的外观，例如： boldface 将boldface显示为粗体粗体文字。但是为了统一网站的风格，很多网络出版者使用CSS而不是重复使用呈现性标记。对于 bold 和 italic 也有通常更加明确的等价呈现性标记： strong
3、emphasis emphasis 3l超文本超文本标记。将文档的一部分关联到其它文档。例如： Wikipedia 将会把Wikipedia显示为一个超链接URL。除了HTML内容之外，经常也有人在代码中加入注释： 注释不被浏览器解释，仅仅起到说明代码含义或者隐藏部分代码的作用。 l框架页面框架页面标记。描述网页如何显示框架网页，较低版本的浏览器并不支持此功能。 代表定义一个框架。若在后加上rows=100,*，这代表网页会开启一个上下分割网页的框架，而上框架网页的高 度是100px。加上cols=100,*代表网页左右分割，左框架的网页阔度是100px。 代表框架页的名称及档案来源。这个语法
4、是加在前。每个标记都有特定的属性。由于对标准的支持度相差很大，一些标记和属性可能只被部分浏览器支持。4HTML5HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。 其中有些是技术上类似和标签，但有一定含义，例如（网站导航块） 和。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其它浏览要素提供了新的功能，通过一个标准接口， 如和标记。5除了原先的DOM接口，HTML5增加了更多样化的API ：实时二维绘图定时媒体播放储存离线编辑拖放通讯网络后退按钮管理MIME和协议处理程序时表头登记6什么是什么是JavascriptlJavaScript是一种广泛用于客户端We
5、b开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。 它最初由网景公司设计，是一种动态、弱类型、基于原型的语言，内置支持类。以它为基础，制定了ECMAScript标 准。 7Javascript语言结构 JavaScript的 Hello World 程序 document.write(“Hello, world!”) /直接在浏览器窗口显示。 alert(“Hello, world!”)/开启对话窗口显示。 html超级链接本文 8Javascript引擎V8是一个由丹麦Google开发的开源JavaScript引擎，用于Google Chrome中。Presto是一
6、个由Opera Software开发的浏览器排版引擎，供Opera7.0及以后版 使用。Presto取代了旧版Opera 4至6版本使用的Elektra排 版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。TraceMonkey是套开放原始码、以C+语言所编写的新一代 JavaScript引擎，于2008年8月23日正式发布。目前为Mozilla的Firefox网页浏览器3.5、3.6版本所使用。 WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。同时，WebKit也是Mac OS X
7、的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修 改而來並且包含了一些来自苹果公司的一些组件。 9什么是什么是CSSCascading Style Sheets（层叠样式表层叠样式表串样式列表串样式列表），简写为CSS，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应 用）添加样式（字体、间距和颜色等）的计算机语言。目前最新版本是CSS 2.1，为W3C的候选推荐标准。下一版本CSS 3仍然在开发过程中。 10CSS的语法很简单，它使用一组英语词来表示不同的样式和特征。一个式样表由一组规则组成。每个规则由一个“选择器”（select
8、or）和一个定义部分组成。每个定义部分包含一组由半角分号（;）分离的定义。 这组定义放在一对大括号（ ）之间。每个定义由一个特性，一个半角冒号（:）和一个值组成。选择器（选择器（Selector）通常为档中的元素（element），如 HTML 中的，等 标签，多个选择器可以半角逗号（,）隔开。属性（属性（property）CSS1、CSS2、CSS3 规定了许多的属性，目的在控制选择器的样式。值（值（value）指属性接受的设定值，可由各种关键字（keyword）组成，多个关键字时大都以空格隔开。要针对没有标签定义范围进行样式设定时，可利用要针对没有标签定义范围进行样式设定时，可利用与与标标
9、 签签11例子：p font-size: 110%; font-family: garamond, sans-serif; h2 color: red; background: white; .highlight color: red; background: yellow; font-weight: bold; 在这个例子中有三个选择器：p、h2和.highlight，color: red是一个定义，其中color是属性，red是color的 值。 在这里HTML中的结构 P（段落）和 H2（2级标题）获得了不同的样式。每个段落的字体 的大小比包含这个段落的结构的字体的大小要大10%，其字形
10、是Garamond，假如Garamond没 有的话那么使用一般的sans-serif字形。2级标题的字用红色，底面是黄色的。这个例子中的第三个规则规定了一个class的 样式。通过class属性每个HTML结构都可以被指定为这个class，例如：这个段落将被显示为黄底红字粗体。 12 body background:#fff; color:#777; h1 font:bold italic sans-serif; color:green; 这个句子用綠色、粗体和斜体字显示 普通字。 这个句子用大的、红色斜体字在绿色背景上显示，通用的 h1 样式在这里被取代了。 这个句子用綠色、粗体和斜体字显示
11、 13什么是什么是XML可扩展置标语言可扩展置标语言（eXtensible Markup Language， 简称XML），又称可扩展标记语可扩展标记语言言，是一种置标语言。置标指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的 文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用像XML 这样由相关人士自由决定的标记语言，这就是语言的可扩展性。XML是从标准通用置标语言（SGML）中简化修改出来的。 14XML设计用来传送及携带数据信息，不用来表现或展示数据，HTML语言则用来表现数据， 所以XML用途的焦点是它说明数据是什么，以及携带数据
12、信息。丰富文件（Rich Documents）- 自定文件描述并使其更丰富 属于文件为主的XML技术应用标记是用来定义一份资料应该如何呈现元数据（Metadata）- 描述其它文件或网络资讯 属于资料为主的XML技术应用标记是用来说明一份资料的意义设定档案（Configuration Files）- 描述软件设定的参数XML定义结构、存储信息、传送信息。下例为张旭发送给陈贞伶的便条，存储为XML。 陈贞伶 张旭 问候 最近可好？ 这XML文档仅是纯粹的信息标签，这些标签意义的展开依赖于应用它的程序。15什么是AjaxAJAX全称为“Asynchronous JavaScript and XML
13、”（异步JavaScript和XML），是一种创建交互式网页应 用的网页开发技术。使用XHTML+CSS来表示信息； 使用JavaScript操作DOM（Document Object Model）进行动态显示及交互； 使用XML和XSLT进行数据交换及相关操 作； 使用XMLHttpRequest对象与Web服务器进行异步数据交换； 使用JavaScript将所有的东西绑定在一起。 使用SOAP以XML的格式来传送方法名和方法参 数。 AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生合成”式 （derivative/composite）的技术正
14、在出现。 16 与与 传统的传统的Web应用比较应用比较 传统的Web应用允许用户端填写表单（form），当送出表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网 页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间就依赖 于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML 的页面服务接口（界面），并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间
15、交换的数据大量减少（大约只有原来的 5%），结果我们就能看到回应（服务器回应）更快的应用（结果）。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减 少了17优缺点比较优缺点比较 使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改 变过的信息。Ajax不需要任何浏览器插件，但需要用户允许JavaScript在 浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一 些简化Ajax使用方法的程序库也相继问世
16、。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的 用户提供替代功能。对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为4。 在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面 之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来 解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在 Go
17、ogle Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢 复到当时的状态。）18JQueryjQuery是一套跨浏览器的JavaScript函 式库，强化HTML与JavaScript之间的操作。jQuery 有下列特色:跨浏览器的DOM元素选择 DOM 巡访与更改, (支持 CSS 1-3 与 基本的XPath，jQuery 1.2版以后默认取消XPath支持，改为插件支持) 事件（Events） CSS操纵 特效和动画 Ajax 延伸性（Extensibility） 工具 - 例如浏览器版本和each函数。 JavaScript插件 19多浏览器多浏览器NetscapeMozilla FirefoxInternet ExplorerChromeOperaSafari20多浏览器兼容CSS部分兼容 1、页面布局定义不同造成CSS调整问题 2、IE中下横线与星号使用规则。Javascript部分兼容 1、事件捕获。 2、默认操作。21谢 谢！22结束结束
