浅谈web开发基础[精]
上一篇 / 下一篇 2011-08-14 16:57:35 / 精华(3) / 个人分类:web基础
鉴于现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容HTML+ 样式CSS + 脚本JS(客户端) + 服务器端开发语言PHP/ASP/JSP。本文将主要涉及到HTML、XML、CSS、JavaScript、AJAX、PHP/ASP/JSP的一些基础知识。
8Urv:x;wSPe/a0浏览器解析原理51Testing软件测试网kBO*?+k`g5c$[
服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树;在构建DOM树的同时,如果有JS,同时调用JS引擎解析。
[0[B%V w-]0HTML文件,在html文件的开头处一般会包含文档类型。常用过渡类型,支持html4.0的标签。其他文档类型有严格类型(Strict)和框架(Frameset)。
3S(L5VnZj0一个HTML文件,包含head和body两部分。外部文件(css和js)的引用、定义,以及网页的title,都是在head里定义的。Body部分,则是网页展示的内容。51Testing软件测试网 |xl,G^K3r
HTML文件的Head部分,包含文档编码、CSS和JS的定义或引用:51Testing软件测试网+HTg%@3LV7o-l
文档编码,html引用文件(如CSS)的编码必须和本文档编码一致,否则可能出现乱码。51Testing软件测试网2]^4g1iF:A9Z7{(^p
51Testing软件测试网 Bi's)o(jx!u-UU9A
.Oz.u(\9Z
zo0一、HTML:HyperText Marking Langusge,超文本标记语言51Testing软件测试网i;Mr
y{
HTML是被设计用来显示数据的,重点是:显示数据以及如何显示数据更好上面。还记得刚学习网页制作时,接触得最多的便是HTML;时至今日,对静态网页的制作其依然不过时。
,vED-z!qO.x%x P0HTML对标签的大小写不敏感,但是XHTML规范中,标签要求必须小写。51Testing软件测试网 sQI2W/dV
HTML元素是通过使用 HTML 标签进行定义的,所有的标签定义在内,HTMl标签在页面中必须是结束的,如果标签没有闭合,造成的后果就是页面样式错乱。
yA v([M0HTML文档的body,是用户在浏览器中可见的部分。51Testing软件测试网bT1w!d4v"oaX+{#P t
一般的网站整体可以分为上中下结构,即:头部、中间主体、底部。那么我们在body中可以用三个div块来划分,分别给它们起名为:头部(header)、主体(maincontent)、询问(footer)。
]F%U j~0对比表格布局,用div+css布局构建的网页以够简化代码,加快显示速度。
tC)C
l6n+j051Testing软件测试网 st lua$x"Q I
二、XML:eXtensible Marking Langusge,可扩展的标记语言
XML是被设计用来描述数据的,重点是:什么是数据,如何存放数据。
J5mEI,_7KRm0XML只是用来组织、存储和发送信息的,但事实上XML确实什么都不做。
下面的例子是Ordm给Lin的便条,使用的是XML格式:<note>
<to>Lin</to>
<from>Ordm</from>
<from>Ordm</from>
?xWNsT0 <heading>Reminder</heading>
{ATwR@:M0 <body>Don't forget me this weekend!</body>
vs$a,[(]%Sw(`0</note>51Testing软件测试网*\1} huE0T
这个便条有信息头,又信息主体,还包括发送人和接收人。尽管如此,这个XML文档仍然什么都不做,他只是用XML标记存储信息的文件。有人已经编写出来发送和接收并且显示这种格式信息的软件。
XML是自由的、可以扩展的。51Testing软件测试网_e%gX*~
P.n%j
XML标记并不是预先规定好的,你必须创造你自己的标记。在HTML文档中必须使用规则中定义好的标记。比如:<P><br><a></a>等等。XML允许你定义自己的标记以及文档结构。比如在上面例子中的"<to>"、"<from>"标记都不是在XML规范中事先定义好的。这些标记都是XML文档的作者“创造”出来的。
XML是HTML的补充。51Testing软件测试网
M3_A^%w6~)W&B
XML并不是HTML的替代品,理解这一点非常重要。在将来的网页开发中,XML将被用来描述、存储数据,而HTML则是用来格式化和显示数据的。对于XML最好的形容可能是:XML是一种跨平台的,与软、硬件无关的,处理信息的工具。
XML将成为最普遍的数据操纵和数据传输的工具。
o,c+mh'H3x^0XML在未来Web开发中的应用无处不在。XML发展的非常迅速,这实在令人感到惊奇,有很多的软件开发商都采用了XML标准。我们相信,在未来的Web开发中,XML将和HTML一样受到重视,他们都是Web技术的基础。
三、CSS:Cascading Style. Sheet,层叠样式表
%o z&v"F5Vnp0CSS基础这里就不多说了,整一本css手册便OK;在此主要说明HTML使用CSS的4种方式。
%m/}$I6o*MU\01.链入外部样式表文件(Linking to a Style. Sheet)
3U.tZ,K(J2J)h0<link href="css/test.css" type="text/css"/>
2.定义内部样式块对象(Embedding a Style. Block)51Testing软件测试网(k:q(Wiw!R\$x3M
<title>引用内部样式测试</title>51Testing软件测试网_6fJ:tDJ
</head>51Testing软件测试网'OK\+`D[
<body>51Testing软件测试网6J(_,]E.Q5YG
<font>testing font</font>
3.内联定义(Inline styles)
4f;hX
q!Y n q/B}03.内联定义(Inline styles)51Testing软件测试网,j,e2\'@ kDfT
<p style="background-color: #FFCC66;">测试内联定义</p>
4.导入样式(Import Styles):与链入外部样式的功能基本相同,只是语法和实现方式上有差别.51Testing软件测试网6i/C cZ5mu K.{
<head>
Py'Wak|.m0 <title>test importing styles</title>
(uG7h-U*cJJd0 <style>51Testing软件测试网!B`4T8g#D)?
@import url(css/test.css);
-TB%f&UXLf(\0 @import url("css/test.css") ;//单引号也可以
7_2@-oR+tvg
Z]r0 @import css/test.css;51Testing软件测试网$g/B^,CU+S B.I
@import "css/test.css"; //单引号也可以 51Testing软件测试网6D#q6l@ U9\
</style>51Testing软件测试网(h8?\7IAh&S?*w
</head>
m"GP/xm4l
q0几种方式的优先级:内联样式优先级最高,其次是外部链接样式,再次是内联式,最后是导入样式
51Testing软件测试网#BJ@|q'^0P8w`.I.SR
四、JavaScript,原名LiveScript,简称JS.
YdV/V?2mC-^_0JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。51Testing软件测试网*[f7r+Gc]*lE
1.类似于引用css的4种方式,使用js也有3种方式。
r"J"e_j/aki0a.链入外部JS文件
'O)r y/aUEqX0<head>
$y-`6KLH2W%K0<script. language="JavaScript" src="test.js"></script>
*Q|gtk%P0</head>
b.引用内部JS文件51Testing软件测试网Mi)ki9iz]^.s
编写第一个JavaScript程序
1s9nu(yqo6t X0 <html>
gWAyu p9O0 <head>
t(aJX&_6UyF?0 <script. type="text/javascript">
8]n_[?0 <!--51Testing软件测试网&Yb-~.tu?5z
function checkForm(form)
:K*u;oh_0 {51Testing软件测试网c5G7Oj4L4Tz5HExV3Tr)Um
if(form.username.value==''){51Testing软件测试网`-hb3^#NdaB4Dd
alert('用户名不能为空!');51Testing软件测试网*A[GV#Y8B
form.username.focus();51Testing软件测试网QC m
n!a*V@
return false;
Fgn(rdr1T+E!R0 }51Testing软件测试网Do[ jA?2t
......51Testing软件测试网VQn^@3n0Te
}
K m3`|yOqv0 -->
wCB H.AcW`|7Y0 </script>51Testing软件测试网pAOIm Z
M*MC9m
</head>
+^Yi4L%g(Bo'VR-S5Fp0 <body>
;EP-M1SVZd0 <form. method="POST" nsubmit="returm checkForm(this);">
G
bJ1n&oJl8`0 </form>
6`2pZr
~cY0 </body>51Testing软件测试网"Oy!Z^9qr8o_
</html>
c.内联JS
O0_-x%H*i
~cG0<input type="button" name="register" nclick="javascript.:location.href='register.php'" value= "register ">
2.Java、Javascrīpt和Jscrīpt的区别51Testing软件测试网4l1H+R.f ~d
首先,这三者没有必然的联系,它们是完全不同的事物,它们是分别由不同公司开发的,在函数方面有相同的地方,也有很多不同之处。Java是由Sun公司创立、开发;Javascrīpt则是Sun和Netscape公司共同开发的产品;Jscrīpt是微软对ECMA262语言规范的一种实现。这三者的共同点是,语法与C语言相似。JS是Javascrīpt的简称。51Testing软件测试网$C0V7J.hk&`
其次,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。51Testing软件测试网;` E1Wn3~
AJAX是一种创建交互式网页应用的网页开发技术。通过 AJAX,您的 JavaScript. 可使用 JavaScript. 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的JavaScript. 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX 可使因特网应用程序更小、更快,更友好。
根据Ajax提出者Jesse James Garrett建议,AJAX使用:
W#e9\EC!qd8kA%G0 1、使用XHTML+CSS来表示信息;
&A P{W(n0 2、使用JavaScript操作DOM(Document Object Model)进行动态显示及交互;
0y#_KGmDl
WT~0 3、使用XML和XSLT进行数据交换及相关操作;
1bi
a/lF'B$IVd7k0 4、使用XMLHttpRequest对象与Web服务器进行异步数据交换;51Testing软件测试网.RR hG!ox
5、使用JavaScript将所有的东西绑定在一起。
7iiQ(D]"WEG7_0
mu2cbq_h9Sp/].I0
3vY)`NJd&d0六、PHP(Personal Hypertext Preprocessor),超文本预处理语言。
ASP(Active Server Pages),动态服务器页面。
JSP(Java Server Pages),Java服务器页面。51Testing软件测试网'q~ l'Il.a2@
JSP(Java Server Pages),Java服务器页面。51Testing软件测试网
^`N Q,BZ(Jt!g.k+d
PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C, Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。开源、免费、它支持目前绝大多数数据库。51Testing软件测试网
cL/N%~9{/Ad+~0CgZk
ASP采用脚本语言VBScript作为自己的开发语言。
XC#A%D9{}:B;s A@? S`0JSP是Sun公司推出的新一代网站开发语言,Sun公司借助自己在Java上的不凡造诣,将Java从Java应用程序和Java Applet之外,又有新的硕果,就是JSP。JSP可以在Serverlet和JavaBean的支持下,完成功能强大的站点程序。51Testing软件测试网yl%?6}t(RE1k
ASP技术特点
|2?7IS tM }C0
!smtZv PQ051Testing软件测试网4IMqB|T
参考众多文章资料,在此一一谢过!
相关阅读:
- linux下php、apache、mysql、curl环境搭建 (welcome_zhang, 2011-8-15)
- PHP面试题及答案[转][精] (welcome_zhang, 2011-8-15)
TAG: ajax AJAX ASP CSS css HTML html js JS JSP PHP php web Web 基础