本文详细介绍了B/S架构的概念及其组成要素，包括WebBrowser、HTTPProtocol、WebServer和WebPages。同时，文章阐述了HTML、CSS、JavaScript在构建Web页面中的应用，以及它们的基本构成和作用原理。
Web App的发展
1.Host-Based哑终端：终端处理能力极其有限。
2.C/S：Client-Server，终端处理功能强大，但更新不便。
3.B/S：Browser-Server，借助于浏览器，软件实时性增强了。
B/S所需参与者：
1.Web Browser
1.1.IE
1.2.Firefox
1.3.Chrome
2.HTTP Protocol：
Hyper Text Transfer Protocol
2.1.Request：请求消息
2.2.Response：响应消息
3.Web Server：
3.1.Tomcat3.2.Apache3.3.IIS
4.Web Pages：
4.1.内容4.2.结构：html4.3.表现：css4.4.行为：javascript
B/S工作原理：
1.建立连接。
2.客户端浏览器发出请求。
3.服务器对请求作出响应，客户端获取响应。
4.关闭连接。
HTML：
Hyper Text Markup Language，利用树形标签框架，来组织网页文档结构。
文件基本构成：
<html> <head> </head> <body> </body> </html>
有了这三个标签做框架，其他标签辅助，形成一个树状的结构文档以显示内容。
基本标签：
meta：
位于页面的头部，不包含任何内容，用来设置页面的元信息，如字符集。
<meta charset="gb2312">
head：
位于body标签前面，里面包含CSS、脚本等要带进页面的内容。<head> <link /> <script></script> <style></style> </head>body：
所有的显示内容都放在body里面。bgcolor属性设置背景颜色，background则用特点图片来做背景。
<body bgcolor="FF0000" background="bg.jpg"></body>h1~h6：
着重字体，常用来显示段落的标题。<h1></h1><h6></h6>p：
文本段落。<p>Some text</p>br：
强制换行，不成对出现，一个即可。<br />img：
图片，src设置图片源，width/height设置大小，border属性设置边框，alt设置鼠标移到图片上时显示的文字。单个使用，不成对出现。<img src="xx.jpg" width="100" height="100" border="0" alt="this is a image" />hr：
创建一条水平线，可以设置粗细、颜色、宽度。<hr size="5" color="gray" width="1000"></hr>pre：
预编译段落，被pre包含的内容将按其本来格式显示。<pre> 1st Line<br/> 2nd Line<br/> 3rd Line<br/> </pre>ol及li：
ordered list，用来显示一个列表，列表项按数字排序。<ol type="1"> <li>Ordered Item 1</li> <li>Ordered Item 2</li> </ol>
ul及li：
unoredered list，用来显示一个列表，列表项前面没有数字表示其先后顺序，只有统一的符号。
marqueen：
会移动的文字。<marqueen scrolldelay="100" direction="up" onMounseOver="this.stop()" onMouseOut="this.start()"> This is a marqueen </marqueen>a：
超链接，可以包含文字、图片等等任意内容。<a href="#">Some Text</a> <a href="PageToGo.html">Some other Text</a>
href属性：
表示超链接的链接源URL，即点击后将从哪里读取内容。href可以指向三类链接源：1.绝对地址，如href="http://www.somepage.com"或href="E:\index.html"2.相对地址，如href="../index.html"3.锚，下文将介绍。target属性：
表示超链接的连接目的地，即点击后把内容显示在哪里。target可以指向五类链接目的地：1.新窗口：_blank2.自身，默认：_self3.父窗口：_parent4.包含超链接的窗口：_top5.框架<frameset>中的某一个页面，以框架页面的name属性为准，下文将介绍。锚：
href属性值以"#"开头的为锚链接，跳转目标在本页面。
仅仅一个“#”为跳转到本页面起始位置（顶部），“#”后面加字符跳转到指定name属性的标签位置，如下：
<a href="#mark">Click here</a> ...... <p name="mark">Somewhere</p>
table：
表格标签，非常有用的格式布局标签。border属性设置其边框，为0时为无边框。tr为表单的一行，td为表单的一个单元格。<table border="1"> <tr> <td>I am a table Item</td> </tr> </table>
td：
td的colspan属性表示其跨的列数，rowspan表示其跨的行数。
td里面还可以嵌很多东西，比如图片、段落，甚至是另外一个table。
以下是一个完整的表格标签实例：
<table border="2" background="someimage.jpg" height="100" width="100"> <tr> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>
frameset：
框架集页面，作用是把一个页面瓜分成若干个页面，每个子页面由其他的页面文件构成。
多个页面拼接，一个典型的结构是顶部logo+左边导航+右边正文。
下面是一个框架集页面标签实例：*<frameset>标签不嵌在<body>标签内。<!--index.html--> <frameset cols="25%,50%,*" rows="20%,*" frameborder="0"> <!--框架集标签中的三个子页面分别占整个页面宽度的25%，50%，25%--> <!--第一个子页面占20%的高度，剩下的两个页面分80%的高度--> <!--*表示剩余的所有百分比--> <frame id="logoFrm" name="logoFrm" scrolling="no" src="frameLogo.html"/> <!--name用于下面的超链接目的地，src为子页面的源文件--> <frame id="naviFrm" name="naviFrm" scrolling="no" src="frameNavi.html"/> <frame id="pageFrm" name="pageFrm" scrolling="no" src="framePage.html"/> </frameset><!--naviFrm.html，导航页面--> <body> <p> <a href="newframePage.html" target="pageFrm">Click here</a> <!--href属性表示超链接的链接源--> <!--target属性表示超链接的结果展现的目标，显示在name为pageFrm的页面上，自身页面不变化--> </p> </body>
<iframe>：
<frameset>+<frame>与<iframe>相比，前者不嵌入<body>，后者嵌入，更为灵活
表单标签：
四种HTTP请求方式：
put：用于新增。
delete：用于删除。
post：一般用于更新。
get：一般用于查询。
form标签：
要在不同页面、页面->Servlet、页面->框架间传递数据，需要用到<form>标签。
当按下form标签里的类型为submit的控件时，form标签内的所有表单控件的value都将被提交。
提交的内容为键值对。表单项的name属性作为键，其value值作为值。
action属性：
form由谁来处理，表示表单提交的处理者，可以是页面，也可以是servlet。
method属性：
form提交的请求方式（get / post）。
get：
提交时，表单项的键值对显示地添加到处理请求的页面后面，以?开始，每对键值对以&分隔。http://www.somewebsite.com/pages/somepage.html?username=somename&pwd=nopwdpost：
提交时，将表单值隐藏在HTTP请求中。http://www.somewebsite.com/pages/somepage.html*当然，也可以手动在action属性里添加要提交的表单值。
value：
每次提交表单时，提交的都是所有表单控件的value值，是控件的文本，选项值等。
表单控件：
textarea：
多行文本框控件，提交的值是其中的文本。cols属性：宽度。rows属性：高度。readonly属性：是否只读，true或false，默认false。实例：<textarea cols="20" rows="5" readonly="true">Readonly text</textarea>select：
下拉选单控件，其中包含option标签作为选项。表单提交时，提交的是其中被选中的option标签的value值。option：
不能单独存在，必须嵌在select里面。表单提交时，为select控件提交value值。实例：<select name="continent"> <option value="1">Africa</option> <option value="2">America</option> <option value="3">Asia</option> <option value="4">Europe</option> </select> <!-- 若选择Asia后提交，则键值对中将有continent=3 -->input：
input是一个表单控件大类，它包含了许多个控件，以type属性来区分。
input不成对出现。
text：
普通单行文本。<input type="text" />radio：
圆形单选按钮，多个圆形按钮使用同一个name属性时为一组，只有一个能被选中。<input type="radio" name="sex" value="male"/> <input type="radio" name="sex" value="female"/>checkbox：
方形勾选按钮，被选中时有checked属性：checked="checked"。<input type="checkbox" name="c1" checked="checked" value="1" />password：
密码框，与文本框的区别在于输入时不显示其中文本。submit：
提交按钮，当按下这个按钮时将触发表单提交事件。事件可以在form标签处控制，而不是在按钮这。如下的例子中，当按下提交按钮，将弹出确认框，确认则提交，否则不提交。注意，这是由Script控制的。<form method="post" action="another.html" onSubmit="return confirm('Sure to submit?')" /> <input type="submit" value="submit now"/> </form>reset：
重置按钮，当按下这个按钮时将触发表单重置事件，重置所有表单控件里的内容。事件可以在form标签处控制，而不是在按钮这。
如下的例子中，当按下重置按钮，将弹出确认框，确认则重置，否则不重置。注意，这是由Script控制的。
<form method="post" action="another.html" onReset="return confirm('Sure to reset?')" /> <input type="reset" value="reset now"/> </form>
image：
图像按钮，不推荐使用。file：
本地文件选择按钮。<input type="file" />hidden：
隐藏表单项。<input type="hidden" name="hide"/>button：
普通按钮<input type="button" value="click me"/>
实例：
<form name="form1" method="post" action="anotherpage.html"> <!--post方式提交，提交到anotherpage.html来处理--> <fieldset id="fieldset1" name="fieldset1"> <!--fieldset：用细线框包围标签范围内所有内容的标签--> <legend>Some Control Test</legend> <!--legend：fieldset的顶部文本--> <input type="text" value="A text" id="txt1" name="txt1" size="20" /> <input type="password" value="A pwd" id="pwd1" id="pwd1" size="20" /> <!--name属性相同的radio分为一组，一次只能选中一个--> <input type="radio" value="male" id="sex_male" name="sex" checked="checked" /> <input type="radio" value="female" id="sex_female" name="sex" /> <input type="checkbox" value="1" id="c1" name="c1" checked="checked" /> <input type="checkbox" value="2" id="c2" name="c2" /> <select> <option value="0" selected="selected">Monday</option> <option value="1">Friday</option> <option value="2">Weekends</option> </select> <textarea rows="5" cols="50"></textarea> <input type="button" value="clickme" id="btn1" name="btn1" /> <input type="file" id="fileUp" name="fileUp" /> <input type="reset" value="reset" id="btnReset" name="btnReset" /> <input type="submit" value="submit" id="btnSubmit" name="btnSubmit" /> <!--必须设置<form enctype="form/multipart">才能上传文件--> </fieldset> </form>
CSS：
Cascading Style Sheets，层叠样式表。
简单来说，CSS决定显示在页面上的标签的一切表现，从颜色，大小，高度，位置到透明度，背景颜色等等，均可由CSS进行控制。
如果说HTML是页面的骨架，那么CSS则是页面的皮肤。
作用：
1.定义N套HTML元素的显示模板，控制页面
2.缩减HTTP文本，节省网络资源
3.常与<div>层配合使用
优先级：
从高到低依次为：
1.内联样式表：
2.内部（嵌入式）样式表：<p style="color:red">red paragraph</p>
3.外部样式表，来自其他.css文件：<head> <style type="text/css"> p{color:red;} </style> </head>
4.浏览器设置。<head> <link rel="stylesheet" href="outer.css" type="text/css"> </head>
选择器：
所谓CSS选择器，指的是选中若干个具备相同特性的标签，如：属于同一类的标签，name属性相同的标签等，并对他们套用CSS属性进行表现。
1.元素选择器：
选择所有同一种html标签（元素）。
<head> h1{color:red;} <!--单个选择，所有h1标签变为红色--> h1,h2{color:red;}<!--多个选择，所有h1与h2标签变为红色--> p h1{color:red;}<!--包含选择,所有p元素中包含的h1将变为红色--> </head>
2.类选择器：
选择所有设置了class属性的标签。
<head> <style type="text/css"> .myS{color:red;} </style> </head> <body> <p class="myS">para</p> <h1 class="myS">h1</h1> </body>
当然，类选择器与元素选择器可以协作使用，这样就选择那些依次满足两个选择器条件的标签：
<head> <style type="text/css"> h1.S1{color:red;} h1.S2{color:green;} </style> </head> <body> <h1 class="S1">Line 1</h1> <h1 class="S2">Line 2</h1> </body>
3.ID选择器：
选择某一ID的标签，优先级高于类选择器。
<head> <style type="text/css"> #p1{color:red;} </style> </head> <body> <p id="p1">Paragraph</p> </body>
4.通配选择器：
选择所有标签。
<head> <style type="text/css"> *{color:red;} </style> </head>
5.伪类选择器：
常用于设置<a>标签，设置的是当鼠标与<a>发生关系时的样式。
*必须按照link，visited，hover，active的顺序来设置。
a:link {color: #FF0000} <!-- 所有未访问的链接的样式 --> a:visited {color: #00FF00} <!-- 所有已访问的链接的样式 --> a:hover {color: #FF00FF} <!-- 鼠标移动到链接上的那个链接样式 --> a:active {color: #0000FF} <!-- 鼠标点击链接的那一瞬间，链接的样式 -->
6.伪元素选择器：
选择元素的某一部分。
当然，伪类选择器与伪元素选择器都可以和类选择器等配合使用，这里就不举例了。p:first-line{color:red;} <!-- 选择所有p标签的第一行 --> p:first-letter{color:red;} <!-- 选择所有p标签的第一个单词 -->
扫一扫
2241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
