已转开发，博客新地址：http://welcomezhang.iteye.com/

浅谈web开发基础[精]

上一篇 / 下一篇  2011-08-14 16:57:35 / 精华(3) / 个人分类：web基础

查看( 1711 ) / 评论( 0 ) / 评分( 0 / 0 )

'Z5Y~^9A;JYo0鉴于现在的网页设计，一般采用内容与表现相分离，即网页的组成包含：内容HTML+ 样式CSS + 脚本JS（客户端） + 服务器端开发语言PHP/ASP/JSP。本文将主要涉及到HTML、XML、CSS、JavaScript、AJAX、PHP/ASP/JSP的一些基础知识。
51Testing软件测试网 [@9v_"sT,E:c
浏览器解析原理51Testing软件测试网 Gu*sE-d
服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树；在构建DOM树的同时，如果有JS，同时调用JS引擎解析。
O T5L,FD0HTML文件，在html文件的开头处一般会包含文档类型。常用过渡类型，支持html4.0的标签。其他文档类型有严格类型（Strict）和框架（Frameset）。
.m.Z4mK+c$w*_0一个HTML文件，包含head和body两部分。外部文件(css和js)的引用、定义，以及网页的title，都是在head里定义的。Body部分，则是网页展示的内容。51Testing软件测试网"Ms1Sg+?2l"A/rv!Pbn
HTML文件的Head部分，包含文档编码、CSS和JS的定义或引用：51Testing软件测试网dzz8}-Ff
文档编码，html引用文件（如CSS）的编码必须和本文档编码一致，否则可能出现乱码。51Testing软件测试网(H [#i F knK,O7m
51Testing软件测试网6c/jl wuv gu:o3{H-{5d

E F s&xNm"u0一、HTML：HyperText Marking Langusge，超文本标记语言
4] a3YIw$jw0HTML是被设计用来显示数据的，重点是：显示数据以及如何显示数据更好上面。还记得刚学习网页制作时，接触得最多的便是HTML；时至今日，对静态网页的制作其依然不过时。51Testing软件测试网6o4Dz@T`:bi.JT1qbf
HTML对标签的大小写不敏感，但是XHTML规范中，标签要求必须小写。
t-d:ST U/I.b0HTML元素是通过使用 HTML 标签进行定义的，所有的标签定义在内，HTMl标签在页面中必须是结束的，如果标签没有闭合，造成的后果就是页面样式错乱。51Testing软件测试网8wO-fx/?/P
HTML文档的body，是用户在浏览器中可见的部分。51Testing软件测试网"qO&Mj8SP0a
一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们在body中可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、询问（footer）。
8O5?&JjA.jF!m0对比表格布局，用div＋css布局构建的网页以够简化代码，加快显示速度。
:zy'B8gT5[051Testing软件测试网uT9{Om.c

二、XML：eXtensible Marking Langusge，可扩展的标记语言
XML是被设计用来描述数据的，重点是：什么是数据，如何存放数据。
-J'SK0ze,p'Z3V Z1mI^0XML只是用来组织、存储和发送信息的，但事实上XML确实什么都不做。
下面的例子是Ordm给Lin的便条，使用的是XML格式：<note>
    <to>Lin</to>   
    <from>Ordm</from>
    <from>Ordm</from>
+A*p7{+}(C1vbfe%X0    <heading>Reminder</heading>51Testing软件测试网?GF/f,W(h9N*DNq a
    <body>Don't forget me this weekend!</body>
$I,oYx|)dn0</note>51Testing软件测试网 s+A'q8G8x*J3o#T5L
这个便条有信息头，又信息主体，还包括发送人和接收人。尽管如此，这个XML文档仍然什么都不做，他只是用XML标记存储信息的文件。有人已经编写出来发送和接收并且显示这种格式信息的软件。
XML是自由的、可以扩展的。51Testing软件测试网2y~`,d:B&L%Aj
XML标记并不是预先规定好的，你必须创造你自己的标记。在HTML文档中必须使用规则中定义好的标记。比如:<P><br><a></a>等等。XML允许你定义自己的标记以及文档结构。比如在上面例子中的"<to>"、"<from>"标记都不是在XML规范中事先定义好的。这些标记都是XML文档的作者“创造”出来的。

XML是HTML的补充。
!G bR1z/tJ ^l0XML并不是HTML的替代品，理解这一点非常重要。在将来的网页开发中，XML将被用来描述、存储数据，而HTML则是用来格式化和显示数据的。对于XML最好的形容可能是:XML是一种跨平台的，与软、硬件无关的，处理信息的工具。

XML将成为最普遍的数据操纵和数据传输的工具。51Testing软件测试网(T0G'G G/HA
XML在未来Web开发中的应用无处不在。XML发展的非常迅速，这实在令人感到惊奇，有很多的软件开发商都采用了XML标准。我们相信，在未来的Web开发中，XML将和HTML一样受到重视，他们都是Web技术的基础。


三、CSS：Cascading Style. Sheet，层叠样式表
$y'N3Y_~0CSS基础这里就不多说了，整一本css手册便OK；在此主要说明HTML使用CSS的4种方式。
u?[5I8@'C01.链入外部样式表文件（Linking to a Style. Sheet）
;_1\9l0|mM$r_&L2I+a0<link href="css/test.css" type="text/css"/>
2.定义内部样式块对象（Embedding a Style. Block）51Testing软件测试网,Ri%J/HnS
<title>引用内部样式测试</title>
z+xw:X]k0</head>51Testing软件测试网_%Y~!y8W)t%bVg$\ L
 <body>51Testing软件测试网l9S ?!_F+|
<font>testing font</font>
3.内联定义（Inline styles）51Testing软件测试网PDiM?d,Ai
3.内联定义（Inline styles）
e8fy(G J ^W fE)oX0<p style="background-color: #FFCC66;">测试内联定义</p>
4.导入样式(Import Styles):与链入外部样式的功能基本相同，只是语法和实现方式上有差别.51Testing软件测试网;k|*GWat;dB
<head>  
Z[X1@u/CZ ec0   <title>test importing styles</title>
J xJE.{W0　　<style>51Testing软件测试网\i9cxw3E
   @import url(css/test.css);
V0I;|[(H5e&N W0　　@import url("css/test.css") ;//单引号也可以51Testing软件测试网^.SDH)k
　　@import css/test.css;
8^L#\A#|tn0　　@import "css/test.css"; //单引号也可以　
Xv/o!}kQm6C5m0    </style>51Testing软件测试网M Ke4x?dU
</head>51Testing软件测试网'v"Huc U;W1Y)O
几种方式的优先级:内联样式优先级最高，其次是外部链接样式，再次是内联式，最后是导入样式
51Testing软件测试网4@Ssi"]*XBX jO

四、JavaScript，原名LiveScript,简称JS.51Testing软件测试网X?m_N^0o
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。51Testing软件测试网 iF4CeQ&s
1.类似于引用css的4种方式，使用js也有3种方式。
w2r(| ya0a.链入外部JS文件51Testing软件测试网-n$K dj@?
<head> 51Testing软件测试网n"nRz-W_'Z'Kz
<script. language="JavaScript" src="test.js"></script> 51Testing软件测试网(~0VA"Q5tBJW
</head> 
b.引用内部JS文件
,P@l7c ~0编写第一个JavaScript程序
V{c0S;iqV{0　　<html>
8_-u/ywA0　　<head>51Testing软件测试网#|j9[j4N(DW i`!h
　　<script. type="text/javascript">51Testing软件测试网!k!la ]~ TE*~
　　<!--51Testing软件测试网8}:w7{$Qoqx
　　function checkForm(form)
r*v/F/hb*F2@4K0   {
E D0k:g N#HI0if(form.username.value==''){51Testing软件测试网k S^| fn c-r'u
   alert('用户名不能为空！');
s*J%U%p&h4HS0           form.username.focus();
g{)J_iH0           return false;51Testing软件测试网EM.^J.d
          }51Testing软件测试网'V;WQ3@A9N `O[
        ......
7^/MM/}~#c1u0    }51Testing软件测试网;H-o0K@#]LO _+C,e3S
　　-->51Testing软件测试网f4C2],[)J ^8_A@A
　　</script>
5NdoUI2}0　　</head>51Testing软件测试网-t7{/C kC;n
　　<body>51Testing软件测试网[+O,{Z6j1R[!U u{
      <form. method="POST" nsubmit="returm checkForm(this);">
'Q\Q9My0      </form>
#uS6P Ysoii0　　</body>
Cwj1_5p(M0　　</html>
c.内联JS51Testing软件测试网6?rvW'S;Yd'y
<input type="button" name="register" nclick="javascript.:location.href='register.php'" value= "register ">
2.Java、Javascrīpt和Jscrīpt的区别51Testing软件测试网%D ts,^ [
首先，这三者没有必然的联系，它们是完全不同的事物，它们是分别由不同公司开发的，在函数方面有相同的地方，也有很多不同之处。Java是由Sun公司创立、开发；Javascrīpt则是Sun和Netscape公司共同开发的产品；Jscrīpt是微软对ECMA262语言规范的一种实现。这三者的共同点是，语法与C语言相似。JS是Javascrīpt的简称。51Testing软件测试网,d,D'C4oW*O
其次，Jscrīpt应用于ASP，运行于服务器端。而Java、Javascrīpt都是运行于客户端。Sun公司后来又推出了JSP，以Java语言为基础，运行于服务器端。运行于服务器端的网页是动态网页，所以以Jscrīpt为基础的ASP、以Java为基础的JSP是动态网页，而Java、Javascrīpt则是静态网页。
3.常用的javascript库：jquery库、prototype


五、AJAX(Asynchronous JavaScript. and XML)，异步JavaScript和XML。
Wz:U"J B j0oD*s"ui/T0`0AJAX是一种创建交互式网页应用的网页开发技术。通过 AJAX，您的 JavaScript. 可使用 JavaScript. 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的JavaScript. 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。
根据Ajax提出者Jesse James Garrett建议，AJAX使用：
'e*Q0Fsg*Ud/O0　　1、使用XHTML+CSS来表示信息；51Testing软件测试网k3x ]Vf9} ?
　　2、使用JavaScript操作DOM（Document Object Model）进行动态显示及交互；51Testing软件测试网k6nHb Z{X@
　　3、使用XML和XSLT进行数据交换及相关操作；51Testing软件测试网g!BS5{q"A
　　4、使用XMLHttpRequest对象与Web服务器进行异步数据交换；51Testing软件测试网"x J5v8|m T*| m
　　5、使用JavaScript将所有的东西绑定在一起。
!O&u;E2F `n0　
S2n(~ mX%U&dhL051Testing软件测试网8eS~"Y7J
六、PHP(Personal Hypertext Preprocessor)，超文本预处理语言。
   ASP(Active Server Pages)，动态服务器页面。
   JSP(Java Server Pages),Java服务器页面。
*G9i {:g I%N0   JSP(Java Server Pages),Java服务器页面。
m^qq1W UZ0PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C, Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。开源、免费、它支持目前绝大多数数据库。51Testing软件测试网4T\1Ms*b"oq
ASP采用脚本语言VBScript作为自己的开发语言。
I$fC8Vl&l lwd1@0JSP是Sun公司推出的新一代网站开发语言，Sun公司借助自己在Java上的不凡造诣，将Java从Java应用程序和Java Applet之外，又有新的硕果，就是JSP。JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。

m hWpgE0
PHP技术特点
1．数据库连接 
　　PHP可以编译成具有与许多数据库相连接的函数。PHP与MySQL是现在绝佳的组合。你还可以自己编写外围的函数取间接存取数据库。通过这样的途径当你更换使用的数据库时，可以轻松地更改编码以适应这样的变。PHPLIB就是最常用的可以提供一般事务需要的一系列基库。但PHP提供的数据库接口支持彼此不统一，比如对Oracle,MySQL，Sybase的接口，彼此都不一样。这也是PHP的一个弱点。 
2．面向对象编程 
　 PHP提供了类和对象。基于web的编程工作非常需要面向对象编程能力。PHP支持构造器、提取类等。 

ASP技术特点
1. 使用 VBScript. 、 JScript. 等简单易懂的脚本语言，结合 HTML 代码，即可快速地完成网站的应用程序。 
2. 无须 compile 编译，容易编写，可在服务器端直接执行。 
3. 使用普通的文本编辑器，如 Windows 的记事本，即可进行编辑设计。
4. 与浏览器无关 (Browser Independence), 用户端只要使用可执行 HTML 码的浏览器，即可浏览 Active Server Pages 所设计的网页内容。 Active Server Pages 所使用的脚本语言 (VBScript. 、 Jscript) 均在 WEB 服务器端执行，用户端的浏览器不需要能够执行这些脚本语言。 
5.Active Server Pages 能与任何 ActiveX scripting 语言相容。除了可使用 VBScript. 或 JScript. 语言来设计外，还通过 plug－in 的方式，使用由第三方所提供的其他脚本语言，譬如 REXX 、 Perl 、 Tcl 等。脚本引擎是处理脚本程序的 COM(Component Object Model) 物件。 
6. 可使用服务器端的脚本来产生客户端的脚本。 
7.ActiveX Server Components(ActiveX 服务器元件 ) 具有无限可扩充性。可以使用 Visual Basic、 Java、Visual C＋＋、COBOL等编程语言来编写你所需要的ActiveX Server Component 。
6]7] i%X QQ/C051Testing软件测试网1fC1v9].Z9g4nW
JSP技术特点
　　1. 将内容的产生和显示进行分离
　　使用JSP技术，Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终页面。使用JSP标识或者小脚本来产生页面上的动态内容。产生内容的逻辑被封装在标识和JavaBeans群组件中，并且捆绑在小脚本中，所有的脚本在服务器端执行。
　　2. 强调可重用的群组件
　　绝大多数JSP页面依赖于可重用且跨平台的组件（如：JavaBeans或者Enterprise JavaBeans）来执行应用程序所要求的更为复杂的处理。开发人员能够共享和交换执行普通操作的组件，或者使得这些组件为更多的使用者或者用户团体所使用。基于组件的方法加速了总体开发过程，并且使得各种群组织在他们现有的技能和优化结果的开发努力中得到平衡。
　　3. 采用标识简化页面开发
　　Web页面开发人员不会都是熟悉脚本语言的编程人员。JavaServer Page技术封装了许多功能，这些功能是在易用的、与JSP相关的XML标识中进行动态内容生成所需要的。标准的JSP标识能够访问和实例化JavaBeans组件，设置或者检索组件属性，下载Applet，以及执行用其他方法更难于编码和耗时的功能。 51Testing软件测试网]~)d0w]^AF9EUO2_

D!wj^2~z u/i0参考众多文章资料，在此一一谢过！
51Testing软件测试网'g2?V{B2U

.Y4[8G(V/H1{J,Q0

收藏 举报

TAG: ajax AJAX ASP CSS css HTML html js JS JSP PHP php web Web 基础

 

评分：0

我来说两句

Open Toolbar