补充browser 支持
This commit is contained in:
parent
062c8726ae
commit
2f80aa91cb
5
skills/web/browser/README.md
Normal file
5
skills/web/browser/README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# 浏览器
|
||||
|
||||
https://gitee.com/infraboard/go-course/blob/master/day19/browser.md
|
||||
|
||||
storage: https://gitee.com/infraboard/go-course/blob/master/day20/vue-store.md#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8
|
||||
90
skills/web/browser/stroage.drawio
Normal file
90
skills/web/browser/stroage.drawio
Normal file
@ -0,0 +1,90 @@
|
||||
<mxfile host="65bd71144e">
|
||||
<diagram id="0KVY4yAcVLzqzr5E1klz" name="第 1 页">
|
||||
<mxGraphModel dx="893" dy="570" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0"/>
|
||||
<mxCell id="1" parent="0"/>
|
||||
<mxCell id="5" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="60" y="40" width="690" height="360" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="7" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.333;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="2" target="6">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="38" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="2" target="17">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="2" value="<br>session 标签页面" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="120" y="150" width="160" height="110" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="36" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3" target="34">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="39" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3" target="17">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="3" value="session 标签页面" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="304" y="150" width="160" height="110" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="37" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="35">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="40" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="17">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="4" value="session 标签页面" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="480" y="150" width="160" height="110" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="6" value="session<br>storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
|
||||
<mxGeometry x="180" y="320" width="60" height="60" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="10" value="窗口" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
|
||||
<mxGeometry x="70" y="40" width="60" height="30" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="17" value="local<br>storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
|
||||
<mxGeometry x="354" y="50" width="60" height="60" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="19" value="x" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="590" y="150" width="50" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="24" target="25">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="27" value="补充一次额外的数据" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="26">
|
||||
<mxGeometry x="0.1339" y="2" relative="1" as="geometry">
|
||||
<mxPoint x="-11" y="-13" as="offset"/>
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="24" value="Window" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="130" y="910" width="160" height="110" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="25" value="API Server" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="610" y="910" width="120" height="110" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="29" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="28" target="24">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="28" value="cookie" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
|
||||
<mxGeometry x="410" y="1050" width="60" height="60" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="30" value="只要是访问服务端就发" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
|
||||
<mxGeometry x="390" y="970" width="140" height="30" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="31" value="http client" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="220" y="990" width="70" height="30" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="32" value="x" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="230" y="150" width="50" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="33" value="x" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="410" y="150" width="50" height="40" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="34" value="session<br>storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
|
||||
<mxGeometry x="354" y="310" width="60" height="60" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="35" value="session<br>storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
|
||||
<mxGeometry x="530" y="310" width="60" height="60" as="geometry"/>
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
3
skills/web/css/README.md
Normal file
3
skills/web/css/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# CSS 入门
|
||||
|
||||
https://gitee.com/infraboard/go-course/blob/master/day19/css.md
|
||||
3
skills/web/html/README.md
Normal file
3
skills/web/html/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# HTML
|
||||
|
||||
https://gitee.com/infraboard/go-course/blob/master/day19/html.md
|
||||
101
skills/web/html/index.html
Normal file
101
skills/web/html/index.html
Normal file
@ -0,0 +1,101 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>H1</h1>
|
||||
<h2>H2</h2>
|
||||
<h3>H3</h3>
|
||||
<p>这是一个<br> 段落</p>
|
||||
<hr>
|
||||
|
||||
<!-- POST / body urlEncode data -->
|
||||
<form action="https://www.baidu.com/test" method="post">
|
||||
<!-- 文本输入框 -->
|
||||
<label for="name">用户名:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
<br>
|
||||
|
||||
<!-- 密码输入框 -->
|
||||
<label for="password">密码:</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 单选按钮 -->
|
||||
<label>性别:</label>
|
||||
<input type="radio" id="male" name="gender" value="male" checked>
|
||||
<label for="male">男</label>
|
||||
<input type="radio" id="female" name="gender" value="female">
|
||||
<label for="female">女</label>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 复选框 -->
|
||||
<input type="checkbox" id="subscribe" name="subscribe" checked>
|
||||
<label for="subscribe">订阅推送信息</label>
|
||||
<input type="checkbox" id="subscribe" name="subscribe" checked>
|
||||
<label for="subscribe">订阅推送信息2</label>
|
||||
<input type="checkbox" id="subscribe" name="subscribe" checked>
|
||||
<label for="subscribe">订阅推送信息3</label>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 下拉列表 -->
|
||||
<label for="country">国家:</label>
|
||||
<select id="country" name="country">
|
||||
<option value="cn">CN</option>
|
||||
<option value="usa">USA</option>
|
||||
<option value="uk">UK</option>
|
||||
</select>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<input type="submit" value="提交">
|
||||
</form>
|
||||
|
||||
<iframe style="width: 100%;height: 200px;" src="https://www.mcube.top/docs/framework/">
|
||||
<p>您的浏览器不支持 iframe 标签。</p>
|
||||
</iframe>
|
||||
|
||||
<hr>
|
||||
<table style="margin-top: 12px;" border="1">
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
<th>Savings</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<div style="width: 200px;height: 200px;background-color: aqua;">
|
||||
</div>
|
||||
<hr>
|
||||
<div style="width: 200px;height: 200px;background-color: aqua;">
|
||||
</div>
|
||||
<hr>
|
||||
<div style="width: 200px;height: 200px;background-color: blueviolet;">
|
||||
</div>
|
||||
<hr>
|
||||
<span style="background-color: aqua;"><span>test1</span><span>test2</span></span>
|
||||
<span id="my_test_id" style="background-color: aqua;">test</span>
|
||||
<span style="background-color: aqua;">test</span>
|
||||
</body>
|
||||
<script>
|
||||
document.getElementById("my_test_id").style.backgroundColor = 'blueviolet'
|
||||
</script>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user