、基本概念:

CGI(Common Gate Interface,通用网关接口)

HTML均是静态网页,它无法实现一些复杂的功能,而CGI可以为我们实现。

get方式提交表单:

当表单被发送到服务器断后,表单中的数据被保存在服务器上一个叫做QUERY_STRING的环境变量中。这种表单的处理相对简单,只要读取环境变量就可以了。

post方式提交表单:

对于POST类型的表单,其内容被送到CGI程序的标准输入,而被传送的长度被放在环境变量 CONTENT_LENGTH中。因而我们要做的就是,在标准输入中读入CONTENT_LENGTH长度的字符串。

、http

2.1  http协议

HTTP是Hyper Text Transfer Protocol(超文本传输协议),其结构如下图所示。

2.2  HTTP组成

http请求由三部分组成,分别是:请求行、消息报头、请求正文

HTTP请求数据举例:

HTTP应答数据举例

2.3  http编码
form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。
当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url
后面,用?分割,加载这个新的url。当action为post时候,浏览器把form数据封装到http body中,然后发送到server。
在网页中将表单进行上传的时候,就会进行编码,例如我们点击保存的时候。下图就是我是使用colasoft,科来抓包软件抓取的结构,当然你也可以使用wireshark进行抓取。

、网页设计

在javascript中,完成中英文切换,并且在实现同一个框架中不同页面之间的访问。

//标志位,用于后面的判断

var isEng=false;

//创建中文和英文数组

tree_en=new Arrary(“hello world”,”welcome to China”);

tree_en=new Arrary(“你好”,”欢迎”);

function changeLanguage()

{

//获取表单

var cf = document.forms[];

isEng = !isEng;

//更改框架中顶层按键中的按键值

document.all.language.value= isEng ? "中文" : "English";

var i=,j=;

//chrome浏览器不支持在本地使用parent.xxx类似的操作,而firefox支持。

//在服务器中两种浏览器都支持该操作。下面的语句作用是获取父框架左边的的网页。

//下面几条语句都可以在一个框架中的网页中访问另外一个框架中的数据。

//var frame_left = window.parent["left"];

var obj=window.parent.frame_left;

//var obj=parent.frame_left;

var cf=obj.contentWindow.document;

//cf.getElementById("AllOpen_1").innerHTML="hello";

//更改tree

var tree_arr=cf.getElementsByTagName("a");

var length=tree_arr.length;

//tree_text引用,这里就完成了中英文切换。tree_text根据isEng这个标志位的不同指向 //不同的数组,在更改网页中的内容就行了。后面要怎么操作就随自己了。

var tree_text=isEng?tree_en:tree_ch;

for(i=;i<length;i++)

{

tree_arr[i].innerHTML=tree_text[i];

}

//获取url中的文件名称

function getFileName(hr){

  var url = hr.location.href

//  var url = this.location.href

  var pos = url.lastIndexOf("/");

  if(pos == -){

   pos = url.lastIndexOf("\\")

  }

  var filename = url.substr(pos +)

  return filename;

}

http和网页设计的更多相关文章

  1. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  2. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  3. 手机web——自适应网页设计(html/css控制)

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...

  4. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  5. 经典网页设计:20个与众不同的国外 HTML5 网站

    大家都都知道, HTML5 具备所有最新的技术和功能,帮助我们创造平滑过渡,花式图像滑块和动画.如果你正在考虑使用HTML5 来设计自己的网站,那么这个集合能够帮助你. 在过去的10年里,网页设计师使 ...

  6. 经典网页设计:20个华丽的 iPhone 应用程序演示网站

    一个物品销售很好,重要的原因之一是它的包装,因为这是最重要的细节,可以把一个人转变成购买者.一个好的包装设计和良好的表现比产品本身更重要,因此被分配了大量的金钱和资源,以创造伟大的东西. 因此,为了销 ...

  7. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  8. PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程

    PS网页设计教程--30个优秀的PS网页设计教程的中文翻译教程   作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作 ...

  9. 韩国网页设计资料《网页设计大师2》JPG+PSD+TXT等 73.89G 百度云下载

    < 网页设计大师2 >超越第一代版本,提供更新更精美的网页素材模板.全部由国际顶级设计师精选打造,完全展示走在潮流 之前的设计风格.是网页设计师/UI交互界面设计师必备工具. < 网 ...

  10. HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

随机推荐

  1. 【BZOJ】3038: 上帝造题的七分钟2(线段树+暴力)

    http://www.lydsy.com:808/JudgeOnline/problem.php?id=3038 这题我就有得吐槽了,先是线段树更新写错,然后不知哪没pushup导致te,精度问题sq ...

  2. 【BZOJ】1270: [BeijingWc2008]雷涛的小猫(DP+水题)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1270 这完全是一眼题啊,但是n^2的时间挺感人.(n^2一下的级别请大神们赐教,我还没学多少dp优化 ...

  3. 学习了ZKW费用流

    所谓ZKW费用流,其实就是Dinic. 若干年前有一个人发明了最小增广路算法,每次用BFS找一条增广路,时间O(nm^2) 然后被DinicD飞了:我们为什么不可以在长度不变时多路增广呢?时间O(n^ ...

  4. placeholder在不同浏览器下的表现及兼容方法

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  5. 启用VTX技术支持启动android的虚拟机 - 报错

    第一次启用VTX技术支持启动android的虚拟机,启动时提示如下错误: Starting emulator for AVD 'AVD_for_Android_TV_1080p_by_Google'e ...

  6. Java实战equals()与hashCode()

    一.equals()方法详解 equals()方法在object类中定义如下: 代码 public boolean equals(Object obj) { return (this == obj); ...

  7. POJ 2528 Mayor's posters(线段树区间染色+离散化或倒序更新)

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 59239   Accepted: 17157 ...

  8. NOJ 1641 错误的算法(模拟)

    [1641] 错误的算法 时间限制: 5000 ms 内存限制: 65535 K 问题描述 有道题目是这样的: 输入一个 n 行 m 列网格,找一个格子,使得它所在的行和列中所有格子的数之和最大.如果 ...

  9. Jenkins学习记录

    参考资料 官方文档 用MSBuild和Jenkins搭建持续集成环境(1) 用MSBuild和Jenkins搭建持续集成环境(2) 构建基于Jenkins + Github的持续集成环境 Jenkin ...

  10. 连接别人创建的ORACLE数据库

    以oracle10g版本为例,本机必须安装oralce10g的客户端或oralce10g的服务器 方法一(从服务器配置): 第一步:打开配置和移植工具-->Net Manager 第二步:选中服 ...