web开发技术概要

PartI Web开发 (2)第1章HTML&CSS (2)1.1 HTML (2)1.1.1 重要标签集合 (3)1.1.2 Mail Client Demo (3)1.1.3 总结 (5)1.1.4 HTML与HTML5的区别 (5)1.2 CSS (6)1.2.1 HTML的标签 (6)1.2.2 HTML与CSS组合方法 (6)1.2.3 CSS文件 (7)第2章JavaScript (8)2.1 Javascript与Html的组合 (9)2.2 JavaScript基础 (9)2.3 客户端JavaScript (16)第3章XML (19)3.1 XML语法 (19)3.2 XML解析 (25)第4章Java Web开发-web服务器 (27)3.1 前端技术 (28)3.2 后台技术 (29)第5章JavaWeb开发-数据库 (51)5.1 SQL语言 (53)5.2 JDBC—基本操作 (55)5.2 事务处理 (58)5.3 JDBC Demo (62)5.4 框架设计思想(重点：思想) (62)附录A JUnit (66)附录B Http协议 (66)1，请求 (66)2，响应 (68)3，服务器缓存策略 (68)附录C Servlet快速构建 (70)附录D 难点问题探讨 (71)1，字符乱码解决 (71)附录E 设计模式概要 (71)PartI Web开发Java web由前端和后端两个部分组成，其中：前端主要浏览器部分，负责解析和显示。

后端可以分为两个部分：前端开发技术：呈现给浏览器显示的部分1，静态网页设计比较常见的使用方式：HTML-描述网页内容( 对数据的封装)2，动态网页设计3，CSS-描述网页的设计样式(对数据格式显示样式)->UI设计部分JavaScript-描述动作行为，主要能与用户做动态交互->行为设计部分后台开发技术：服务器自身获取数据部分1，数据库设计2，Servlet，Jsp技术第1章HTML&CSSHTML主要应用于描述网页的内容，而CSS对网页样式设计，其两个部分就能够保证实现一比较漂亮的静态网页。

1.1 HTML对于HTML，其框架格式可以总结如下：其中，标题实质就是Tab名字，而HTML编辑最关键点是设定内容区间的东西。

其可以分为两个部分：1，格式设定(排版标记, 字体标记, 其他标记, StyleSheet等)[CSS做样式设定和排版]2，内容编辑(常用：清单标记,表格标记, 表单标记, 图形标记, 连结标记) 其中，HTML一般配合CSS做UI样式设定，配合JavaScript做内容编辑，所以HTML学习的关键点怎么引用CSS&JavaScript，及一些资源。

1.1.1 重要标签集合1，链接标记基本语法：<a href="index.html?xxx&xxxxx" name="hello" target="_new">[content]</a>href链接到目标网页name:该网页内部链接，引用使用#hello：1,某处记录了hello点2，另外一处链接到hello点。

<a href="#hello"></a>target：目标网页开启方式说明：当前页or 新页?xxx&xxxxx:拼接参数，用于提交特定信息给服务器端2，表单标签可以理解相当一系列组件，用于提交一组信息给服务器端。

在样式设计中，常配合表格标签一起用于web 客户端UI设计，常用方式见1.1.2节。

其中method只有post和get两个方法。

1.1.2 Mail Client Demoregister.html1.1.3 总结通过上面例子总结，HTML的设计思路如下：1，做需求分析，Web UI上需要哪些控件2，以网格来规划其控件的布局分割3，以表格定义整个布局，而后将表单插入对应的表格Item中5，微调表格Item中的布局1.1.4 HTML与HTML5的区别Html为超文本，显示网页的内容，而html5已经定义了一完整的语言框架，应用于web移动应用开发。

具体差异性如下：HTML4 HTML5语法修改表单增强新部分- File API- 拖放API- Canvas API(绘图)- 多媒体播放- Web Storage与本地数据库- 离线应用程序开发- 通信API- 线程API- 地图地理信息API所以，一般Html&javaScript&css组合成为web前端的技术，而html5&javaScript&css不仅扩展了前端的技术，且还可以适合做web的移动应用程序开发。

1.2 CSS之前HTML即要处理数据内容的封装，也要做格式样式的显示，且样式设计还比较复杂就显示的比较麻烦。

