关于浏览器和服务器之间的知识
Web映射的模式:
正常牵引型、灵活牵引型、推进型
正常、灵活牵引型是用户自己主动请求信息或浏览器自动定期请求信息,盲目的
推进型通过服务器公开的元数据获知数据什么时候更新然后再向服务器请求信息
SSI(Server Side Include):
HTML信息内嵌入可以在web服务器上发挥功能的程序的命令。
如:
<font size=”7”><!--#exec cmd=”counter.pl”--> </font>
CGI:
HTML中内含有脚本程序,来自于服务器下载到本地执行
<script language=”JavaScript”>脚本<script>
还可以嵌入java小程序,当需要执行时浏览器下载该.class,为字节码,不是文本信息。
<applet code =”Hello.class”></applet>
HTTP/1.0 Web信息交换:
浏览器每一个请求建立一次tcp链接,当服务器返回请求数据后断开链接,浏览器再次请求时再次建立链接
HTTP的功能:
要点:请求内容,应答内容,交换的程序
请求消息、应答消息是以文本的形式
1)、请求消息
请求方法URI(IP地址)HTTP版本 |
通用头部 |
请求头部 |
本体头部 |
空行 |
本体 |
2)、应答消息
HTTP版本 应答代码 说明 |
通用方法 |
应答方法 |
本体方法 |
空行 |
本体(文本或个人数据)/HTML和gif(图片) |
HTTP消息:
方法头部、代码 | 书写形式 | 说明 |
请求方法(客户端->服务器)还存在其他的LINK、UNLINK等 | GET | 对服务器请求HTML和图片数据 |
HEAD | 对服务器请求元数据 | |
POST | 将参数交给服务器的CGI | |
PUT | 对服务器发送数据 | |
DELETE | 用户认证后,删除用户的数据 | |
通用头部(客户端<->服务器) | Connection:控制命令 | 链接控制 |
Data:日期 | 现在的日期 | |
MIME-Version:版本 | MIME版本 | |
请求头部(客户端->服务器) | Accept:型 | 对应的媒体形式 |
Accept-Language:语言 | 对应的媒体形式 | |
Accept-Encoding:方式 | 相对应的代码方式 | |
Host:主机名(端口号) | 服务器的主机名(IP地址) | |
Cookie:名称 | 上回访问时,从Web服务器收到的信息 | |
主体头部 | Content-Length:字节 | 用字节表示数据长度 |
Content-Type:型/副型 | 本身的多媒体类型”text/html”是根据文本形式的html信息 | |
Content-Language:语言 | 主体语言 | |
Last-Modified:日期 | 最终更新日期 | |
Etag:识别值 | 主体的识别信息 | |
应答头部(客户端<-服务器) | Accept-Ranges:bytes/none | 以byte为单位,是否接受Range指定 |
Server:程序名 | 服务器软件的识别名 | |
Set-Cookie:名称 | Cookie信息 | |
应答代码(客户端<-服务器)服务器的状态用应答代码通知 | 100 Continue | 请求接受,下一个数据包的请求 |
200 OK | 请求被正常处理(通常的应答) | |
202 Accepted | 请求接受信息,但请求没有被处理 | |
300 Multiple Choices | 请求的URL没有指定特定的资源 | |
400 Bad Request | 请求的消息有语法错误 | |
403 Forbidden | 拒绝请求 | |
404 Not Found | 所请求的URL没有找到(目标主页不存在) | |
408 Request Time-out | 时间溢出,切断连接 | |
500 Internal Server Error | 服务器的内部错误 |
HTTP状态码:
1XX 正常,正常受理Request信息,正在做后续处理
2XX 正常,正常受理Request信息,已经有一部分处理在进行中
3XX 处理完Request后还有必要处理其它事物
4XX 客户端的问题
5XX 服务器的问题
HTTP特征:
HTTP是无状态的,HTTP上是明码传输
HTML与CSS:
构造与表示分离,HTML构造,CSS表示
HTML:
要素之间的父子关系:
head和body是html的子要素
属性:
要素可以添加属性
DTD:
可以定义在HTML中使用的要素
文档类型(Doctype)的声明:
HTML开头常见:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML的构成要素:
head部分<head></head>的部分要素
title | HTML文档的标题 |
base | 作为文档的基础URI,如果没有base要素的话,用文档的实际URI作为基础 |
link | 链接信息,记载了状态表或是代替文档,前后文档等等 |
meta | 元信息,记载文档的种类或是概要信息 |
style | 嵌入在状态表 |
script | 脚本 |
object | 嵌入对象,在嵌入音乐,图像,动画,applet等等时使用 |
param | 参数,Object或是applet使用 |
body部分的要素:
块要素:
h1~h6 | 索引。从第一层到第六层,第一层是最前一层的索引 |
p | 段落。另外,在p要素中不能包含块要素,只能使用行要素 |
blockquote | 块级别引用 |
ins | 追加部分。表示文档中追加的部分(行要素中也可以使用) |
del | 清除部分。表示文档中消除的部分(行要素中也可以使用) |
hr | 水平线 |
pre | 版式已经调整好的文字 |
address | 表示作者信息(firefox具体表现问斜体字) |
div | 成组化,当作容器使用, |
ul,ol,dl | 列表 |
table | 表 |
form | 表单 |
script | 脚本 |
noscript | 在不能使用脚本的环境中,用作代替脚本的文本 |
列表要素:
ol | 带编号的列表 |
ul | 没有编号的列表 |
li | 列表项目(在ol、ul、dir、menu要素内部使用) |
dl | 定义列表 |
dt | 用来做定义的用语(在dl要素内部中使用) |
dd | 定义的内容(在dl要素内部中使用) |
表:
table | 表 |
caption | 表的标题,一张表只能指定一个标题。<table>标记后边马上指定 |
tr | 行 |
td | 单元格 |
th | 项目标题 |
colgroup | 项目的成组化 |
col | 列。在colgroup要素内部,可以指定列的属性 |
thead | 把最初的列作为头部来成组化 |
tfoot | 尾部。把最后的列作为尾部来成组化。在thead的后面马上记入 |
tbody | 正文。用来把表的正文部分同头部以及尾部区别开来。另外,也可以将正文部分成组化 |
表单:
form | 表单 |
input | (表单控件)输入文本或是表示按钮等等。控件的种类通过type属性指定。例如:type=text表示用来输入文本的域 |
button | (表单控件)制作按钮。button要素的内容(<button>~</button>所包围的部分)将在按钮上显示出来 |
select | (表单控件)表示多选按钮。各种各样的选择分支用option来记述 |
option | (表单控件)多选按钮。(select)中的选择分支 |
optgroup | (表单控件)选择分支(option)的成组化 |
label | (表单控件)将文字列与控件关联起来 |
textarea | (表单控件)可以输入多行内容的输入表单 |
object | 嵌入对象。嵌入applet或是ActiveX等等 |
fieldset | 分组化表单控件。一定要有定义标题的legend要素 |
legend | 在fieldset中的表单的标题 |
行要素:
a | 链接。通过<a href="url">指定链接目标 <a name="~">指定名字 | |||
img | 嵌入图像 | |||
object | 嵌入对象 | |||
script | 脚本 | |||
br | 强制换行 | |||
bdo | 标记的方向,从左到右,从右到左 | |||
map | 客户端图像映射 | |||
area | 地域。指定客户端图像映射的领域和链接 | |||
span | 容器 | |||
增加了逻辑关系的意味 | em | 强调(多用斜体字表示) | ||
strong | 强调(多用粗体) | |||
samp | 输出的例子 | |||
kdb | 输入的例子 | |||
var | 变量。根据状态不同可以变化值 | |||
dfn | 定义用语 | |||
abbr | 略语 | |||
acronym | 只写头字的略语 | |||
cite | 引用 | |||
指定表示状态 | b | 粗体 | i | 斜体 |
big | 大号字 | small | 小号字 | |
tt | 等宽 | sub | 下标文字 | |
sup | 上标文字 |
框架:
frameset | 定义框架构造 |
frame | 定义一个一个框架 |
CSS:
样式的定义:
p{line-height:40%}/*按140%改变行的高度*/
在head部分定义(嵌入样式表):
<head>
<style
type="text/css">
<!--
p{line-height:140%}
strong{color:red}
-->
</stytle>
</head>
在别的文件中定义(外部样式表)
外部样式表例子:
<head>
<link
rel="stylesheet" type="text/css"
href=".../others/style01.css">
</head>
输入样式表的例子:
<head>
<style
type="text/css">
<!--
@import
url(.../others/sytle01.css)
-->
</style>
</head>
嵌入任意场合(嵌入样式)
大部分的要素在body部分可以时用style属性
可以使用div、span要素指定范围的样式
可使用meta元素指定默认样式
<head>
<meta
http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<h1
style="border-style:outset">使用样式表的方法</h1>
<div
style="margin:0 2em">
~
</div>
</body>
样式表优先级:
HTML>用户>浏览器
样式继承:
一般子元素继承父元素样式,根据标签不同,有些不继承
识别子:每个要素的设定
识别子与声明:
h1 {border-style:outset}
在一起定义识别子:
h1,h2,h3,h4,h5,h6{
line-height:100%;
text-decoration:underline;
}
只定义特定要素的子要素:
blockquote em{color:red}
识别子:根据属性设定
"要素#ID"或是"要素.类名"
使用id属性的情况:
strong#warning {color:red}
<strong id="warning">~</strong>
使用class属性的情况:
strong.warning {color:red}
<strong class="warning">~</strong>
只针对类名/ID名声明:
.memo {color:green}
#first {color:blue}
大小的指定:
利用绝对的形式表示大小 | |
cm | 厘米 |
mm | 毫米 |
in | 英寸 |
pt | 点(point:72点=1英寸) |
pc | piece(1 piece=12点) |
利用相对的形式表示大小 | |
em | 使用中的字体的宽度(1 em=1文字大小) |
ex | 文字"x"的大小 |
px | 像素(pixel) |
% | 百分比(随着特性的不同,与之相应的比例也不同) |
指定颜色的例子:
h1 {color:#3366CC}
h2 {color:black}
h3 {color:windowtext}
RGB的混合比例:
十六进制 | #RRGGBB | |
#RGB | 简略的表记。#36C代表#3366CC | |
十进制 | rgb(R,G,B) | 用0~255的十进制表示R,G,B |
百分比 | rgb(R,G,B) | 用0%~100%这样的方式表示R,G,B |
颜色的名字:
black
系统颜色:
InfoText
特性:字体与文本:
特性:列表:
特性:框线和余白
通过margin和padding可以设定余白,通过border可以设定境界线
特性:背景
客户端脚本:
事件属性:
onclick | 单击 |
ondblclick | 双击 |
onmousedouwn | 按下鼠标 |
onmouseup | 松开按下的鼠标 |
onmouseover | 光标(指针)重叠 |
onmousemove | 光标(指针)移动 |
onmouseout | 光标(指针)移开 |
onkeypress | 松开按下的按钮 |
onkeydown | 按下按钮 |
onkeyup | 松开按下的按钮 |
onfocus | 取得焦点(仅限于a、area、label、input、select、textarea、button) |
onblur | 失去焦点(仅限于a、area、label、input、select、textarea、button) |
onselect | 指定输入框的文本的范围(仅限于input、textarea) |
onchange | 变更值(仅限于input、select、textarea) |
onsubmit | 运行传输的表单(仅限于form) |
onreset | 充值表单(仅限于from) |
onload | 读完文档的全体(仅限于body、frameset) |
onunload | 移动其他的页面或是关闭浏览器等,破弃窗口或框架本身(仅限于body、frameset) |
转载于:https://blog.51cto.com/qianyang/1614904