目录
json对象赋值到表单,需要表单中控件的name值与json对象的key值匹配。... 16
application/x-www-form-urlencoded. 17
添加JSON Data到已经存在的JSON文件中... 19
json-c 的安装和使用(使用json-c读取文件中的json数据和保存json格式的数据至文件中) 20
C语言构建WEB管理系统(四):CGI程序解析POST数据... 24
嵌入式LINUX下CGI与HTML网页之间的通信... 27
[精华]编写CGI的C语言代码(文件名是getdata.c)设置一个Cookie,打印一个HTML,跳转到showCookie.html页面。... 29
一、Html使用注意
<!DOCTYPE html>
<!--
HTML页面加载和解析流程
1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件。
2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件。
3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件。
4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了。
5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。
6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码。
7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它。
8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<style>(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码。
9. 终于等到了</html>的到来,浏览器泪流满面
10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径。
11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。
-->
<html>
<!-- 保持页面简洁、减少资源的使用时最直接的,去除不必要加载项; 删除不必要的空格、注释。减少文件数量;减少页面上引用的文件数量可以减少HTTP连接数。优化页面元素加载顺序;首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载HTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。几种优化web页面加载速度的策略 -->
<head>
<!-- 合理设置HTTP缓存----很少变化的直接通过HTTP Header中的Expires设置 个很长的过期头。变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证;
开启服务器的gzip gzip可以减少不少传输资源的体积;对重复使用的数据进行缓存 -->
<meta charset="utf-8">
<!--
<link rel="stylesheet" href="./font-awesome.min.css">
-->
<link rel="stylesheet" href="./style.css">
<style>
<!--将inline的script和css移到外部文件。使用外部的JavaScript和CSS,可缓存; 将CSS放在HEAD中,实际上浏览器对选择符的解析是从右往左进行的,简化;资源合并与压缩(合并脚本和样式) 合并CSS图片 使用在CSS中的图片;
样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。JS、CSS中如有重定义,后定义函数将覆盖前定义函数。使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片。 -->
*{
margin: 0;
padding: 0;
}
.box{
width: 80%;
margin: 200px auto;
}
.box .title{
}
.box .title ul{
display: flex;
}
.box .title ul li{
list-style: none;
border:1px solid #666;
border-bottom: none;
padding: 5px;
margin-right: 10px;
}
.box .title ul li.current{
border-bottom: 1px solid #fff;
position: relative;
top: 1px;
}
.box .content{
border:1px solid #666;
padding: 5px;
min-height: 600px;
}
.box .content>div{
display: none;
}
.box .content>div:first-child{
display: block;
}
ul li{list-style:none;} <!--取消默认的圆点和序号 -->
.content{
border:1px solid #666;
padding: 5px;
min-height: 600px;
}
</style>
<script type="text/javascript" language="javascript">
<!-- 最初只加载核心模块,其他模块可以等到需要使用的时候才加载 将外部脚本置底(将脚本尽可能的往后挪,减少对并发下载的影响)异步执行inline脚本 使用setTimeout控制加载的时机,HTML5中引入了Web Workers的机制, 异步请求Callback-----可以考虑在DOMLoaded事件触发的时候加载,或者使用setTimeout方式来灵活的控制加载的时机;如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。减少域名查询,DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。-->
</script>
<!-- 使用Google的html5shiv包 推荐-->
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style>article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}</style>
<![endif]-->
<!-- 可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面-->
<!--[if lte IE 8]>
<noscript>
<style>.html5-wrappers{display:none!important;}</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->
<title>(wangdaopo.com)</title>
</head>
<!-- 避免重复的资源请求----由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时;减少重构重绘; 减少DOM元素的数量;尽量减少DOM访问;--不要使用嵌套table,而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table,这样就不需要等到整个页面(或大table)内容全部加载完才显示。如果浏览器可以立即决定图像或table的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。-->
<body>
<!-- 在页面刚加载的时候可以只加载第一屏-->
<!-- 当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和width参数-->
<div class="box" style="width:1200px;">
<div id="top-container">
<div id="topBanner">
<div class="layoutRow"> <div class="left-pad"> <div class="gwt-HTML">VOIP</div> </div> <div class="right-pad"> <div class="feature"><a class="feature first" name="logout" id="gwt-uid-413">Admin Logout</a><a class="feature" name="support" aria-hidden="true" id="gwt-uid-414" style="display: none;">Support</a><a class="feature" name="reboot" id="gwt-uid-415">Reboot</a><a class="feature last" name="prov" aria-hidden="true" id="gwt-uid-416" style="display: none;">[[MISSING: PROV_NOW]]</a>
</div> <select class="gwt-ListBox"><option value="en">English</option><option value="zh">简体中文</option><option value="zh-tw">正體中文</option><option value="ar">العربية</option><option value="cs">Czech</option><option value="de">Deutsch</option><option value="es">Español</option><option value="fr">Français</option><option value="he">עברית</option><option value="it">Italiano</option><option value="ja">日本語</option><option value="ko">한국어</option><option value="nl">Nederlands</option><option value="pl">Polski</option><option value="pt">Português</option><option value="ru">Русский</option><option value="sk">Slovenčina</option><option value="sr">Srpski</option><option value="tr">Türkçe</option></select> </div></div>
</div>
<!--
<div id="midBanner"> <div class="layoutRow"> <div id="logo-pad"></div> <div class="pad-Menu"><div><div tabindex="0" role="menubar" class="gwt-MenuBar gwt-MenuBar-horizontal" hidefocus="true" aria-activedescendant="gwt-uid-53" style="outline: 0px;"><input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
<table><tbody><tr><td class="gwt-MenuItem" id="gwt-uid-53" role="menuitem" aria-haspopup="true">Status</td><td class="gwt-MenuItem" id="gwt-uid-90" role="menuitem" aria-haspopup="true">Profiles</td><td class="gwt-MenuItem" id="gwt-uid-100" role="menuitem" aria-haspopup="true">DECT</td><td class="gwt-MenuItem" id="gwt-uid-106" role="menuitem" aria-haspopup="true">Settings</td><td class="gwt-MenuItem" id="gwt-uid-123" role="menuitem" aria-haspopup="true">Maintenance</td><td class="gwt-MenuItem" id="gwt-uid-127" role="menuitem" aria-haspopup="true">Phonebook</td></tr></tbody></table>
</div></div></div> </div> </div>
-->
</div>
<div class="title">
<ul>
<li class="current" index="0">Status</li>
<li index="1">Profiles</li>
<li index="2">DECT</li>
<li index="3">Settings</li>
<li index="4">Maintenance</li>
<li index="5">Phonebook</li>
</ul>
</div>
<div class="content">
<div> <!-- 切换1-->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Status</h1>
</div>
<!-- 当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和width参数-->
<div id="content" style="background-color:#EEEEEE;float:left;">
内容在这里
</div>
</div>
<div> <!-- 切换2-->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Profiles</h1>
</div>
</div>
<div> <!-- 切换3-->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">DECT</h1>
</div>
<!-- 当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和width参数-->
<div id="menu" style="background-color:#FFD700;float:left;">
<ul>
<li class="current" index="0">菜单</li> <!-- 子切换1-->
<li index="1">HTML</li> <!-- 子切换2-->
<li index="2">CSS</li> <!-- 子切换3-->
<li index="3">JavaScript</li> <!-- 子切换4-->
</ul>
</div>
<div class="content">
<div> <!-- 子切换1-->
1111111
</div>
<div> <!-- 子切换2-->
2222222
</div>
<div> <!-- 子切换3-->
3333333
</div>
<div> <!-- 子切换4-->
444444
</div>
</div>
</div>
<div> <!-- 切换4-->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Settings</h1>
</div>
</div>
<div> <!-- 切换5-->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Maintenance</h1>
</div>
</div>
<div> <!-- 切换6-->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Phonebook</h1>
</div>
</div>
</div>
<div id="footer"> <div class="layoutRow"> <div id="footerSupport" style="float: left;"> <a class="gwt-Anchor" href="" target="_blank">Voip Networks Support</a> </div> <div id="footerCopyright" style="float: right;"> <div class="gwt-HTML">Copyright © 2021. All Rights Reserved.</div> </div> </div> </div>
</div>
<script src="./jquery-3.5.1.min.js"></script>
<script>
function loadPageDiv2LoacalGageDiv(url, loadPageDivSelector, localPageDivSelector)
{
//url:这里是另一个静态页的地址,loadPageDivSelector:另一个html页面的指定的一部分,localPageDivSelector:本页面div
$.ajax( {
url: url, //这里是另一个静态页的地址
type: "GET", //静态页用get方法,否则服务器会抛出405错误
success: function(data){
var result = $(data).find(loadPageDivSelector); //loadPageDivSelector:另一个html页面的指定的一部分
$(localPageDivSelector).html(result); //localPageDivSelector:本页面div
}
});
}
<!-- 将外部脚本置底(将脚本尽可能的往后挪,减少对并发下载的影响)js数量比较多合并js到几个大的js库内减少http请求;.如果js数量实在太多需要按需加载 JavaScript 文件,延迟加载和执行非必要脚本;异步执行inline脚本 使用setTimeout控制加载的时机,HTML5中引入了Web Workers的机制,输入的有效性验证,DOM行为----尽量将它转为数组后再访问, 保存到局部变量后再使用局部变量,避免使用eval和Function,局部变量缓存全局变量, 减少闭包的使用,访问超过一次,建议将数据放入局部变量,拼接的字符串较多时将其放在数组中最后调用其join方法得到结果,当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。记得所有值类型做.运算之前先显式转换一下;在销毁对象的时候,要遍历属性中属性,依次删除;作用域中没用的属性可以删除,事件处理函数定义在外部,解除闭包;闭包中,作用域中没用的属性可以删除,以减少内存消耗。删除对dom的引用 obj=null;统计代码放在页尾(或者使用延迟加载);尽量减少DOM访问 缓存已访问过的元素的索引 先“离线”更新节点,再把它们添到DOM树上 避免用JavaScript修复布局问题 -->
<!-- 菜单栏切换-->
var title_list = $(".box>.title>ul>li");
var content_list = $(".box>.content>div");
for(var i = 0; i < title_list.length; i++){
//给每个title添加索引
title_list[i].setAttribute("index",i);
//给每个title添加点击事件
title_list[i].onclick=function(){
//便利所有的title,置空
for(var i = 0; i < title_list.length; i++){
title_list[i].className="";
}
//切换当前title的样式
this.className = "current";
//获取当前title的索引
var current_index = this.getAttribute("index");
//遍历显示对应的当前的title的content
for(var j = 0; j < content_list.length; j++){
if(current_index == j){
content_list[j].style.display = "block";
}
else
content_list[j].style.display = "none";
}
}
}
<!-- 左边列表菜单子切换-->
var child_page_title_list = $(".box>.content>div>#menu>ul>li");
var child_page_content_list = $(".box>.content>div>.content>div");
for(var i = 0; i < child_page_title_list.length; i++){
//给每个title添加索引
child_page_title_list[i].setAttribute("index",i);
//给每个title添加点击事件
child_page_title_list[i].onclick=function(){
//便利所有的title,置空
for(var i = 0; i < child_page_title_list.length; i++){
child_page_title_list[i].className="";
}
//切换当前title的样式
this.className = "current";
//获取当前title的索引
var current_index = this.getAttribute("index");
//遍历显示对应的当前的title的content
for(var j = 0; j < child_page_content_list.length; j++){
if(current_index == j){
child_page_content_list[j].style.display = "block";
loadPageDiv2LoacalGageDiv("./sample_ori.html","#content",content_list[j]);
}
else
child_page_content_list[j].style.display = "none";
}
}
}
</script>
</body>
</html>
二、界面设计(css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>callManager</title>
<style>
*{
padding: 0px;
margin: 0px;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
header{
/* background-color: #ff9900;*/
width: 80%;
height: 100px;
margin-bottom: 5px;
margin: auto;
position: relative;
}
nav{
/* left:160px;
background-color: yellowgr