、基本概念:

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. Django 1.6.0 正式发布,大幅改进事务处理

    Django 1.6.0 正式发布了,查看官方发行说明. 下载地址:Django-1.6.tar.gz ,也可通过 pip 安装: pip install Django==1.6 要求 Python ...

  2. 静态页分页功能js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [LintCode] Cosine Similarity 余弦公式

    Cosine similarity is a measure of similarity between two vectors of an inner product space that meas ...

  4. Hadoop配置文件解析

    Hadoop源码解析 2 --- Hadoop配置文件解析 1 Hadoop Configuration简介    Hadoop没有使用java.util.Properties管理配置文件, 也没有使 ...

  5. WSUS更新服务器

    http://windowsupdate.microsoft.com http://*.windowsupdate.microsoft.com   https://*.windowsupdate.mi ...

  6. CSS3:渐变大全

    渐变大全 声明 最后的老写法镜像渐变可能不太准确.其余都完全正确 <!DOCTYPE html> <html> <head> <meta http-equiv ...

  7. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [3] 首页 APP 接口开发方案 ② 读取缓存方式

    以静态缓存为例. 修改 file.php line:11 去掉 path 参数(方便),加上缓存时间参数: public function cacheData($k,$v = '',$cacheTim ...

  8. javascript中的eval()函数应用以及要点

    eval是干嘛用的?eval是直接将一段字符串作为参数,交给JS引擎预编译器进行动态分析并执行代码.如下: //调试台输出,你可以理解为console.log,再不理解就理解成alert也没事 var ...

  9. MZhong's Resume

    MATTHEW.ZHONG Male,27 Age Front-End Developer matthew.zhong@morningstar.com OBJECTIVE My objective i ...

  10. jsp页面揣出现Invalid action class configuration that references an unknown class解决方案

    jsp页面中,增加和修改用了同一个页面,能正常增加,却不能修改,后来发现页面中有一个hidden的id, 这个input的name写成name="designType.id"时就会 ...