JavaWeb基础入门-优快云博客

本文介绍了JavaWeb的基础概念，包括Web应用的不同架构模式如CS和BS，重点讲解了html、css和javascript等前端技术，以及如何使用Servelet和JSP进行后端开发。

1.学习java Web要学习那些东西？

html/css/javascript /Servelet/jsp/Ajax

2.了解什么是Web应用？

(1)cs即Client/Server。

a.两层的CS软件系统体系架构。Server上安装了数据库，大量的业务逻辑写在了数据库中，是用数据库语言来写的。客户端有少量的业务逻辑，界面。

两层CS流行的原因：开发的效率比较高。

最大的缺点：可移植性差。只要数据库一换，需要重写业务逻辑。由于数据库编程的语言在同数据库之间是有差异的，并且同一个数据库不同版本语言还会有些差异，如果数据库更换了，重写一遍业务逻辑的工作量相当的大。

(2)java流行的原因：主要是因为两层的cs软件系统体系结构可移植性太差，后来的数据库就写很少的业务逻辑，大部分的业务逻辑都写在了应用服务器当中。编写客户端所使用的语言是不限定的。由于应用服务器一般都是用java写的，由于java的可移植性比较好，所以就这样流行起来了。

三层的CS软件系统体系架构。由于Java写了应用服务器，在客户端和服务器之间还有应用服务器，所以是三层的CS。

三层CS的缺点：开发起来有一定的难度。a.客户端和服务器直接需要自定义协议b.开发服务器，需要考虑网络安全，线程并发等一系列的问题b.可维护性差（升级服务器的同时，还得升级客户端，客户端需要单独维护，所以工作量相当的大）

(3)BS现在主流的软件系统体系架构，浏览器服务器模式。

流行的原因：服务器不用开发了，已经有了标准的Web Server，客户端不用单独开发，浏览器就是客户端。

浏览器和服务器直接通信的协议是：http。

需要做的工作是开放界面，所用的工具是：html，css，javascript。
对于服务器。我们需要在上面写业务逻辑，所使用的工具是severlet和JSP

优势在于开发比较简单，不用专门写协议，客户端不用单独去维护。

3.一个正式的Web项目需要做的工作有如下：

美工做界面。程序员写后台程序，处理业务逻辑，在美工提供的界面的基础上来开发程序。

4.html基础

(1)什么是html。

hypertext markup language 超文本标记语言，是一种用于开发网页的语言，由浏览器解释执行。解释的方式是，将html代码一行行读入内存，在内存中形成一颗DOM树。创建者：Tim berners lee号称Web之父。

（2）.html文件的基本结构：

<html>
	  <head>
		<title>
		</title>
		<!--用于模拟http消息头相当于服务器给浏览器发送了一个消息头-->
		<!--比如,以下消息头的作用，是告诉浏览器，返回的是一个html,并且应该以utf-8的编码来显示
		该页面-->
		<meta http-equiv="content-type"
		content="text/html;charset=utf-8"> 
		<!--引入脚本 为什么在页面开发中需要引入脚本呢？-->
		<script>
		<!--定义样式-->
		<style>
		<!--引入外部样式-->
		<link>
	  </head> 对页面的显示没有影响，主要作用是标题
	  <body>
		<!--页面显示的数据-->
	  </body>
</html>

（3）Web开发标准

建议开发一个页面的时候这样开发。页面的结构有html来负责，页面的外观有css来负责，页面的行为有javascript来负责。

（4）重点掌握的5个标记

a._blank:在一个新的空白的窗口中打开url地址所对应的内容。_self:在当前窗口中打开。

            <a href="url地址" target="_blank">链接的一个描述</a>    /*将url所指的内容在新窗口中打开。*/

b.使用图片作为链接

            <a href="feng.html"><img src="图片地址" width="" height="" border=""/></a> /*在feng.html这个页面打开图片*/

c.使用热点

                   <img ..... usemap="#Map"> /*引用热点，划分区域*/
		   <map name="Map">
			<area shape="rect" coords="407,20,560,77" href="url地址">
			<area shape="rect" coords="580,22,734,76" href="url地址">
		   </map>用map来定义热点

d.使用锚点：在同一个页面直接来跳转。

           <a name="top">some data....</a>
	   <div style="height:900px;"></div>
	   <a href="#top">to top</a>   /*点击to top时，会跳到some data那个地方*/

e.发送email

	   <a href="mailto:94374465@qq.com"></a> /*这个地址发一下邮件 */

(5)列表

a.无序列表

          <ul>
			<li><a href="#">item1</a></li>
			<li>item2</li>
			<li>item3</li>
	  </ul>

b.有序列表

          <ol>
			<li a href="#">item1</li>
			<li>item2</li>
			<li>item3</li>
	  </ol>

c.列表的嵌套

          <ul>
		    <li a href="#">item1</li>
		    <ul>
				<li>item1</li>
				<li>item2</li>
			</ul>
			<li>item2</li>
	  </ul>

(6)表格的使用

格式：

          <table>
		<tr>
		  <td></td><td></td><td>2000</td>
		</tr>
		<tr>
		  <td></td><td></td><td>salary</td>
		</tr>
	  </table>

a.基本使用

            <table border="" cellpadding="" cellspacing="" width="">

border值边框 cellpadding单元格是数据直接的距离 cellspacing;单元格直接的距离 align:表示水平位置 left/right/center 默认靠左显示

valign:表示垂直位置 top/middle/bottom

b不规则的表格

clospan:跨列合并

rowspan:跨行合并

c.表格的另一种写法

             <table>
                 <caption>标题</caption>
                 <thead></thead>
                 <tfoot></tfoot>
                 <tbody></tbody>
                 <tbody></tbody>
             </table>

thead:可以有0-1个

tfoot:表脚可以有0-1个

tbody可以有1-n个

d.表格可以嵌套

(7)表单，用于收集用户的信息

        <form>
	  <input type="text"/>
	</form>

input标记：

type="text" 文本输入框

type="submit" 提交按钮

type="reset" 重置按钮

type="password" 密码输入框

type="radio" 单选

type="checkbox"多选

type="file" 上传文件有个要求，需要给form添加一个属性enctype="multipart/form-data"

type="hidden" 隐藏域

非input标记

<textarea>多行文本输入框

<select>下拉列表

(8)框架

a.<frameset><frame> frameset不能够写在body里面，可以嵌套使用

b.<iframe>可以写在body里面，表示嵌套一个子窗口

<frameset rows="20%",*>*表示窗口中剩下的部分。

(9)其他标记

a.行内标记，不单独占一行的标记

b.块级标记

(10)实体

在html页面出现了空格，>，<，& 用相应的实体去替代。

&nbsp:空格 &gt:> << &quot: '' &amp: &

html一些基础知识