1. CSS(层叠样式表Cascading Style Sheets)
Sytles define how to display HTML elements
Sytles are normally stored in Style Sheets
Sytles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
With Css, your HTML documents can be displayed using different output styles
2. HTMl起初是被设计成为定义文档内容. 通过使用像<h1>, <p>, <table>这样的标签表达的是"这是一个标题", "这是一个段落", "这是一张表格", 而布局由浏览器来处理并非使用格式化标签.
为了解决这个问题, W3C, 为HTML4.0增加了样式.
所有主流的浏览器都支持样式表.
CSS是一个在设计领域中的突破, 因为它允许开发者一下就能控制多个WEB页的样式和布局. 简单的改变样式, 所有与之相关的元素都会自动更新.
样式表允许样式信息用多种方式来定义. 样式可以在一单独的HTML元素中指定, 在<head>元素中或在外部CSS文件中, 甚至多个外部样式表能集中在一个单一的HTML文档中.
3. 当多于一种的样式指定一HTML元素时使用怎样的样式呢?
一般来说所有样式有下面的规则(第四个最有优先性):
1. Browser default
浏览器默认
2. External Style sheet
外部样式表
3. Internal style sheet (inside the <head> tag)
内嵌样式表<在<head>标签内)
4. Inline style (inside an HTML element)
行内样式(在一HTML元素内)
5. CSS语法:
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
选择器是你希望去定义的HTML元素/标签, 每个属性可以有一个值, 属性和值由冒号分隔, 外面的大括号起来.
body {color: black}
如果值为多个单词则用双引号括起来
p{font-family: "sans serif"}
注意: 如果你想指定多个属性, 你就必须将每个属性用分号隔开, 下面的例子就演示了怎样定义居中红色文字字段.
p{text-align:center;color:red}
为了样式更有可读性, 可以使用分行显示.
可以将选择器组合. 用逗号分隔每个选择器, 下面的例子将所有的标题元素组合起来, 它们的颜色都为绿色.
h1,h2,h3,h4,h5,h6{color;green}
6. 引用外部的CSS文件:
在<head></head>中添加如下内容: <link rel = "stylesheet" type = "text/css" href ="路径" >
7. The class Selector(选择器类)
用选择器类你可以将同一个类型的HTML元素定义出不同的样式. 比如你想在您的文档中有两种不同格式的段落:一种是右对齐, 另外一种是居中:
p.right{text-align:right}
p.center{text-align:center}
不许在HTML文档中使用类属性(才能显示出效果)
<p class = "right">This paragraph will be righ-aligned.</p>
<p class = "center">This paragraph will be center-aligned.</p>
你可以省略标签名直接去定义, 这样就可以在所有的HTML元素中使用了. 下面的例子就能让HTML中所有带有class = "center"的元素居中:
.center{text-align:center}
下面的代码中H1和P元素都有class = "center". 这意味着这两个元素都将遵循选择器"center"的规则:
<h1 class = "center"> This heading will be center-aligned </h1>
<p class = "center"> This paragraph will also be center-aligned. </p>
请不要以数字开头为名称的类, 在Mozilla/Firefox中不能正常运作.
8. The id Selector(id选择器)
使用id选择器你可以为不同的HTML元素定义相同的样式.
下面的样式规则对任何一个id属性为"green"的元素都是匹配的.
#green{color:green}
上面的规则将匹配h1和p元素:
<h1 id = "green">Some text</h1>
<p id= "green">Some text</p>
下面的样式规则将匹配任何一个带有id属性值为"green"的p元素
p#green{color:green}
上面的规则与h1元素不匹配(也就是不会产生样式效果)
<h1 id="green">Some text</h1>
和class一样, id的名称的开头也不要使用数字, 不然就无法再Mozilla/Firefox中正常运作了.
9. CSS注释:
可以在CSS中加入解释代码用的注释, 注释一般以"/*"开头"*/"做结尾:
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
10. 怎样使用CSS样式表:
有三种方式可以插入样式表:
外部样式表(External Style Sheet)
内嵌样式表(Internal Style Sheet)
行内样式(Inline Styles)
11. 外部样式表:
方法: 在head区域内,使用<link>标签, 让每一个页面都连接到样式表.
<head>
<link rel = "stylesheet" type = "text/css" href = "mystyle.css" />
</head>
外部样式表可以用任何一个文字编辑器来书写, 文件不应该包含任何的html标签. 并保存为后最为.css的文件. 下面是一个样式表文件的内容:
hr{color:sienna}
p{margin-left: 20px}
body{background-image: url("images/back40.gif")}
注意: 不要在属性值和其单位间加上空格! 在Mozilla/Firefox或Netscape中可能无法正常显示.
12. 内嵌样式表:
一份内嵌样式表应该在当有单独文档有特殊样式的时候才被使用. 使用<style>标签在head区域内定义样式, 像这样:
<head>
<style type = "text/css">
hr<color:red>
p{margin-left:20px}
body{backgroud-image:url("wp5.jpg")}
</style>
</head>
浏览器将立即读取样式定义, 并依据它来格式化文档.
注意: 浏览器一般会忽略掉未知的标签, 这就意味着老的浏览器不能支持样式, 会忽略<style>标签, 但<style>里的内容会显示在页面上. 在HTML注释元素中隐藏它可以避免类似情况在老浏览器中发生.
13. 行内样式:
使用行内样式就是去了样式的优势而将内容和形式混淆了. 一般这类方法在个别元素需要改变样式的时候使用.
在相关的标签上用style属性来加入行内样式. 样式属性可以包含任何CSS属性.
例子中将展示怎样给一个段落加上左间距并将颜色改为red.
<p style= "color:red; margin-left:20px">This is a paragraph </p>
14. 多重样式表:
如果一些属性被相同的选择器设置成不同的样式, 值就会向更为具体的样式所继承(具体化).
例如:
一个外部样式表也有这样的h3选择器属性:
h3{color:red;text-align:left;font-size:8pt}
同时有个内嵌样式表有这样的h3选择器属性:
h3{text-align:right;font-size:20pt}
如果页面在有内嵌表的同时又连接到外部样式表的话h3的属性将变为:
color:red;text-align:right;font-size:20pt
颜色继承了外部样式而文字对齐和文字大小被内嵌的样式所替换.
a:link{color:green}
a:visited{color:yellow}
a:hover{color:black}
a:active{color:blue}
Java Web HTTP协议深度剖析:
Http(Hypertext Transfer Protocol)超文本传输协
Http是一个基于请求和响应模式的, 无状态的协议(request/response based, stateless protocol)
15. Http 1.0:
当连接建立后, 浏览器发送一个请求, 服务器回应一个消息, 之后, 连接就被关闭. 当浏览器下次请求的时候, 需要重新连接. 不断的建立连接, 开销比较大. 现在的Web页面往往包含多种资源, 每获取一种资源,就建立一次连接, 这样增加了HTTP服务器的开销, 造成了Internet上的信息拥堵.
因此在Http1.1版本中, 给出了连续连接(Persistent Connections)的机制. 并将其作为Http1.1中建立连接的缺省行为.
客户端可以连续发送多个请求, 而不用等待每一个响应的到来.
Java Web 004.Http持续连接深度剖析
1. HTTP URL:
格式:
http://host[:port][abs_path]
其中http表示要通过HTTP协议来定位网络资源.
Host表示合法的Internet主机域名或IP地址(以点分十进制表示)
Port用于指定一个端口号, 拥有被请求资源的服务器主机监听该端口号的TCP连接. 如果Port是空, 则使用缺省的端口80.
abs_path指定请求资源的URI(Uniform Resource Identifier, 统一资源定位符), 如果URL中没有给出abs_path, 那么当它作为强请求URI时, 必须以"/"的形式给出. 通常这个工作由浏览器帮我们完成.
2.浏览器与服务器连接的一般过程:
ServerSocket serverSocket = new ServerSocket(80);
www.sohu.com + 80(浏览器自动补全成标准格式)-> DNS(Domain Name Service) -> 221.179.180.20:80
Socket socket = new Socket("221.179.180.20",80);
www.sohu.com:81 指定端口号.
3. HTTP URI:
URI纯粹是一个符号结构, 用于指定构成Web资源的字符串的各个不同部分.
URL是一种特殊的类型的URI, 它包含了用于查找某个资源的足够的信息, 其他的URI, 例如: mailto:donaldjohn@qq.com, 则不属于URL, 因为这里不存在根据该表示符来查找的任何数据, 这种URI成为URN(通用资源名)
4. HTTP请求:
客户端通过发送HTTP请求向服务器请求对资源的访问.
HTTP请求由三部分组成, 分别是: 请求行, 消息报头, 请求正文.
请求行:
请求行以一个方法符号开头, 后面跟着请求URI和协议的版本, 以CRLF作为结尾. 请求行以空格分隔. 除了作为结尾的CRLF外, 不允许出现单独的CR或LF字符, 格式如下:
Method Requst-URI HTTP-Version CRLF
Method表示请求的方法, Request-URI是一个统一资源定位标识符, 标识了要请求的资源, HTTP-Version表示请求的HTTP协议版本, CRLF表示回车换行. 例如:
GET /test.html HTTP/1.1 (CRLF)
5. HTTP请求--方法:
GET: 请求获取由Request-URI所表示的资源.
POST: 在Request-URI所标识的资源后附加新的数据.
HEAD: 请求获取由Request-URI所标识的资源的响应消息报头.
DELETE: 请求服务器删除由Request-URI所标识的资源的响应消息报头.
TRACE: 请求服务器回送收到的请求消息, 主要用于测试或诊断.
CONNECT: 保留将来使用.
OPTION: 请求查询服务器的性能, 或者查询与资源相关的选项和需求.
PUT: 请求服务器存储一个资源, 并用Request-URI作为其标识.
目前浏览器实现的Mehod只用Get和POST方法.
REST(Representational State Transfer)
RESTFul Web Service
GET方法用于获取由Requst-URI所标识的资源的信息, 常见的形式是:
GET Request-URI HTTP/1.1
当我们通过在浏览器的地址中直接输入网址的方式去访问网页的时候, 浏览器采用的就是GET方法向服务器获取资源.
POST方法用于向服务器发送请求, 要求服务器接受附在请求后面的数据. POST方法在表达的提交的时候用的最多.
采用POST方法提交表单的例子:
POST /login.jsp HTTP/1.1 (CRLF)
Accept:image/gif(CRLF)(….)
Host:www.sample.com (CRLF)(….)
….
Cache-Control:no=cache(CRLF)
(CRLF)
username = hello&password=123456
HEAD方法和GET方法几乎是一样的, 他们的区别在于HEAD方法只是请求消息报头, 而不是完整的内容. 对于HEAD请求的回应部分来说, 它的HTTP头部中包含的信息与通过GET请求所得到的信息时相同的. 利用这个方法, 不必传输整个资源的内容, 就可以用得到Request-URL所表示的资源的信息. 这个方法通常用于测试超级链接的有效性, 是否可以访问, 以及最近是否更新等.
当我们在HTML中提交表单时, 浏览器会根据你的提交方法是get还是post, 采用相应的在HTTP协议中的GET或POST方法, 想服务器发出请求.
注意:
在HTML文档中,书写get和post, 不区分大小写, 但HTTP协议中的GET和POST只能是大写形式.
6.HTTP响应:
在接受和解释请求消息后, 服务器会返回一个HTTP响应消息:
与HTTP请求类似, HTTP响应也是由三个部分组成, 分别是: 状态行, 消息报头, 响应正文.
7.HTTP响应--状态行:
状态行由协议版本, 数字形式的状态代码, 相应的状态描述组成, 各元素之间以空格分隔, 除了结尾的CRLF(回车换行)序列外, 不允许出现CR或LF字符. 格式如下:
HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version表示服务器HTTP协议的版本.
Status-Code表示服务器发回的响应代码.
Reason-Phrase表示状态代码的文本描述.
CRLF表示回车换行.
例如:
HTTP/1.1 200 OK (CRLF)
状态代码由三位数字组成, 表示请求是否被理解或被满足, 状态描述给出了关于状态代码的尖端文本描述.
状态代码的第一个数字定义了响应的类别, 后面两个数字没有具体的分类. 第一个数字有五种可能的取值:
1XX:指示信息--表示请求已接受, 继续处理
2XX: 成功--表示请求已经被成功接收, 理解, 接受
3XX: 重定向-- 要完成请求必须进行更进一步的操作.
4XX: 客户端错误--请求有语法错误或请求无法实现.
5XX: 服务器端错误--服务器未能实现合法的请求.
常见的状态代码,状态描述和说明:
200 OK客户端请求成功
400 Bad Request由于客户端请求有语法错误, 不能被服务器所理解.
401 Unauthorized请求未经授权, 这个状态代码必须和WWW-Authenticate报头域一起使用.
403 Forbidden: 服务器受到请求, 但是拒绝提供服务, 服务器通常会在响应正文中给出不提供服务的原因.
404 Not Found请求的资源不存在, 例如: 输入错误的URL
500 Internal Server Error服务器发生不可预期的错误, 导致无法完成完成客户的请求
503 Service Unavailable服务器当前不能够处理客户端得请求, 在一段时间之后, 服务器可能会恢复正常.
8. HTTP消息:
HTTP消息由客户端到服务器的请求和服务器到客户端的响应组成. 请求消息和响应消息都是由开始行, 消息报头(可选), 空行(只用CRLF的行), 消息正文(可选)组成.
对于请求消息, 开始行就是请求行, 对于响应消息, 开始行就是状态行.
使用Tomcat:
要想启动Tomcat, 需要配置好两个环境变量
Java_HOME: 值为JDK的安装目录(bin的上一层目录)
CATALINA_HOME: 值为Tomcat的安装目录.
运行startup.bat启动服务器.
默认的启动端口号是8080.
HEAD /Config.html HTTP/1.1
Host: localhost
Connection: keep-Alive
JAVA Web Tomcate环境配置, 第一个程序实现及原理剖析
Serverlet是JAVA服务器端编程. 不同于我们之前写的一般的Java应用程序, Serverlet程序是运行在服务器上的, 服务器有很多种, 例如Tomcat, Resin, Jetty, Weblogic, WebSphere, Jboss
5. 在Tomcat安装目录的conf目录下打开server.xml文件, 找到倒数第四行</Host>, 在</Host>上面加入如下XML片段:
<Context path="/test" docBase="D:\Java\test\WebRoot" reloadable="true"/>
6. 启动Tomcat(starup.bat)
打开浏览器访问如下地址:
http://localhost:8080/test/login.jsp
7. Web.xml(deployment descriptor)
<servlet>
<servlet-name>HelloWorld</servlet-name>
<servlet-class>serverlet.HelloWorldServerlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloWorld</servlet-name>
<url-pattern>/HelloWorld</url-pattern>
</servlet-mapping>
8. Servlet和配置文件改完之后, 服务器需要重启的, jsp改完之后不需要.
9.我们可以将Servlet看作是嵌套了HTML代码的Java类, 可以将JSP看作是嵌套了Java代码的HTML页面.
10.GET和POST的区别:
1) 浏览器呈现的结果不同(表象)
2) 真正的原因在于向服务器发送请求是的形式是不同的.
3) get的请求格式:
GET /test/LoginServlet?username=hello&password=world HTTP/1.1
4)post的请求格式:
POST /test/LoginServlet HTTP/1.1
Connection:Keep-Alive
username=hello&password=word
11. 通过浏览器进行文件上传时, 一定要使用post方法绝不能使用get方法.原因是浏览器对URI长度由限制.
12. 通过浏览器地址栏输入网址的方式来访问服务端资源, 全部使用的是get方法请求的. POST方法用在表单提交中.
Java Web JSP与Servlet交互深入详解
Java Web Tomcat根据JSP生成Servlet机制深度解析及核心代码详解.
JSP简介:在传统的网页HTML文件中, 加入Java程序片段(Scriptlet)和JSP标签, 就构成了JSP网页.
Java程序片段可以操作数据库, 重定向网页以及发送E-Mail等, 实现建立动态网站所需要的功能.
所有程序操作都在服务器端执行, 网络上传送个客户端的仅是得到的结果, 这样大大降低了对客户浏览器的要求, 即使客户端浏览器不支持Java也可以访问JSP网页.
JSP: Java Server Pages:
Servlet简化设计, 逻辑和界面分离, 开发更加方便.
HTML语法的Java扩展, 加入新的标签(<%, %>,…);
强大的组件(Java Bean)支持功能.
13. JSP的执行过程:
请求 à*.jsp à(Jsp parser) à *.java à *.class à 响应
14. JSP最终都会转换为Servlet去执行.
15. JSP语法概述:
JSP原始代码中包含了JSP元素和Template(模板) data两类.
Template data指的是JSP引擎不处理的部分, 即标记<%...%>意外的部分, 例如代码中的HTML的内容等, 这些数据会直接发送到客户端的浏览器,
JSP元素则是将由JSP引擎直接处理的部分, 这一部分必须符合Java语法, 否则会导致编译错误.