WEBUI培训之一PPT课件

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