随着Internet技术的兴起，在嵌入式设备的管理与交互中，基于Web方式的应用成为目前的主流，这种程序结构也就是大家非常熟悉的B/S架构，即在嵌入式设备上运行一个支持脚本或CGI功能的Web服务器，能够生成动态页面，在用户端只需要通过Web浏览器就可以对嵌入式设备进行管理和监控，非常方便实用。本节主要介绍这种应用的开发和移植工作。
Web
HTML
Web方式的应用开发一般都会将界面和程序逻辑脱离开来，允许在一定程度下更改界面，如改变界面文本的属性，建立多语言版本等，而无需改动程序逻辑。界面一般由美工来进行制作，而程序员负责具体功能的实现。
HTML(超文本标记语言)是用来创建与平台无关的超文本文档的简单标记语言，能够用来标记超文本消息、邮件、文档、超媒体、菜单选项、数据库查询结果以及有内嵌图形的简单结构文档。HTML为文档编码，包括要显示的文本、文本如何格式化的信息、要显示的图片名字(不是图片自身)、以及其他重要信息。连接到一个网页时，Web浏览器(如IE)就在内存中按照HTML的结构“构造”该网页，然后在屏幕上显示组装好的网页。
通常浏览器只能通过HTML请求从服务器获取静态网页进行浏览，如果用户需要通过浏览器提交一些数据给服务器进行处理并返回结果，以达到交互的效果则要用到HTML表单。HTML表单是用户通过浏览器提交数据为主要输入手段，它由普通文字、标记和一些称为“控件”的特殊元素(如复选框、单选按钮、菜单等)以及控件上的标签组成。用户通过填写或选择控件内容来输入数据，最后提交给服务器进行处理。它适用于任何浏览器。
HTML+CSS+JS
下面是一个表单的示例：
FORM的一些参数解释如下：
1. action指定了调用的CGI脚本
2. methed定义了表单被提交的方法。methed有两种，GET和POST。GET是CGI默认的传输方法，用户输入的数据会附在URL之后传给Web服务器。POST方法传递数据时，服务器端CGI处理程序会从SID躺中接收传输入数据。
3. reset的外观和submit相似，不过一旦用户按下它，这个form中的所有输入值都会被清除，或者是回到初值。
html，css，js属于网站前台，现在最新的叫法也叫“网站前端”。
浏览器拿到这些代码之后，分析一下给你渲染好页面显示出来，如果不用css，效果是这样的，按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等；见下图：
是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在 html 文件里用一个<link>标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来，然后你就能看到一个符合人类正常审美的页面了:
JavaScript 与浏览器脚本
有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画（其实用 CSS 还是可以有一些动画的，不过这个跑题了），按 F5 才会刷新数据，都 21世纪了，这么呆板单调的网页怎么能展现我大智人种族的创造性口胡！于是我们有了 Javascript（JS） 来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果啦。
浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用 <script> 关联进来就可以用了。
总之，说下前台这三个，html是名词，css是形容词，javascript是动词。三个互相配合才是一句句子。
CGI
浏览器与Web服务器的具体交互过程如下：
(1)客户机使用TCP／IP协议，与服务器建立连接，发送URL请求；
(2)Web服务器到相应的目录中调用CGI程序，使用客户机传递的参数作为CGI程序的参数，而CGI程序调用相应的外部程序完成操作；
(3)CGI程序以能被识别的格式返回处理结果给HTTP服务器；
(4)Web服务器将数据返回客户机处理，通过html文件显示CGI执行结果。
1.一个用户请求激活一个CGI应用程序；2.CGI应用程序将交互主页里用户输入信息提取出来；3.将用户输入的信息传给服务器主机应用程序（如数据库查询〕；4.将服务器处理结果通过HTML文件返回给用户；5.CGI进程结束。
CGI程序可以通过环境变量获取Web服务器传递过来的用户数据，常见的环境变量有：
1. SERVER-NAME：运行CGI序为机器名或IP地址。
2. SERVER-INTERFACE：WWW服务器的类型，如：CERN型或NCSA型。
3. SERVER-PROTOCOL：通信协议，应当是HTTP/1.0。
4. SERVER-PORT：TCP端口，一般说来web端口是80。
5. HTTP-ACCEPT：HTTP定义的浏览器能够接受的数据类型。
6. HTTP-REFERER： 发送表单的文件URL。（并非所有的浏览器都传送这一变量）
7. HTTP-USER-AGENT：发送表单的浏览器的有关信息。
8. GETWAY-INTERFACE：CGI程序的版本，在UNIX下为 CGI/1.1。
9. PATH-TRANSLATED： PATH-INFO中包含的实际路径名。
10. PATH-INFO：浏览器用GET方式发送数据时的附加路径。
11. SCRIPT-NAME： CGI程序的路径名。
12. QUERY-STRING：表单输入的数据，URL中间号后的内容。
13. REMOTE-HOST：发送程序的主机名，不能确定该值。
14. REMOTE-ADDR：发送程序的机器的IP地址。
15. REMOTE-USER：发送程序的人名。
具体的通信方式有两种1) 利用shell脚本获取QUERY_STRING环境变量
2) 利用cgic库编程动态网页
下图是处理静态网页init_get()流程图：
下图是init_cgi()流程图：
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/tfygg/article/details/46813133