为此，就引入CSS，其中：HTML：数据内容封装CSS：格式样式设计1.2.1 HTML的标签HTML中配合CSS使用的两个重要标签：div 只是数据封装，表示一个区段，占用1行span 只是数据封装，占用数据所在的区域格式：<div [属性]>datas</div><span [属性]>datas</span>属性(style):嵌入CSS属性属性(class,id)：为CSS做样式设计使用datas：封装的数据对象，其中常有：链接，文本，图片，视频，清单，表格，表单，故html这些标签都是可以作为数据的。

1.2.2 HTML与CSS组合方法HTML与CSS的组合方式总的来说有三种类型，如下：1直接嵌入：<div style="color: red ">hello world</div>2 在HTML中创建选择器，作用于该Html文件3 样式设计以.css文件独立存在，HTML中引用该文件。

其格式如下:已知：style.cssorNote:从工程设计上来讲使用方法3.1.2.3 CSS文件css文件一般是由多个定义的选择器组织在一起，每个选择器定义了标签对应的样式属性集合，本章节主要介绍选择器的功能方式。

1，选择器分为基础选择器和组合选择器两种类型，其分别如下：类别名字定义基础形式标签选择器标签名{css属性值}作用域：引入该css的html文件所有该标签名字类选择器.name {css 属性值}<div class="name">datas</div>作用域：Html文件中含有同一类名字的所有标签ID选择器#ID {css属性值}<div id="ID">datas</div>作用域：ID标示标签的唯一性，对具体的一标签作用组合形式关联选择器父标签子标签{css属性值}组合选择器标签A，标签B{css属性值}伪元素选择器-2，css属性见CSS文档库参考。

3，盒子模型第2章JavaScriptJavaScript为动态交互技术，能够处理一些动态的行为显示，对html的网页显示技术做了有效的补充，也是前端开发的技术支持之一。

一完整的JavaScript部分含有三个部分组成：ECMAScriptDomBom2.1 Javascript与Html的组合有嵌入式和引用两种方式：1，html中直接嵌入script代码<script type="text/javascript">script part;</script>2，html中引用一js文件define style.js firstly ,then execute the following sentence to reference this file: <script type="text/javascript" src="style.js"></script>head 部分[加载页面]包含函数的脚本位于文档的 head 部分。

这样我们就可以确保在调用函数前，脚本已经载入了。

body 部分[显示页面]执行位于 body 部分的脚本。

2.2 JavaScript基础2.2.1 JavaScript语法参考w3c部分W3CSchool全套Web开发手册.chm这里只列出来与Java不同的地方。

数据类型关键字var：变量声明function：函数声明语法for ---in 循环:for(element in collections) {}colletions=数组类型，那element为数组索引collections=对象类型，那element表示对象中的属性的值函数声明：1）function 函数名字(参数) { return 任意；}2）[匿名函数]value = function(参数) { return 任意；} //一般绑定到具体的事件使用参数：1，可以不带参数，如果带参数，参数不需要做任何类型定义函数特性：Javascript中没有重载函数的概念，若以JS文件中有两个同名函数，后面的函数会覆盖前面的函数。

数组：一维数组：var list = [x,x,x,x,x,x];var list =new Array(value);value- 为空-长度-一组值二维数组：特性：1，数组为弱定义，为自动增加的动态数组,无边界溢出2，数组本身就作为一对象，其索引的概念：方法：1，数组常规的用法2，遍历：增加for--in方式3，作为对象，方法push/pop[尾] unshift/shift[头] contact //连接join (数组拼接为字符串) toString/toLocaleString reverse//数组内容修改过滤操作sortslicesplice：//contact并不修改数组元素，但splice会修改到数组常用API：alert(any var); //弹提示框windows.confirm(any var);//确认window.prompt("hint message","input value") ;//录入input value:it can be assigned to nullreturn:string or nulldocument.write(any var);//向网页写内容parseInt(String,radix);//字符串装换为整形2.2.2 JavaScript面向对象2.2.2.1 原型在Java中所有对象都继承于Object，但JavaScript中，每个对象都继承Object.prototype原型。