1. HTML
网页示例(html+css)
Broker、Proxy、Agent 区别
1.1 html语法
标签是“barter rabbet”的缩写，中文意思为“换行”
display属性大全
1.1.1 flex
flex:0 flex:1 flex:none flex:auto使用
flex是（flex-grow、flex-shrink、flex-basis）三个的集合
- flex-grow: flex容器有剩余空间时尺寸不会增长
- flex-shrink: flex容器尺寸不足时尺寸会收缩变小
- flex-basis: 尺寸自适应于内容（行为类似fit-content）
display: flex;
flex-direction: column;
//flex-direction: row\row-reverse\column\column-reverse
flex:0;
//initial：当容器有剩余空间时不增长，当容器空间不足时会缩小，尺寸自适应内容
//0固定大小，1自适应内容
1.2 左侧导航式
<!DOCTYPE html>
<html>
<head>
<title>左侧菜单</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS代码 -->
<style>
.menu_list {
width: 268px;
margin: 0;
}
.menu_head {
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border: 1px solid #f1f1f1;
position: relative;
margin: 0px;
font-weight: bold;
background: #51a9f18c;
}
.menu_list .current {
background: #51a9f18c;
}
.menu_nva {
line-height: 38px;
border-left: 1px solid #51a9f18c;
backguound: #fff;
border-right: 1px solid #51a9f18c;
}
.menu_nva a {
display: block;
height: 38px;
line-height: 38px;
padding-left: 38px;
color: #777777;
background: #fff;
text-decoration: none;
border-bottom: 1px solid #51a9f18c;
}
.menu_nva a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<!-- html start-->
<div id="firstpaneDiv" class="menu_list">
<h3 class="menu_head current">系统管理</h3>
<div style="display:block" class="menu_nva">
<a href="#">菜单管理</a>
<a href="#">账户管理</a>
<a href="#">日志管理</a>
<a href="#">角色管理</a>
<a href="#">编码管理</a>
<a href="#">操作日志</a>
<a href="#">流程管理</a>
</div>
<h3 class="menu_head">xxx菜单1</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div>
<h3 class="menu_head">xxx菜单2</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div><h3 class="menu_head">xxx菜单3</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div><h3 class="menu_head">xxx菜单4</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div>
<h3 class="menu_head">xxx菜单5</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div>
<!-- html end-->
<!-- script 代码-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#firstpaneDiv .menu_nva:eq(0)").show();
$("#firstpaneDiv h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_nva").slideToggle(200).siblings("div.menu_nva").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_nva:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_nva").slideDown(400).siblings("div.menu_nva").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
</script>
</body>
</html>
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Test</title>
<script src = "jquery-3.6.0.js"></script>
<style>
/*兼容浏览器*/
* {
margin: 0;
padding: 0;
}
.content {
width: 100%;
height: 100%;
}
.content-left {
width: 19%;
height: 690px;
background-color: #1c232f;
float: left;
}
.content-right {
width: 81%;
height: 690px;
background-color: #6495ED;
float: left;
}
.left-title {
width: 100%;
height: 50px;
}
.left-title > a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
/*去掉a下默认下划线*/
text-decoration: none;
}
/*分割线*/
.seg {
height: 1px;
width: 100%;
background-color: black;
}
.nav {
/*上下5,左右0*/
margin: 5px 0;
}
/*菜单项主标题*/
.nav-title {
height: 40px;
width: 100%;
color: white;
text-align: center;
line-height: 40px;
cursor: pointer;
}
/*子标题内容区*/
.nav-content {
width: 100%;
height: 100%;
background-color: #0C1119;
}
/*子标题的样式*/
.nav-content > a {
display: block;
width: 100%;
height: 30px;
color: #CCCCCC;
text-decoration: none;
text-align: center;
line-height: 30px;
font-size: 13px;
}
/*子标题鼠标经过时的改变颜色*/
.nav-content > a:hover {
color: #FFFFFF;
background-color: #12040c;
}
/*内容区*/
.content-right{
font-size: 50px;
line-height: 600px;
text-align: center;
}
</style>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<script>
$(function () {
//隐藏所有子标题
$(".nav-menu").each(function () {
$(this).children(".nav-content").hide();
});
//给菜单项中的所有主标题绑定事件
$(".nav-title").each(function () {
//获取点击当前标签下所有子标签
var navConEle = $(this).parents(".nav-menu").children(".nav-content");
//绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
$(this).click(function(){
if (navConEle.css("display") != "none") {
//隐藏,传参数自带动画,单位为毫秒
navConEle.hide(300);
} else {
//显示,传参数自带动画,单位为毫秒
$(".nav-menu").each(function () {
$(this).children(".nav-content").hide(300);
});
navConEle.show(300);
}
});
});
$(".nav-content>a").each(function () {
$(this).click(function () {
$(".content-right").html($(this).html());
});
});
});
</script>
</head>
<body>
<div class = "content">
<!--左侧导航栏-->
<div class = "content-left">
<div class = "left-title">
<a href = "#">xx后台</a>
</div>
<!--水平线-->
<div class = "seg"></div>
<!--菜单栏导航-->
<div class = "nav">
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">商品管理</div>
<!--子标题-->
<div class = "nav-content">
<a href = "#">商品列表</a>
<a href = "#">添加商品</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">订单管理</div>
<!--子标题-->
<div class = "nav-content">
<a href = "#">订单查看</a>
<a href = "#">订单排序</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">类目管理</div>
<!--子标题-->
<div class = "nav-content">
<a href = "#">类目查看</a>
<a href = "#">类目删除</a>
</div>
</div>
</div>
<!--水平线-->
<div class = "seg"></div>
</div>
<!--右侧内容区-->
<div class = "content-right">
<h1>内容区</h1>
</div>
</div>
</body>
</html>
1.3 触发函数
οnclick="fun()“
html的<a>标签点击触发js函数的3种方法
//方法1
<a href="" οnclick="fun()">我是a标签</a>
//方法2
<a href="javascript:fun()">我是a标签</a>
//方法3
<a id='fun' >我是a标签</a>
//然后使用jq的方法通过id获取并设置点击函数：
$("#fun").click(function(){
fun();
});
1.4 导航触发切换
导航栏点击局部内容改变的几种方法（display、iframe、ajax、vue）
导航栏点击及内容切换效果（display）
//********如果id是一个不存在的值，会导致其后所有的代码不执行*******
document.getElementById("menuItem8").style.backgroundColor='#FFD700';
1.5 表格
tr： table row 行
td：table header cell 列
1.6 定时器
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
1.7 网页频谱图
在Vue中使用WebSocket+HighCharts+Canvas实现高性能的频谱瀑布图
1.8 表单
< form ACTION="/cgi-bin/mult.cgi" >
< P >请在下面填入乘数和被乘数，按下确定后可以看到结果。
< INPUT NAME="m" SIZE="5" >
< INPUT NAME="n" SIZE="5" >< BR >
< INPUT TYPE="SUBMIT" values="确定" >
< /form >
<button type="submit"></button>
1.8.1 post方式Content-Type类型（编码类型）
Form表单四种常见的POST请求提交数据方式
1、application/x-www-form-urlencoded
form表单，不设置 enctype 属性。
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
表单如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。用 Ajax 提交数据时，也是使用这种方式。
2、multipart/form-data
表单的 enctype 等于 multipart/form-data。POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
1.8.2 一个表单2个按钮
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="pay" method="post" action="">
收款方：<input type="text" name="get"/>
<br/>
支付方式：
<button onclick="wechat()">微信支付</button>
<button onclick="alipay()">支付宝支付</button>
</form>
</body>
</html>
<script>
function wechat() {
document.pay.action="/pay/wechat";
document.pay.submit();
}
function alipay() {
document.pay.action="/pay/alipay";
document.pay.submit();
}
</script>
1.8.3 表单的局部更新
JavaScript知识汇总（Ajax&&jQuery）
form的submit()是一个全局页面更新，部分刷新则要使用异步对象。
2. html示例
表单的 input、select 默认的样式是不同的，所以就造成了width设置的一样，但就是对不齐，可以设置box-sizing:border-box;来解决不一致问题。
<!DOCTYPE html>
<html>
<title>COM SETTING</title>
<body>
<form method='post' action='IP_Set.cgi'>
串口号:<input type='text' id='COM' name='COM_NUM'/><br>
波特率:<input type='text' id='BDR' name='BD_RATE'/><br>
<input type='submit' value='确定'/>
</form>
</body>
</html>
<script>
document.getElementById('COM').value='1';
document.getElementById('BDR').value='9600';
</script>
2. web server
C语言简易web server
简易webserver(参考1: tinyServer)
使用epoll传输http（有关闭socket）
单片机使用HTTP POST方式发送数据
基于epoll的简易http服务器(c++)
1、http协议
请求：
POST /index.html HTTP/1.1
HOST: www.XXX.com
User-Agent: Mozilla/5.0(Windows NT 6.1;rv:15.0) Firefox/15.0
Username=admin&password=admin
响应：
HTTP/1.1 200 OK
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>this is http response</p>
</body>
</html>
get表单：
GET /Login.cgi?Username=hello&Password=world HTTP/1.1
Host: 192.168.1.199
Connection: Keep-Alive
Accept: /
Accept-Language: zh-CN
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; SE 2.X MetaSr 1.0)
Referer: http://192.168.1.199/
Accept-Encoding: gzip, deflate
post表单：
POST /Login.cgi HTTP/1.1
Host: 192.168.1.199
Connection: Keep-Alive
Content-Length: 29
Pragma: no-cache
Cache-Control: no-cache
Accept: /
Accept-Language: zh-CN
Content-Type: application/x-www-form-urlencoded
Origin: http://192.168.1.199
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; SE 2.X MetaSr 1.0)
Referer: http://192.168.1.199/
Accept-Encoding: gzip, deflate\r\n
\r\n
Username=hello&Password=world
发送不定长数据：chunked方式
HTTP/1.1 200 OK\r\n
Content-Type: text/html\r\n
Transfer-Encoding: chunked\r\n
\r\n
12C\r\n
(网页代码2)\r\n
6C\r\n
(网页代码3)\r\n
…
0\r\n
\r\n
3. Javascript
3.1 选择器
标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')。
id属性是唯一的，身份证，name是名字。id不能重复，名字能重复，id和name可相同。
document.getElementById("p2").style.color="red"; //js中
#a{ color: red;} //css中
#A{ color: pink;}
name属性经常在表单中使用，用来提交信息；它仅对a, form, iframe, img, map, input, select, textarea等标签元素有效。
name属性可以在在javascript中，使用getElementsByName()来查找元素；但无法在CSS或URL中被引用。例：
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
如果你要用$(“#id”)，你得引入JavaScript框架，你加上这个标签就可以了
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
$("#id")=document.getElementById("id")；
标签选择器$('p')，$('tr')
类选择器$('.myClass')
id选择器$('#myId')
绑定id前要加一个"#"，如果不加的话绑定的是标签，而不是一个id，
比如:这个就是绑定li标签，点击所有的li标签都会触发这个点击事件。
$("li").click(function(){
alert($(this).html();
);
3.2 select操作
<select id="select">
<option value="A" url="http://www.baidu.com">第一个option</option>
<option value="B" url="http://www.qq.com">第二个option</option>
</select>
一：JavaScript原生的方法
var myselect=document.getElementById("select"); //1: 拿到select对象：
var index=myselect.selectedIndex ; //2：拿到选中项的索引
myselect.options[index].value; //3: 拿到选中项options的value
myselect.options[index].text; //4: 拿到选中项options的text
myselect.options[index].getAttribute('url'); //5: 拿到选中项的其他值，比如这里的url：
二：jQuery方法
var options=$(“#select option:selected”); //1 获取选中的项
alert(options.val()); //2 拿到选中项的值
alert(options.text()); //3 拿到选中项的文本
alert(options.attr('url')); //4 拿到选中项的url值
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
