第一章 WEB开发基础
本章概要:
本章主要阐述了进行WEB开发所需要必备的技术储备(XHTML/JavaScript/CSS)。
XHTML、CSS、JavaScript是DHTML的基本组成部分,它们以成为现代网页设计中必不可少的关键要素。但是由于种种原因,真正精通XHTML/JavaScript/CSS却绝非易事。在使用与开发网站时,会遇到形形色色的问题,而解决方案又五花八门,往往让使用者感觉头晕目眩,本章将带着你从头至尾的了解与学习现代B/S开发的基础。
知识结构:
第一节 WEB开发技术简介
1. WEB技术概述
u 什么是网页
网页(Web Page)实际是一个文件,存放在世界某个角落的某一台计算机中,而这台计算机必须是与互联网相连的,称为Web服务器。网页经由网址来识别与存取,当在浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到使用者的计算机,然后再通过浏览器解释网页的内容,再展示到用户的面前。
图1-1 WEB页面工作机制
网页的两个最基本的元素是文字与图片。可以简单的理解为:文字,就是网页的内容;图片,就是网页的美观。除此之外,网页的元素还包括动画、音乐、程序等等。在WEB应用中,存在两种页面:静态页面和动态页面。
u 静态页面
静态网页:是单向服务,如常见的新闻网页等。在这种服务中,WEB页面只能向用户显示预先编辑好的信息,用户只能查看页面不能有其他行为,以常见的HTML网页(文件后缀为.html或.htm)为主。
u 动态页面
动态网页:与静态网页相对应,动态网页提供的服务是双向的,它即可以向用户传递信息,也能够接受用户反馈,并根据反馈做出响应,常见的网页类型如.php、.asp、.aspx等。动态网页的应用非常广泛,如聊天室、论坛、电子商务应用等。
通常看到网页,都是以htm或html后缀结尾的文件,简称HTML文件,除此之外,还有例如以CGI、ASP、PHP、JSP甚至其他更多为后缀的网页类型,也代表了不同的网页开发技术。
2. 开发技术介绍
u HTML
HTML全称:HTML是Hypertext Marked Language的英文缩写,即超文本标记语言。是一种用来制作超文本文档的简单标记语言(制作网页的最基本的语言),它是以标签为标记,每个标签都表示一种意义。通过浏览器软件可以让HTML代码还原(如:FireFox, IE等),浏览器从上至自下解读。如果标签写错,则忽略。不区分大小写。HTML文件必须使用html或htm为文件名后缀。
HTML编写的超文本文档(文件)称为HTML文档(网页),它能独立于各种操作系统平台(如UNIX,WINDOWS等,并且可以通知浏览器显示什么.自1990年以来HTML就一直被用作互联网的信息表示语言,用于描述网页的格式设计以及它与互联网上其它网页间的连结信息。
u DHTML
DHTML全称:DHTML是Dynamic Hyper Text Markup Language的英文缩写,即动态超文本标记语言。功能和HTML一样,只不过是结合了javascript、css等技术。确切地说,DHTML只是一种制作网页的概念,实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范,DHTML只是一种将目前已有的网页技术、语言标准整和运用,制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。
u XHTML
XHTML全称:XHTML是The Extensible HyperText Markup Language的英文缩写,即可扩展标识语言。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。XHTML恰恰就是HTML 4.0的重新组织,确切的说它是HTML 4.01,是一个修正版本的HTML 4.0,只不过以XHTML 1.0命名发行。 它们在XML里的解释会有一些必要的差别,但另一方面,它们依然非常相似,我们可以把XHTML的工作看作是HTML 4.0基础上的延续。
u PHP
PHP(Hypertext Preprocessor,超文本预处理器),其优势在于其运行效率比一般的CGI程序要高,而且完全免费,任何人都可以从PHP官方部点http://www.php.net/自由下载。PHP最大的特点就是和JSP一样是跨平台的,可以运行在Unix、Linux、Windows这三大平台上,并且在全世界有着广泛的用户群,性能高效安全性高,不过其OOP方面比ASP.NET和JSP要相差很多,并且由于其是Open Source软件所以商业文档与支持是没有的,所有的一切文档与支持都要靠开源世界来提供。
u JSP
JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML文件 (*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。
Web服务器在遇到访问JSP网页的请求时,首先执行其中的程序段,然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等,以实现建立动态网页所需要的功能。
JSP与Java Servlet一样,是在服务器端执行的,通常返回该客户端的就是一个HTML文本,因此客户端只要有浏览器就能浏览。
1. JSP技术的强势
(1)一次编写,到处运行。在这一点上Java比PHP更出色,除了系统之外,代码不用做任何更改。
(2)系统的多平台支持。基本上可以在所有平台上的任意环境中开发,在任意环境中进行系统部署,在任意环境中扩展。相比PHP的局限性是现而易见的。
2. JSP技术的弱势
(1) 与ASP一样,Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能,为了极度的伸缩能力,所以极大的增加了产品的复杂性。
(2) Java的运行速度是用class常驻内存来完成的,所以它在一些情况下所使用的内存比起用户数量来说确实是“最低性能价格比”了。从另一方面,它还需要硬盘空间来储存一系列的.java文件和.class文件,以及对应的版本文件。
u ASP.NET
ASP.NET是Microsoft.NET的一部分,作为战略产品,不仅仅是 Active Server Page (ASP) 的下一个版本;它还提供了一个统一的 Web 开发模型,其中包括开发人员生成企业级 Web 应用程序所需的各种服务。ASP.NET 的语法在很大程度上与 ASP 兼容,同时它还提供一种新的编程模型和结构,可生成伸缩性和稳定性更好的应用程序,并提供更好的安全保护。可以通过在现有 ASP 应用程序中逐渐添加 ASP.NET 功能,随时增强 ASP 应用程序的功能。
ASP.NET 是一个已编译的、基于 .NET 的环境,可以用任何与 .NET 兼容的语言(包括 Visual Basic .NET、C# 和 JScript .NET.)创作应用程序。另外,任何 ASP.NET 应用程序都可以使用整个 .NET Framework。开发人员可以方便地获得这些技术的优点,其中包括托管的公共语言运行库环境、类型安全、继承等等
ASP.NET 可以无缝地与 WYSIWYG HTML 编辑器和其他编程工具(包括 Microsoft Visual Studio .NET)一起工作。这不仅使得 Web 开发更加方便,而且还能提供这些工具必须提供的所有优点,包括开发人员可以用来将服务器控件拖放到 Web 页的 GUI 和完全集成的调试支持。
微软为ASP.net设计了这样一些策略:易于写出结构清晰的代码、代码易于重用和共享、可用编译类语言编写等等,目的是让程序员更容易开发出Web应用,满足计算向Web转移的战略需要。
ASP.NET提供了稳定的性能、优秀的升级性、更快速的开发、更简便的管理、全新的语言以及网络服务。贯穿整个ASP.NET的主题就是系统帮用户做了大部分不重要的琐碎的工作。
对于一个程序,速度是一件非常令人渴望的东西。一旦代码开始工作,接下来你就得尽可能地让它运作得快些快些再快些。在ASP中你只有尽可能精简你的代码,以至于不得不将它们移植到一个仅有很少一点性能的部件中。而现在,ASP.NET会妥善地解决这一问题。在ASP.NET里,你将会拥有一个“Data-Bounds” (数据约束),这意味着它会与数据源连接,并会自动装入数据,使控制工作简单易行。
ASP.NET支持多种语言,支持编译类语言,支持比如VB、VC++、C#等,它比这些编译类语言运行速度快,更适合编写大型应用。快速发展的分布式应用也需要更快速、更模块化、更易操作、更多平台支持和重复利用性更强的开发,需要一种新的技术来适应不同的系统,网络应用和网站需要提供一种更加强大的可升级的服务。ASP.NET能够适应上面的要求。
对于今天的Web程序员来说,最大的挑战就是不断变化的浏览器兼容性以及它们不断升级的复杂性。在保证页面能在所有浏览器下工作的同时,又得尽量使用每个浏览器的最新属性来建立更具交互性的页面,这简直就是一场恶梦。更加可怕的是,需要对不同的用户设备建立不同的网页。
最简单的解决办法就是动态地对不同的用户生成不同的输出,或者就是对不同的用户写多个页面。大多数开发者都会选择第一种方法。但是,这就意味着用户的每次点击都会让服务器判断应该向用户显示什么。而通过ASP.NET,我们可以看到一个新的服务控制的概念,它封装了一些普通的任务,提供了一种清晰的编程模块,有助于管理和处理不同的用户类型。简单地说,ASP.NET把这些过程自动化了。
3. XHTML的组成结构
u HTML的基本组成结构
头部:写法就是<head>头部的内容</head>。
眼睛:写法就是<title>标题</title>这些应放在<head>和</head>之间。也就是<head><title>标题</title></head>。
身体:写法也就是,<body>页面内容</body>。
最后,别忘了把这些部分组成一体—-网页,所以咱们就用<html></html>把他们给包起来。好了,咱们来大体看看网页的结构:
<html>
<head>
<title> 标题</title>
</head>
<body>
页面内容
</body>
</html>
u 标签及标签的存在形式
l 以<>开头,以</>结束。
l 无结束标记。
u html的注释
〈!――注释语言――〉作用:
对html代码进行说明,遇到浏览器不支持的代码时可以屏蔽掉,而不出错。
u HEAD标签中存放的内容
HEAD标签中存放的主要内容是HTML的标题和首部
l TITLE网页的标题:
用法:<title>网页标题</title>
l META:
用法1:
关键字搜索
<meta name=”keywords” content=”关键字1,关键字2,关键字3……”>
用法2:
设置语言的字符信息
<meta
http-equiv=”content-type” content=”text/html” ;charset=”gb2312”>
用法3:
自动刷新
<meta http-equiv=”refresh” content=”秒数” url=”链接地址”>
例:
<meta http-equiv=”refresh” content=”10” url=”index.html>
4. BODY标签中的内部细则
u 背景颜色:
l 其中属性:
Bgcolor 网页背景颜色
Text 非链接文字颜色
Link 可链接文字颜色
Alink 被激活文字颜色
Vlink 访问过的文字颜色
topmargin 内容距离网页顶部的距离
leftmargin 内容距离网页左部的距离
background 网页的背景图片
bgsound 网页的背景音乐
l 常用颜色列表:
颜色 |
英文表示 |
十六进制 |
颜色 |
英文表示 |
十六进制 |
黑色 |
Black |
#000000 |
白色 |
White |
#ffffff |
银灰色 |
Silver |
#c0c0c0 |
灰色 |
gray |
#808080 |
鸭绿色 |
Teal |
#008080 |
纯红色 |
Red |
#ff0000 |
纯蓝色 |
Blue |
#0000ff |
暗红色 |
Maroon |
#800000 |
海军蓝 |
Navy |
#000080 |
橄榄绿 |
olive |
#808000 |
翠绿色 |
Lime |
#00ff00 |
绿色 |
Green |
#008000 |
樱桃红 |
Fuchsia |
#ff00ff |
紫色 |
Purple |
#800080 |
纯黄色 |
Yellow |
#ffff00 |
浅绿色 |
Aqua |
#00ffff |
第二节 XHTML的具体标签
关于超级链接标签:<a>
l 标签用法演示与用法:
用法1:
<a href=”链接地址” title=”提示文字”>链接文字</a>
用法2:
设置书签(锚点)<a name=”a1”>链接文字或文字段落</a>
用法3:
链接到本网页书签<a href=”#a1”>链接文字</a>
用法4:
链接到其他网页书签<a href=”index.html#a1”>链接文字</a>
用法5:
打开新窗口<a href=”链接地址” target=”_blank”>链接文字</a>
说明:target为窗口属性而_blank为新窗口。
2. 标题标签:<h>
l 标签用法演示:
l 标签代码:
<h1>这是一个测试h标签</h1>
<h2>这是一个测试h标签</h2>
<h3>这是一个测试h标签</h3>
<h4>这是一个测试h标签</h4>
<h5>这是一个测试h标签</h5>
3. 关于图像标签:<img>
l 标签用法演示:
l 属性说明:
来源:weixin_30919235
声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!