WEB客户端：浏览器和页面

WEB客户端：浏览器和页面

sf2gis@163.com

2015年6月12日

 

1  目标：浏览器展示HTML页面，并控制其行为和样式。

2 原理：HTML框架+CSS样式+JavaScript行为。

浏览器作为页面的容器，提供所有的基础功能。

HTML是页面的框架。

CSS是页面的样式。

JavaScript控制页面行为。

3 方法：页面框架：HTML

目标：各种控件的框架。

方法：HTML

区块：div（division,独立块，前后换行），span(行内块，不换行)。

3.1 URI,URL,URN

目标：为WEB上所有内容统一命名。

方法：URI，URL，URN

参考：http://www.cnblogs.com/fsjohnhuang/p/4280369.html

URI（Uniform ResourceIdentifier）。

格式：schema://unit#fragment。schema表示一个独立的组织，unit为组织中的基本单位，fragment表示单位中资源。当shecma://省略时，使用当前环境支持的默认值。

unit格式：username@host:port/path/?query。表示以指定的用户名请求资源。

URL：URI的web子类，目标是定位，使用不同的网络协议来作为schema。

URN：URI的持久化子类，目标是标识。

格式：urn:NID:NSS

NID：表示不同的组织。

NSS由NID规定。

参考：http://www.ietf.org/rfc/rfc2141.txt

4 方法：样式表：CSS（Cascade Style Sheet）

目标：通过独立的样式表，管理和复用整个页面的样式。

方法：CSS

4.1 引用方法：行内，内嵌(<style>)，链接(<link>)，导入（@import（“/’xx”/’），彩色为可选行为）。

 

参考：http://www.divcss5.com/rumen/r56.shtml

4.2 选择器：标记，类别（.类名），id(#id)，直接子元素（>），属性（【属性名=属性值】）。选择器可以组合及集合。

4.3 定位：弹性定位（float），坐标位置（position,可以设置为static（默认原点），absolute（页面坐标），relative（父容器坐标）），上下位置（z-index，越大越靠上）。

4.4 元素空间：所有元素都是盒子模型，使用外间隔+边框+内间隔+内容组成。

参考：http://developer.51cto.com/art/201009/226194.htm

4.5 注释：/*…*/

5 方法：行为脚本javascript

参见：javascript.docx