mirror of
https://github.com/ZSCNetSupportDept/website.git
synced 2025-10-29 01:15:04 +08:00
Web历史初版～～
This commit is contained in:
231
static/img/blog/fetching-a-page.svg
Normal file
231
static/img/blog/fetching-a-page.svg
Normal file
@@ -0,0 +1,231 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="710" height="470" style="background-color:#fff" viewBox="-0.5 -0.5 710 470">
|
||||
<rect width="100%" height="100%" fill="#FFF"/>
|
||||
<rect width="710" height="470" fill="#FFF" pointer-events="all" rx="14.1" ry="14.1"/>
|
||||
<rect width="320" height="420" x="20" y="30" fill="#FFF" stroke="#000" pointer-events="all" rx="9.6" ry="9.6"/>
|
||||
<rect width="140" height="70" x="190" y="90" fill="#fff2cc" stroke="#d6b656" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:125px;margin-left:193px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="260" y="130" font-family="Monospace" font-size="16" text-anchor="middle">image</text>
|
||||
</switch>
|
||||
<rect width="140" height="80" x="40" y="310" fill="#f8cecc" stroke="#b85450" pointer-events="all" rx="2.4" ry="2.4"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:43px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Video
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="110" y="355" font-family="Monospace" font-size="16" text-anchor="middle">Video</text>
|
||||
</switch>
|
||||
<rect width="140" height="80" x="190" y="310" fill="#ffe6cc" stroke="#d79b00" pointer-events="all" rx="2.4" ry="2.4"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:193px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Advertisement
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="260" y="355" font-family="Monospace" font-size="16" text-anchor="middle">Advertisement</text>
|
||||
</switch>
|
||||
<rect width="70" height="10" x="40" y="410" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="200" height="10" x="120" y="410" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="140" height="10" x="40" y="90" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="130" height="10" x="40" y="110" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="40" y="130" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="90" y="130" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="182" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="135" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="40" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="140" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="135" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="40" y="242" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="135" y="182" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="40" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="80" height="10" x="230" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="120" height="10" x="170" y="242" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="170" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="240" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="270" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="90" height="10" x="220" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="50" height="10" x="40" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="120" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="40" height="10" x="200" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="50" height="10" x="280" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="290" height="10" x="40" y="60" fill="#adadad" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="130" height="10" x="40" y="150" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/>
|
||||
<rect width="140" height="24" x="100" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:12px;margin-left:103px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
Web document
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="170" y="17" font-family="Monospace" font-size="16" text-anchor="middle">Web document</text>
|
||||
</switch>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M333 125h207V85h10" pointer-events="stroke"/>
|
||||
<circle cx="330" cy="125" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="m283 85.01 132.5.49L550 85" pointer-events="stroke"/>
|
||||
<circle cx="280" cy="85" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M333 350h197v35h20" pointer-events="stroke"/>
|
||||
<circle cx="330" cy="350" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M180 307v-10h370" pointer-events="stroke"/>
|
||||
<circle cx="180" cy="310" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<rect width="150" height="24" x="370" y="20" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:32px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET index.html
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="37" font-family="Monospace" font-size="16" text-anchor="middle">GET index.html
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="60" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:72px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET styles.css
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="77" font-family="Monospace" font-size="16" text-anchor="middle">GET styles.css
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="103" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:115px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET header.png
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="120" font-family="Monospace" font-size="16" text-anchor="middle">GET header.png
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="268" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:280px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET video.mp4
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="285" font-family="Monospace" font-size="16" text-anchor="middle">GET video.mp4
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="150" height="24" x="370" y="326" fill="none" pointer-events="all" rx=".72" ry=".72"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:338px;margin-left:373px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
<div>
|
||||
GET advert.jpg
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="445" y="343" font-family="Monospace" font-size="16" text-anchor="middle">GET advert.jpg
|
||||
</text>
|
||||
</switch>
|
||||
<rect width="140" height="70" x="550" y="50" fill="#bac8d3" stroke="#23445d" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:85px;margin-left:553px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Web server
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="620" y="90" font-family="Monospace" font-size="16" text-anchor="middle">Web server</text>
|
||||
</switch>
|
||||
<g stroke="#000">
|
||||
<path fill="none" stroke-miterlimit="10" d="M342.84 50.02 540 50v35h10" pointer-events="stroke"/>
|
||||
<circle cx="339.84" cy="50.02" r="3" pointer-events="all"/>
|
||||
</g>
|
||||
<rect width="140" height="70" x="550" y="262" fill="#d0cee2" stroke="#56517e" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:297px;margin-left:553px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Video server
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="620" y="302" font-family="Monospace" font-size="16" text-anchor="middle">Video server</text>
|
||||
</switch>
|
||||
<rect width="140" height="70" x="550" y="350" fill="#b1ddf0" stroke="#10739e" pointer-events="all" rx="2.1" ry="2.1"/>
|
||||
<switch transform="translate(-.5 -.5)">
|
||||
<foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:385px;margin-left:553px">
|
||||
<div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
|
||||
<div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
|
||||
Ad server
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
<text x="620" y="390" font-family="Monospace" font-size="16" text-anchor="middle">Ad server</text>
|
||||
</switch>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
Reference in New Issue
Block a user