简单来说，C/S架构是客户端和服务器直接相连，实现点对点的通信，B/S架构是浏览器通过Web服务器向数据库服务器发送数据请求，实现多对多的通信，要实现B/S架构，需要使用到网页，因此就需要学习Web的知识；
Java语言也可以做C/S架构的开发，比如我们常用的Eclipse就是使用Java语言写的图形界面化软件；随着Internet和www的流行，以往的主机/终端和C/S都无法满足当前的全球网络开放、互连、信息随处可见和信息共享的新要求，于是就出现了B/S型模式，学习Java语言，需要着重学习B/S架构的开发；静态web资源（如html页面）：指web页面中供人们浏览的数据始终是不变。 动态web资源：指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同；
静态web资源开发技术：HTML 常用动态web资源开发技术：JSP/Servlet、ASP、PHP等； 在Java中，动态web资源开发技术统称为Java Web；WEB应用程序
Web应用程序指供浏览器访问的程序，通常也简称为web应用；例如有a.html 、b.html……多个web资源，这多个web资源用于对外提供服务，此时应把这多个web资源放在一个目录中，以组成一个web应用（或web应用程序）；一个web应用由多个静态web资源和动态web资源组成，如：html、css、js文件，Jsp文件、Java程序、支持jar包、配置文件等等；Web应用开发好后，若想供外界访问，需要把Web应用所在目录交给Web服务器管理，这个过程称之为虚拟目录的映射；静态Web：*htm、*html，这些是网页的后缀，如果现在在一个服务器上直接读取这些内容，那么意味着是把这些网页的内容通过网络服务器展现给用户。
整个静态WEB操作的过程为：首先客户端使用WEB浏览器（IE、FireFox等）经过网络(Network)连接到服务器上 ——> 使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面 ——> 所有的请求交给WEB服务器 ——> 之后WEB服务器根据用户的需要，从文件系统（存放了所有静态页面的磁盘）取出内容 ——> 之后通过WEB服务器返回给客户端 ——> 客户端接收到内容之后经过浏览器渲染解析，得到显示的效果。
静态WEB中存在以下几个缺点：
Web页面中的内容无法动态更新，所有的用户每时每刻看见的内容和最终效果都是一样的； 为了可以让静态的WEB的显示更加好看，可以加入了JavaScript以完成一些页面上的显示特效，但是这些特效都是在客户端上借助于浏览器展现给用户的，所以在服务器上本身并没有任何的变化； 实现静态WEB客户端动态效果的手段：JavaScript、 VBScript，在实际的开发中JavaScript使用得最多。 静态WEB无法连接数据库，无法实现和用户的交互。 使用数据库保存数据是现在大多数系统的选择，因为数据库中可以方便地管理数据，增删改查操作可以使用标准的SQL语句完成。 动态Web：所谓的动态不是指页面会动，主要的特性的是：Web的页面展示效果因时因人而变”，而且动态Web具有交互性，Web的页面的内容可以动态更新；
整个动态Web操作的过程如下：动态Web中，程序依然使用客户端和服务端，客户端依然使用浏览器（IE、FireFox等） ——> 通过网络(Network)连接到服务器上 ——> 使用HTTP协议发起请求（Request） ——> 现在的所有请求都先经过一个WEB Server Plugin（服务器插件）来处理，此插件用于区分是请求的是静态资源(*.htm或者是*.html)还是动态资源。
如果Web Server Plugin发现客户端请求的是静态资源(.htm或者是.htm)，则将请求直接转交给WEB服务器，之后WEB服务器从文件系统中取出内容，发送回客户端浏览器进行解析执行。
如果WEB Server Plugin发现客户端请求的是动态资源（.jsp、.asp、*.php），则先将请求转交给Web Container(WEB容器)，在Web Container中连接数据库，从数据库中取出数据等一系列操作后动态拼凑页面的展示内容，拼凑页面的展示内容后，把所有的展示内容交给Web服务器，之后通过Web服务器将内容发送回客户端浏览器进行解析执行。
动态WEB应用的实现手段： 动态WEB现在的实现手段非常多，较为常见的有以下几种：Microsoft ASP、ASP.NET、PHP、JAVA Servlet/JSP；
标记：
由一系列标签组成，W3C已经帮我们预定好一套表签，我们只需要简单记忆这个标签是做什么的；HTML标记两端有两个符号 “<” 和 “>”，这两个符号称为角括号；标签：
标签主要分为两种：1、围堵标签：成对出现，比如a标签，有开始，也有结束；
<a></a>前一个是开始标记，后面的是结束标记，在开始和结束标记之间的的文本是元素内容。
2、自闭和标签：单个出现
</hr> 或者写成 <hr/> html标记是与大小写无关的， <html> 和 <HTML>所表示的意思的一样的；
标记可以拥有自己的属性，属性的作用是为页面上的HTML元素提供附加信息。html的文档结构主要是有3部分组成的：
1、<html></html><html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
2、<head>和</head><head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
3、<body>和</body><body>和</body>是html文档的主体部分，在此标记可以包括<p>,</p>,<h1>,<br>等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用；
——快速的写一个网页：新建一个文本文件，将后缀名改为html，并在文本文件中写入内容：
<html> <head> <meta charset="utf-8"/> <title>我的第一个静态网站</title> </head> <body> 欢迎光临我的网站 </body> </html>使用火狐浏览器解析执行：
以上是网页的一个最基本的模板；浏览器有内核，他会解析渲染这些网页；由于HTML语法很松散，即使有些地方写错，也不会报错，有可能带来的效果是网页展示出来没有达到想要的效果；标签所带的属性是为了控制这个元素的展示样式： <html> <head> <meta charset="utf-8"/> <title>我的第一个静态网站</title> </head> <body> 欢迎光临我的网站 <font size="4" color="red">这是带有属性的一行字</font> </body> </html> 在HTML语法中，注释的写法为： <!-- 这是一行注释 -->name属性
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。 meta标签中name属性语法格式是：
<meta name="参数" content="具体的描述">name属性的参数可以是：keywords(关键字)、description(网站内容的描述)、viewport(移动端的窗口)、robots(定义搜索引擎爬虫的索引方式)、author(作者)、copyright(版权)等；
<meta charset="utf-8" content="aquamarine"> <meta name="keywords" content="关键字"/> <meta name="description" content="具体的描述"> <meta name="author" content="作者"/> <meta name="generator" content="网页制作软件"/> <meta name="copyright" content="版权"/>在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。
<title>这是一个网站</title>或许你会发现这样一个问题：我们已经在记事本里排版排的很漂亮，为何通过浏览器查看是就变了样子，那是因为浏览器不像word，他不认识Enter键或者空格键，所以当你按多少次空格，浏览器都会当作没看见一样，要想在浏览器当中展示出空格，可以使用以下标记：
常用的分隔标记： 强制断行标记<br> 强制分段标记<p> 空格 代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 这是一行文字 <br> 这是第二行文字 <br> 所以有关搜索引擎注册 搜索引擎优化排名等网络营销方法内容中， <p>加入网站的描述或者网页的关键字，可使网站更加贴近用户体验。</p> </body> </html>在上面介绍过的分段标记<p>在加上一些简单的属性设定，就可以让其中的文字置左，置右，置中；
置中标记 <center>内容</center> 保持原始数 <pre>内容<pre>数据格式标记代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <center>所以有关搜索引擎注册搜索引擎优化排名等网络营销方法内容中，</center> <p align="center">p标签中的文字居中显示</p> <p align="left">p标签中的文字居左显示</p> <p align="right">p标签中的文字居右显示</p> <pre>pre标签————数据格式标记</pre> </body> </html>标题标记：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>设置字体标记：
<font size="4" color="red" face="黑体">内容</font> 字体大小为：1~7，再大不了了字体变化标记：
在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等；
<b>加粗</b> <i>斜体</i> <u>底线</u> <kbd>用粗体等宽字体显示文字</kbd> <var>用较小的固定宽度显示字体</var> <dfn>用于名词解释，斜体显示</dfn> <smap>用于字母序列等宽</smap> <sup>上标</sup> <sub>下标</sub> <em>强调</em> <address>模拟信封上的字体</address> <strong>加强</strong> <s>删除线</s> <strike>删除线</strike> <big>比默认字号大一号</big> <small>比默认字号小一号</small> <code>以等宽字体显示计算机程序代码</code>代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <b>加粗</b><br > <i>斜体</i><br > <u>底线</u><br > <kbd>用粗体等宽字体显示文字</kbd><br > <var>用较小的固定宽度显示字体</var><br > <dfn>用于名词解释，斜体显示</dfn><br > <smap>用于字母序列等宽</smap><br > <sup>上标</sup> O<sup>2</sup><br > <sub>下标</sub> H<sub>2</sub>O<br > <em>强调</em><br > <address>模拟信封上的字体</address> <!-- address自带换行 --> <strong>加强</strong><br > <s>删除线</s><br > <strike>删除线</strike><br > <big>比默认字号大一号</big><br > <small>比默认字号小一号</small><br > <code>以等宽字体显示计算机程序代码</code> </body> </html>模板代码：
<body bgcolor="red" backgroud="bg.jpg">代码示例1：
<html> <head> <meta charset="utf-8"> <title>背景颜色</title> </head> <body bgcolor="cadetblue"> <font size="4" color="red" face="宋体">背景颜色</font> </body> </html>代码示例2：
<html> <head> <meta charset="utf-8"> <title>背景图片</title> </head> <body background="img/banner2.jpg"> <font size="4" color="red" face="黑体">背景图片</font> </body> </html>使用：
上一部分<hr>下一部分代码演示：
<html> <head> <meta charset="utf-8"> <title>分割线</title> </head> <body> abcdefg。<br> <hr color="red" width="240" size="2" noshade> higklmn。 </body> </html>使用：向网页中插入图片
<img src="boy.jpg" alt="haha" align="left" border="0" height="56px" width="32px">代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/banner2.jpg" alt="haha" align="center" border="2" height="56px" width="80px" > </body> </html>代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- ul:无序列表，li是列表项，前面默认是小黑圆点 --> <ul type="circle"> <li> 列表项1 </li> <li> 列表项1 </li> <li> 列表项1 </li> <li> 列表项1 </li> </ul> <!-- ol有序列表 type选择序列样式 start默认是从几开始，可以给一个数字--> <ol start="5"> <li> 列表项1 </li> <li> 列表项1 </li> <li> 列表项1 </li> <li> 列表项1 </li> </ol> <!-- CSS配合他能做标题一栏，菜单按钮 --> <!-- 无非是样式给你缩进了一下 --> <dl> <dt>自定义列表标题</dt> <dd> 自定义列表列表项 自定义列表列表项 </dd> </dl> </body> </html>html中有很多特殊的字符是需要特殊的处理，转义字符
<———— < >———— > &———— & &qout;———— "" ———— 空格代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 有些字符已经被HTML用了，你要用这个字符你需要自己转义 --> 这之前有些空格的转义字符 <br> <!-- 想在页面内展示尖括号，直接写也行，但是不规范 <> --> <!-- 表示尖括号 --> <> <!-- 表示双引号 --> "" </body> </html>前三种超链接代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com">进入百度</a> <a href="http://www.163.com">进入网易</a> <a href="http://www.sina.com">进入新浪</a> <!-- target="_self"在自己的页面打开，在自身窗口打开这个页面，覆盖就窗口 --> <a href="index.html" target="_self">跳转自己的页面</a> <!-- target="_blank"，新启一个窗口打开 --> <a href="index.html" target="_blank">跳转自己的页面</a> </body> </html>锚点链接代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 定义一个锚点位置，链接写成#自定义锚点名称 --> <a href="#bottom" name="top">跳到底部</a> 小说内容 <a href="#top" name="bottom">跳到顶部</a> </body> </html>表格的结构
<table>...</table>是用来在html页面上创建表格的；<th>代表列名一般放在第一行<tr>代表格的一行。<td>用来定义表格的一列。在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 表格是必须存在的，有一种方式是div+CSS，后面说 --> <!-- 表格最早就是用来布局页面的 --> <!-- tr行 td列 th列属性 --> <!-- border边框 --> <!-- cellspacing调整缝隙 --> <!-- cellpadding内容和单元格的间距 --> <table border="6" cellspacing="6" cellpadding="30" width="500px" height="500px" align="center" bgcolor="burlywood" bordercolor="yellow"> <tr align="center" height="100px"> <!-- 调宽没意义，已经固定了 --> <!-- 一般来说，th做一个表头，但是用th可以帮你加粗居中 --> <th>姓名</th> <th>年龄</th> <th>电话</th> </tr> <tr align="center" bgcolor="aquamarine"> <td bgcolor="cadetblue">张三</td> <td>20</td> <td>110</td> </tr> <tr align="center"> <td>李四</td> <td>22</td> <td>120</td> </tr> </table> </body> </html>————部分标签必须用Opera浏览器测试
<input />标签的 type分为： text -文本框 button -按钮 submit-提交 reset-重置 password -密码 checkbox-多选 radio-单选 file -上传文件 date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） 写法：<input type = "text" value=""/> 1、邮箱输入框 <input type="email" name="user_email" /> 2、数字输入框 <input type="number" name="points" min="1" max="10" /> 3、数字范围输入框（进度条） <input type="range" name="points" min="1" max="10" /> 4、颜色选择框 <input type="color" name="colortext"/><br>代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 登陆、注册等————表单的作用就是前后台的交互 --> <!-- action=提交的后台路径 method=post、get请求方式 post:将请求参数封装到请求体里面提交，请求的数据大小无限制 get:将请求参数拼接在地址栏后面，请求的数据大小有限制--> <!-- input表单项需要提供name属性，因为他是要作为给后台提交的键，value是值 placeholder=默认提示 required="required"必须填，不填不能提交 maxlength最大提交5个字符--> <form action="#" method="get"> 用户名：<input type="text" id="" value="张三" name="username" placeholder="请输入用户名" required="required" maxlength="5"/><br /> 密码：<input type="password" id="" value="123456" name="password"/><br /> 性别：<input type="radio" id="" value="1" name="sex" checked="checked"/>男 <input type="radio" id="" value="0" name="sex"/>女 <input type="radio" name="sex" id="yao" value="" /><label for="yao">妖</label> <br /> <!-- 归为一组，name必须一样，否则就起不了作用了 --> <!-- checked默认选项选择 --> <!-- 用户体验，怎么点字也能选择，label 标签，这你就需要一个Id，要标签关联 --> <!-- id是唯一的，不要一样 --> 用户名：<input type="text" id="" value="" name=""/><br /> <!-- 下拉框 --> <select name="xueli"> <option value="1">请选择你的学历</option> <option value="x">小学</option> <option value="z">中学</option> <option value="g">高中</option> <option value="d" selected="selected">大学</option> <!-- selected="selected"默认选项 --> </select><br /> <!-- 个人介绍，文本域 --> 个人介绍：<textarea rows="" cols="" value="ms"> </textarea> <input type="submit" value="注册"/> <br /> <!-- 复选框 --> 爱好：<input type="checkbox" name="hobby" id="lq" value="" /><label for="lq">篮球</label> <!-- 点击篮球两个字也能被选中 --> <input type="checkbox" name="hobby" id="" value="" />足球 <!-- checked默认选择几个 --> </form> </body> </html>label 元素
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。Select标签：
<select> <option value="qxz" selected/>请选择 <option value=“A”/>苹果 <option value=“B”/>香蕉 <option value=“C”/>橘子 <option value=“D”/>西瓜 </select>TEXTAREA标签：
<TEXTAREA ROWS="5" COLS="30" ></TEXTAREA >代码演示：
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <select> <option value ="qxz">请选择：</option> <option value ="A">香蕉</option> <option value ="B">苹果</option> <option value ="C">橘子</option> <option value ="D">西瓜</option> </select> <textarea rows="5" cols="30"> </textarea> </body> </html>表单的用途：
表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的SP或者ASP或者CGI等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。表单构成：
<form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。标记具有action，metnod，target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。target属性用来制定目标窗口的。表单的工作原理： 1、访问者填写表单，并提交给web服务器处理； 2、在web服务器上的后台处理程序对提交后的数据进行处理； 3、后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。
<form action="#" method="get"> 姓名：<input type="text" id="name" value="" /><br /> 密码：<input type="password" name="pwd" /><br /> <input type="submit" value="提交"/> </form>示例代码：
<html> <head> <title>框架页示例</title> </head> <frameset rows="50%,50%"> <frame src="http://www.baidu.com"> <frameset cols="25%,75%"> <frame src="http://www.sina.com.cn"> <frame src="http://www.baidu.com"> </frameset> </frameset> </html>