weblab finished
This commit is contained in:
BIN
network/weblab/hifuu.ink.tgz
Normal file
BIN
network/weblab/hifuu.ink.tgz
Normal file
Binary file not shown.
1
network/weblab/hifuu.ink/README.md
Normal file
1
network/weblab/hifuu.ink/README.md
Normal file
@@ -0,0 +1 @@
|
||||
This is my official website by HTML5
|
||||
73
network/weblab/hifuu.ink/TheProject.html
Normal file
73
network/weblab/hifuu.ink/TheProject.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<HEADER>
|
||||
<TITLE>The World Wide Web project</TITLE>
|
||||
<NEXTID N="55">
|
||||
</HEADER>
|
||||
<BODY>
|
||||
<H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A
|
||||
NAME=0 HREF="WhatIs.html">
|
||||
hypermedia</A> information retrieval
|
||||
initiative aiming to give universal
|
||||
access to a large universe of documents.<P>
|
||||
Everything there is online about
|
||||
W3 is linked directly or indirectly
|
||||
to this document, including an <A
|
||||
NAME=24 HREF="http://info.cern.ch/hypertext/WWW/Summary.html">executive
|
||||
summary</A> of the project, <A
|
||||
NAME=29 HREF="http://info.cern.ch/hypertext/WWW/Administration/Mailing/Overview.html">Mailing lists</A>
|
||||
, <A
|
||||
NAME=30 HREF="http://info.cern.ch/hypertext/WWW/Policy.html">Policy</A> , November's <A
|
||||
NAME=34 HREF="http://info.cern.ch/hypertext/WWW/News/9211.html">W3 news</A> ,
|
||||
<A
|
||||
NAME=41 HREF="http://info.cern.ch/hypertext/WWW/FAQ/List.html">Frequently Asked Questions</A> .
|
||||
<DL>
|
||||
<DT><A
|
||||
NAME=44 HREF="http://info.cern.ch/hypertext/DataSources/Top.html">What's out there?</A>
|
||||
<DD> Pointers to the
|
||||
world's online information,<A
|
||||
NAME=45 HREF="http://info.cern.ch/hypertext/DataSources/bySubject/Overview.html"> subjects</A>
|
||||
, <A
|
||||
NAME=z54 HREF="http://info.cern.ch/hypertext/WWW/DataSources/WWW/Servers.html">W3 servers</A>, etc.
|
||||
<DT><A
|
||||
NAME=46 HREF="http://info.cern.ch/hypertext/WWW/Help.html">Help</A>
|
||||
<DD> on the browser you are using
|
||||
<DT><A
|
||||
NAME=13 HREF="http://info.cern.ch/hypertext/WWW/Status.html">Software Products</A>
|
||||
<DD> A list of W3 project
|
||||
components and their current state.
|
||||
(e.g. <A
|
||||
NAME=27 HREF="http://info.cern.ch/hypertext/WWW/LineMode/Browser.html">Line Mode</A> ,X11 <A
|
||||
NAME=35 HREF="http://info.cern.ch/hypertext/WWW/Status.html#35">Viola</A> , <A
|
||||
NAME=26 HREF="http://info.cern.ch/hypertext/WWW/NeXT/WorldWideWeb.html">NeXTStep</A>
|
||||
, <A
|
||||
NAME=25 HREF="http://info.cern.ch/hypertext/WWW/Daemon/Overview.html">Servers</A> , <A
|
||||
NAME=51 HREF="http://info.cern.ch/hypertext/WWW/Tools/Overview.html">Tools</A> ,<A
|
||||
NAME=53 HREF="MailRobot/Overview.html"> Mail robot</A> ,<A
|
||||
NAME=52 HREF="http://info.cern.ch/hypertext/WWW/Status.html#57">
|
||||
Library</A> )
|
||||
<DT><A
|
||||
NAME=47 HREF="http://info.cern.ch/hypertext/WWW/Technical.html">Technical</A>
|
||||
<DD> Details of protocols, formats,
|
||||
program internals etc
|
||||
<DT><A
|
||||
NAME=40 HREF="http://info.cern.ch/hypertext/WWW/Bibliography.html">Bibliography</A>
|
||||
<DD> Paper documentation
|
||||
on W3 and references.
|
||||
<DT><A
|
||||
NAME=14 HREF="http://info.cern.ch/hypertext/WWW/People.html">People</A>
|
||||
<DD> A list of some people involved
|
||||
in the project.
|
||||
<DT><A
|
||||
NAME=15 HREF="http://info.cern.ch/hypertext/WWW/History.html">History</A>
|
||||
<DD> A summary of the history
|
||||
of the project.
|
||||
<DT><A
|
||||
NAME=37 HREF="http://info.cern.ch/hypertext/WWW/Helping.html">How can I help</A> ?
|
||||
<DD> If you would like
|
||||
to support the web..
|
||||
<DT><A
|
||||
NAME=48 HREF="http://info.cern.ch/hypertext/README.html">Getting code</A>
|
||||
<DD> Getting the code by<A
|
||||
NAME=49 HREF="http://info.cern.ch/hypertext/WWW/LineMode/Defaults/Distribution.html">
|
||||
anonymous FTP</A> , etc.</A>
|
||||
</DL>
|
||||
</BODY>
|
||||
BIN
network/weblab/hifuu.ink/avatar.jpg
Normal file
BIN
network/weblab/hifuu.ink/avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
network/weblab/hifuu.ink/college-logo.jpg
Normal file
BIN
network/weblab/hifuu.ink/college-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
network/weblab/hifuu.ink/favicon.ico
Normal file
BIN
network/weblab/hifuu.ink/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
226
network/weblab/hifuu.ink/index.html
Normal file
226
network/weblab/hifuu.ink/index.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CGH0S7 Official</title>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||||
<style>
|
||||
:root {
|
||||
--accent: #CEA152 ;
|
||||
--text: #1f2933;
|
||||
--muted: #5c6a73;
|
||||
--bg: #f7f8fa;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
a { color: var(--muted); text-decoration: none; }
|
||||
a:hover { color: var(--accent); }
|
||||
.page {
|
||||
max-width: 820px;
|
||||
padding: 56px 28px 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
nav {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
nav ul {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 220px;
|
||||
}
|
||||
.avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
}
|
||||
h2 {
|
||||
margin: 38px 0 12px;
|
||||
font-size: 18px;
|
||||
color: var(--accent);
|
||||
}
|
||||
p {
|
||||
margin: 8px 0 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.section ul {
|
||||
margin: 0 0 0 20px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
.section li { margin-bottom: 8px; }
|
||||
.sub-title {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 10px 18px;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e5e9ed;
|
||||
}
|
||||
.card:last-child { border-bottom: none; }
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #e7f6ef;
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
.badge img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px; /* Ensure image also respects border-radius */
|
||||
}
|
||||
footer {
|
||||
margin-top: 48px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
header { flex-direction: column; align-items: flex-start; }
|
||||
nav ul { gap: 14px; }
|
||||
.card { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header>
|
||||
<nav aria-label="Main">
|
||||
<ul>
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#blog">Blog</a></li>
|
||||
<li><a href="#friends">Friends</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="brand" id="home">
|
||||
<img class="avatar" src="avatar.jpg" alt="Avatar">
|
||||
<div>
|
||||
<h1>Jason Cheng</h1>
|
||||
<div class="sub-title">Illusionary White Traveler / Linux Lover</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section" aria-labelledby="about">
|
||||
<h2 id="about">About</h2>
|
||||
<p>I'm CGH0S7, an undergraduate student with a strong interest in computer architecture, high-performance computing, the Linux kernel, and the RISC-V instruction set. I love contributing to and learning from the open-source community, and I've been using Linux as my daily driver since 2019. I enjoy exploring the intersection of software and hardware, and I'm always eager to dive deeper into systems-level development.</p>
|
||||
<p>Find me on <a href="https://github.com/CGH0S7"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg> GitHub</a></p>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="hobby">
|
||||
<h2 id="hobby"># Hobby</h2>
|
||||
<ul>
|
||||
<li><strong>Coding:</strong> Mostly working with C/C++, but also a little familiar with Python/Rust/Go/Dart/Chisel. Go is my favorite though.</li>
|
||||
<li><strong>Reading:</strong> Computer science books, novels, and art books/concept art collections from films and animations.</li>
|
||||
<li><strong>Linux Distros:</strong> Arch Linux enthusiast. Daily drivers: Arch Linux and CachyOS. Servers: Rocky Linux and Debian.</li>
|
||||
<li><strong>Music:</strong> Favorite composer: Yasunori Mitsuda. Favorite singer: Utada Hikaru. Favorite band: Neck Deep.</li>
|
||||
<li><strong>Game:</strong> Addicted to JRPG. I sincerely love Xenoblade Chronicles, Fire Emblem and Trails series forever. Also enjoy Monster Hunter and Counter-Strike with friends.</li>
|
||||
<li><strong>Movie:</strong> The Truman Show, The Lord of the Rings, Interstellar, Decisive Engagement and so on.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="education">
|
||||
<h2 id="education"># Education</h2>
|
||||
<div class="card">
|
||||
<div>
|
||||
<div class="sub-title">NUDT · Changsha, China</div>
|
||||
<strong>National University of Defense Technology</strong>
|
||||
<p>Sep. 2023 - Jun. 2027</p>
|
||||
<p>Major in Network Engineering</p>
|
||||
</div>
|
||||
<img class="badge" src="college-logo.jpg" alt="College Logo">
|
||||
</div>
|
||||
<div class="card">
|
||||
<div>
|
||||
<div class="sub-title">University · City</div>
|
||||
<strong>To Be Determined</strong>
|
||||
<p>Start Date - End Date</p>
|
||||
<p>Major / Program to be determined</p>
|
||||
</div>
|
||||
<span class="badge">?</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="awards">
|
||||
<h2 id="awards"># Awards & Certifications</h2>
|
||||
<ul>
|
||||
<li><strong>ASC 24 First Prize (Rank 5):</strong> Lead developer for the OpenCAEPoro problem</li>
|
||||
<li><strong>ASC 25 First Prize (Rank 19):</strong> Responsible for cluster operations and performance tuning</li>
|
||||
<li><strong>NSCSCC 2025 Third Prize (Rank 15):</strong> Spearheaded mid-end optimization and back-end adaptation in the RISC-V compiler design contest</li>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="publications">
|
||||
<h2 id="publications"># Publications</h2>
|
||||
<p>Stay tuned for upcoming publications.</p>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="blog">
|
||||
<h2 id="blog">Blog</h2>
|
||||
<p><a href="https://blog.hifuu.ink/">CGH0S7's Blog - The Gensokyo the Gods Loved</a></p>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="friends">
|
||||
<h2 id="friends">Friends</h2>
|
||||
<ul>
|
||||
<li><a href="https://hexu.shahe.org/">Hexu - Keep your curiosity</a></li>
|
||||
<li><a href="https://wingrew.com/">Wingrew - The best student from the Highland to THU</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="contact">
|
||||
<h2 id="contact">Contact</h2>
|
||||
<ul>
|
||||
<li><a href="mailto:jasoncheng@hifuu.ink">jasoncheng@hifuu.ink</a></li>
|
||||
<li><a href="mailto:cjingyu426@gmail.com">cjingyu426@gmail.com</a></li>
|
||||
<!-- <li><a href="mailto:c_gh0s7@nudt.edu.cn">c_gh0s7@nudt.edu.cn</a></li> -->
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>Build with ❤️ · 🐳 2025-2026</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
153
network/weblab/labtemplate.typ
Normal file
153
network/weblab/labtemplate.typ
Normal file
@@ -0,0 +1,153 @@
|
||||
#let times = "Times LT Pro"
|
||||
#let times = "Times New Roman"
|
||||
#let song = (times, "Noto Serif CJK SC")
|
||||
#let hei = (times, "Noto Sans CJK SC")
|
||||
#let kai = (times, "Noto Serif CJK SC")
|
||||
#let xbsong = (times, "Noto Serif CJK SC")
|
||||
#let fsong = (times, "Noto Serif CJK SC")
|
||||
#let code = (times, "JetBrains Mono")
|
||||
#let nudtlabpaper(title: "",
|
||||
author: "",
|
||||
id: "",
|
||||
training_type:"",
|
||||
grade: "",
|
||||
major: "",
|
||||
department: "",
|
||||
advisor: "",
|
||||
jobtitle: "",
|
||||
lab: "",
|
||||
date: "",
|
||||
header_str: "",
|
||||
body) = {
|
||||
// Set the document's basic properties.
|
||||
set document(author: author, title: title)
|
||||
set page(
|
||||
|
||||
margin: (left: 30mm, right: 30mm, top: 30mm, bottom: 30mm),
|
||||
)
|
||||
|
||||
// Title row.
|
||||
v(158pt)
|
||||
align(center)[
|
||||
#block(text(weight: 700, size: 30pt, font: hei, tracking: 15pt, "计算机网络"))
|
||||
]
|
||||
align(center)[
|
||||
#block(text(weight: 700, size: 30pt, font: song, tracking: 15pt, "本科实验报告"))
|
||||
]
|
||||
|
||||
v(103pt)
|
||||
pad(
|
||||
left: 1em,
|
||||
right: 1em,
|
||||
grid(
|
||||
columns: (80pt, 1fr),
|
||||
rows: (17pt, auto),
|
||||
text(weight: 700, size: 16pt, font: song, "实验名称："),
|
||||
align(center, text(weight: "regular", size: 16pt, font: song, title)),
|
||||
text(""),
|
||||
line(length: 100%)
|
||||
)
|
||||
// #block(text(weight: 700, 1.75em, title))
|
||||
// underline(text(weight: 700, size: 16pt, font: song, title))
|
||||
)
|
||||
|
||||
// Author information.
|
||||
|
||||
v(82.5pt)
|
||||
|
||||
grid(
|
||||
columns: (0.25fr, 0.25fr, 0.25fr, 0.25fr),
|
||||
rows: (15pt, 8pt, 15pt, 8pt, 15pt, 8pt, 15pt, 8pt, 15pt),
|
||||
text(size: 14pt, font: song, tracking: 10pt, "学员姓名"),
|
||||
align(center, text(size: 14pt, font: song, author)),
|
||||
text(size: 14pt, font: song, tracking: 54pt, "学号"),
|
||||
align(center, text(size: 14pt, font: times, id)),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(size: 14pt, font: song, tracking: 9pt, "培养类型"),
|
||||
align(center, text(size: 14pt, font: song, training_type)),
|
||||
text(size: 14pt, font: song, tracking: 54pt, "年级"),
|
||||
align(center, text(size: 14pt, font: times, grade)),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(size: 14pt, font: song, tracking: 54pt, "专业"),
|
||||
align(center, text(size: 14pt, font: song, major)),
|
||||
text(size: 14pt, font: song, tracking: 9pt, "所属学院"),
|
||||
align(center, text(size: 14pt, font: song, department)),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(size: 14pt, font: song, tracking: 9pt, "指导教员"),
|
||||
align(center, text(size: 14pt, font: song, advisor)),
|
||||
text(size: 14pt, font: song, tracking: 54pt, "职称"),
|
||||
align(center, text(size: 14pt, font: song, jobtitle)),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(size: 14pt, font: song, tracking: 20pt, "实验室"),
|
||||
align(center, text(size: 14pt, font: song, lab)),
|
||||
text(size: 14pt, font: song, tracking: 9pt, "实验时间"),
|
||||
align(center, text(size: 14pt, font: song, date)),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
text(""),
|
||||
line(length: 100%),
|
||||
)
|
||||
|
||||
v(50.5pt)
|
||||
align(center, text(font: hei, size: 15pt, "国防科技大学教育训练部制"))
|
||||
|
||||
pagebreak()
|
||||
|
||||
set page(
|
||||
margin: (left: 30mm, right: 30mm, top: 30mm, bottom: 30mm),
|
||||
numbering: "i",
|
||||
number-align: center,
|
||||
)
|
||||
|
||||
v(14pt)
|
||||
align(center)[
|
||||
#block(text(font: hei, size: 14pt, "《本科实验报告》填写说明"))
|
||||
]
|
||||
|
||||
v(14pt)
|
||||
text("")
|
||||
par(first-line-indent: 2em, text(font: song, size: 12pt, "实验报告内容编排应符合以下要求："))
|
||||
|
||||
par(first-line-indent: 2em, text(font: fsong, size: 12pt, "（1）采用A4（21cm×29.7cm）白色复印纸，单面黑字。上下左右各侧的页边距均为3cm；缺省文档网格：字号为小4号，中文为宋体，英文和阿拉伯数字为Times New Roman，每页30行，每行36字；页脚距边界为2.5cm，页码置于页脚、居中，采用小5号阿拉伯数字从1开始连续编排，封面不编页码。"))
|
||||
|
||||
par(first-line-indent: 2em, text(font: fsong, size: 12pt, "（2）报告正文最多可设四级标题，字体均为黑体，第一级标题字号为4号，其余各级标题为小4号；标题序号第一级用“一、”、“二、”……，第二级用“（一）”、“（二）” ……，第三级用“1.”、“2.” ……，第四级用“（1）”、“（2）” ……，分别按序连续编排。"))
|
||||
|
||||
par(first-line-indent: 2em, text(font: fsong, size: 12pt, "（3）正文插图、表格中的文字字号均为5号。"))
|
||||
|
||||
pagebreak()
|
||||
|
||||
set page(
|
||||
margin: (left: 30mm, right: 30mm, top: 30mm, bottom: 30mm),
|
||||
numbering: "1",
|
||||
number-align: center,
|
||||
)
|
||||
|
||||
set heading(numbering: "1.1")
|
||||
// set text(font: hei, lang: "zh")
|
||||
|
||||
show heading: it => box(width: 100%)[
|
||||
#v(0.50em)
|
||||
#set text(font: hei)
|
||||
#counter(heading).display()
|
||||
// #h(0.5em)
|
||||
#it.body
|
||||
]
|
||||
// Main body.
|
||||
set par(justify: true)
|
||||
|
||||
body
|
||||
}
|
||||
|
||||
#let para(t) = par(first-line-indent: 2em, text(font: song, size: 10.5pt, t))
|
||||
11000
network/weblab/main.pdf
Normal file
11000
network/weblab/main.pdf
Normal file
File diff suppressed because one or more lines are too long
150
network/weblab/main.typ
Normal file
150
network/weblab/main.typ
Normal file
@@ -0,0 +1,150 @@
|
||||
#import "labtemplate.typ": *
|
||||
#show: nudtlabpaper.with(title: "网站搭建实验",
|
||||
author: "程景愉",
|
||||
id: "202302723005",
|
||||
training_type: "无军籍",
|
||||
grade: "2023",
|
||||
major: "网络工程",
|
||||
department: "计算机学院",
|
||||
advisor: "逄德明",
|
||||
jobtitle: "教授",
|
||||
lab: "307-211",
|
||||
date: "2026.01.17",
|
||||
header_str: "《计算机网络》实验报告",
|
||||
)
|
||||
|
||||
#set page(header: [
|
||||
#set par(spacing: 6pt)
|
||||
#align(center)[#text(size: 11pt)[《计算机网络》实验报告]]
|
||||
#v(-0.3em)
|
||||
#line(length: 100%, stroke: (thickness: 1pt))
|
||||
],)
|
||||
|
||||
// Global text settings
|
||||
#set text(font: song, size: 10.5pt)
|
||||
#set par(first-line-indent: 2em, justify: true, leading: 1em)
|
||||
|
||||
// Heading styling
|
||||
#show heading: it => box(width: 100%)[
|
||||
#v(0.50em)
|
||||
#set text(font: hei)
|
||||
#counter(heading).display()
|
||||
#h(0.5em)
|
||||
#it.body
|
||||
]
|
||||
|
||||
#outline(title: "目录", depth: 3, indent: 2em)
|
||||
#pagebreak()
|
||||
#outline(
|
||||
title: [图目录],
|
||||
target: figure.where(kind: image),
|
||||
)
|
||||
#pagebreak()
|
||||
|
||||
// List settings
|
||||
#set enum(indent: 0.5em, body-indent: 0.5em)
|
||||
// Disable indentation for lists
|
||||
#show enum: set par(first-line-indent: 0pt)
|
||||
#show list: set par(first-line-indent: 0pt)
|
||||
|
||||
= 实验目的
|
||||
|
||||
1. 了解万维网（World Wide Web）的历史起源与发展，通过复刻世界上第一个网站，直观感受早期Web技术的形态，理解超文本标记语言（HTML）的基本结构与演变。
|
||||
2. 掌握现代Web前端开发技术，包括HTML5语义化标签、CSS3样式设计及响应式布局，能够独立设计并编写符合标准、美观大方的个人主页。
|
||||
3. 熟悉互联网基础设施的运作机制，包括域名系统（DNS）的注册与解析原理，以及Linux服务器的基本操作。
|
||||
4. 掌握Web服务器软件（Caddy）的安装与配置，实现网站在个人服务器上的部署，并配置HTTPS安全访问，打通从开发到上线的全流程。
|
||||
|
||||
= 实验原理
|
||||
|
||||
1. *HTML (HyperText Markup Language)*: 超文本标记语言是构建Web的基础。它使用标签（Tags）来定义网页的内容结构，如标题、段落、链接和图片。实验中涉及从早期的HTML标签到现代HTML5语义化标签的应用。
|
||||
2. *CSS (Cascading Style Sheets)*: 层叠样式表用于控制网页的外观和布局。通过CSS选择器、盒模型、Flexbox/Grid布局以及媒体查询（Media Queries），可以将结构与表现分离，实现适应不同屏幕尺寸的响应式设计。
|
||||
3. *Web服务器与HTTP协议*: Web服务器（如Caddy）运行在服务端，监听标准端口（80/443），接收客户端（浏览器）发起的HTTP/HTTPS请求，并返回请求的资源（HTML文件、图片等）。Caddy以其自动化的HTTPS配置和简洁的Caddyfile配置语法著称。
|
||||
4. *DNS (Domain Name System)*: 域名系统将人类易记的域名（如 `hifuu.ink`）映射为计算机网络中通讯使用的IP地址，使用户能够通过域名便捷地访问服务器。
|
||||
|
||||
= 实验环境
|
||||
|
||||
- *操作系统*: Linux (个人公网服务器环境，使用Rockylinux 9)
|
||||
- *Web服务器*: Caddy Web Server (支持自动 HTTPS)
|
||||
- *开发环境*: VS Code, Typst (实验报告排版)
|
||||
- *前端技术栈*: HTML5, CSS3 (未使用庞大的前端框架，保持轻量级)
|
||||
- *域名服务商*: 阿里云 (Aliyun)
|
||||
- *测试工具*: Firefox Developer Edition
|
||||
|
||||
= 实验步骤及结果
|
||||
|
||||
== 复刻世界上第一个网站（https://www.hifuu.ink/TheProject.html）
|
||||
|
||||
实验的第一部分是致敬历史，复刻由万维网之父 Tim Berners-Lee 创建的世界上第一个网站 "The World Wide Web project"。
|
||||
|
||||
我获取了原始的 `TheProject.html` 源代码。代码中包含了许多早期 HTML 的特征，例如 `<NEXTID>` 标签（这是当年 NeXTSTEP 开发环境特有的标签）以及 `<DL>`, `<DT>`, `<DD>` 定义列表的使用。该页面通过简单的超链接结构，构建了一个关于 W3C 项目本身的各种信息的索引。
|
||||
|
||||
#figure(
|
||||
rect(width: 100%, height: 8cm, stroke: (thickness: 1pt, dash: "dashed"))[
|
||||
#align(center + horizon)[#image("screenshot2.png")]
|
||||
],
|
||||
caption: [复刻的世界上第一个网站页面效果],
|
||||
)
|
||||
|
||||
== 搭建个人主页 (https://www.hifuu.ink)
|
||||
|
||||
实验的第二部分是设计并实现我的个人主页 "CGH0S7 Official"。主页旨在展示个人简介、技术栈、教育经历及博客链接。
|
||||
|
||||
=== 页面结构设计 (HTML5)
|
||||
|
||||
在 `index.html` 中，我采用了 HTML5 的语义化标签来构建页面结构，这有助于代码的可读性和 SEO 优化：
|
||||
|
||||
- *`<header>`*: 包含了网站导航 (`<nav>`) 和个人品牌区域 (`.brand`)，展示头像与昵称。
|
||||
- *`<section>`*: 将页面内容划分为不同的逻辑区块，包括关于我 (`About`)、爱好 (`Hobby`)、教育经历 (`Education`)、奖项 (`Awards`)、发表论文 (`Publications`)、博客 (`Blog`) 和联系方式 (`Contact`)。
|
||||
- *`<footer>`*: 页脚部分，展示版权信息和构建时间。
|
||||
|
||||
=== 样式与交互设计 (CSS3)
|
||||
|
||||
为了实现现代化的视觉体验，我在 `<style>` 标签中编写了 CSS 样式：
|
||||
|
||||
- *CSS 变量*: 定义了 `:root` 变量（如 `--accent: #CEA152`），方便统一管理主题色和字体颜色。
|
||||
- *Flexbox 与 Grid 布局*: 导航栏使用 Flexbox 实现水平排列；教育经历卡片使用 Grid 布局 (`grid-template-columns: 1fr auto`) 实现文字与校徽的对齐。
|
||||
- *响应式设计*: 使用 `@media (max-width: 640px)` 媒体查询。当屏幕宽度小于 640px 时，Header 自动调整为垂直排列，卡片布局也切换为单列模式，确保在手机端有良好的浏览体验。
|
||||
|
||||
#figure(
|
||||
rect(width: 100%, height: 10cm, stroke: (thickness: 1pt, dash: "dashed"))[
|
||||
#align(center + horizon)[#image("screenshot1.png")]
|
||||
],
|
||||
caption: [个人主页 (hifuu.ink) PC 端显示效果],
|
||||
)
|
||||
|
||||
#figure(
|
||||
rect(width: 50%, height: 10cm, stroke: (thickness: 1pt, dash: "dashed"))[
|
||||
#align(center + horizon)[#image("screenshot3.jpg")]
|
||||
],
|
||||
caption: [个人主页移动端响应式布局效果],
|
||||
)
|
||||
|
||||
== 服务器部署与上线
|
||||
|
||||
=== 域名购买与解析
|
||||
|
||||
为了让个人主页能够在公网访问，我在 *阿里云* 平台购买了域名 `hifuu.ink`。
|
||||
|
||||
在阿里云的域名控制台中，我添加了一条 A 记录，将主机记录 `@` 指向了我个人 Linux 服务器的公网 IP 地址。等待 DNS 缓存刷新后，ping 域名即可解析到正确的 IP。
|
||||
|
||||
=== 配置 Caddy Web Server
|
||||
|
||||
我选择使用 *Caddy* 作为 Web 服务器，主要看重其配置简单且默认支持自动 HTTPS（通过 Let's Encrypt）。
|
||||
|
||||
部署步骤如下：
|
||||
|
||||
1. 将编写好的 `index.html`、`avatar.jpg` 以及复刻的 `hifuu.ink` 文件夹上传至服务器目录。
|
||||
2. 编写 `Caddyfile` 配置文件，指定站点根目录。
|
||||
3. 启动 Caddy 服务。Caddy 自动检测到域名配置，并自动完成了 SSL 证书的申请和安装。
|
||||
|
||||
= 实验总结
|
||||
|
||||
== 心得感悟
|
||||
|
||||
本次实验是一次非常有意义的web开发初体验。
|
||||
|
||||
首先，通过复刻 Web 诞生之初的网页，我深刻体会到了互联网技术从简陋到繁荣的巨大变迁。几十行简单的 HTML 代码，却是如今万物互联世界的基石。
|
||||
|
||||
其次，在编写个人主页的过程中，我不仅巩固了 HTML5 和 CSS3 的语法，更重要的是学会了如何通过布局和配色来提升用户体验。看到自己设计的页面在不同设备上都能完美展示，这种“所见即所得”的反馈带给我很大的成就感。
|
||||
|
||||
最后，服务器部署环节让我走出了“本地开发”的舒适区。从购买域名到配置 Linux 服务器，再到看着浏览器地址栏那把代表安全的“小锁”（HTTPS）亮起，我理解了网站上线背后的技术链路。使用 Caddy 服务器极大地简化了配置流程，让我能更专注于内容本身。这次实验不仅不仅让我拥有了一个属于自己的互联网角落，也为后续深入学习计算机网络原理打下了坚实的基础。
|
||||
BIN
network/weblab/screenshot1.png
Normal file
BIN
network/weblab/screenshot1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
network/weblab/screenshot2.png
Normal file
BIN
network/weblab/screenshot2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
BIN
network/weblab/screenshot3.jpg
Normal file
BIN
network/weblab/screenshot3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
Reference in New Issue
Block a user