这篇博客详细介绍了HTML的使用注意事项、CSS界面设计以及表单操作，特别是Jquery如何判断表单是否修改。同时，文章深入探讨了POST提交数据的四种常见方式：application/x-www-form-urlencoded、multipart/form-data、application/json和text/xml，包括每种方式的使用场景和示例。此外，还提供了相关的参考资料，如谷歌浏览器调试技巧和JSON数据处理方法。
目录
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
最低0.47元/天 解锁文章
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
