use local md file
This commit is contained in:
77
public/tutorial/2/README.md
Normal file
77
public/tutorial/2/README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# 盒模型（1）
|
||||
|
||||
> [!NOTE]
|
||||
> 这是测试的版本
|
||||
|
||||
## div 标签
|
||||
|
||||
HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块级元素，可以嵌套使用。div 标签不像 `h1` `p` 有默认的样式， div 标签没有自带样式，这点很好。比如：
|
||||
|
||||
```html
|
||||
<div>Web前端开发工程师</div>
|
||||
```
|
||||
|
||||
嵌套使用：
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div>Web前端开发工程师</div>
|
||||
<div>岗位要求</div>
|
||||
<div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
|
||||
<div>2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
|
||||
<div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
注意标签的闭合和层级，可以看到每个 div 标签都是占一行，这就是块级元素的意思。
|
||||
|
||||
## class 类名
|
||||
|
||||
我们在 HTML 标签上可以写 `class` 类名来命名每个标签，方便写 CSS，比如：
|
||||
|
||||
```html
|
||||
<div class="main">
|
||||
<div class="title">Web前端开发工程师</div>
|
||||
<div class="subtitle">岗位要求</div>
|
||||
<div class="item">1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
|
||||
<div class="item">2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
|
||||
<div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
最外层的 div 叫做 `main`，内层的分别是 `title` `subtitle` `item`
|
||||
|
||||
这样，我们就可以在 CSS 中指定 class 类名，写相应的样式，比如：
|
||||
|
||||
```css
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: bold; /* 字体加粗 */
|
||||
line-height: 64px;
|
||||
color: #000099;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 20px;
|
||||
text-indent: 2em;
|
||||
line-height: 40px;
|
||||
}
|
||||
```
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆
|
||||
|
||||
## 任务
|
||||
### HTML
|
||||
上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。
|
||||
|
||||
### CSS
|
||||
自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。
|
||||
|
||||
### 例子
|
||||
[初级网络工程师岗位要求](/tutorial/2/demo.html)
|
||||
93
public/tutorial/2/demo.html
Normal file
93
public/tutorial/2/demo.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>初级网络工程师岗位要求</title>
|
||||
<style>
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
margin: 20px;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="section">
|
||||
<div class="section-title">初级网络工程师岗位要求</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">1. 学历要求</div>
|
||||
<div class="content">
|
||||
通常要求计算机科学、信息技术、通信工程等相关专业的大专或本科学历。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">2. 技术技能</div>
|
||||
<div class="content">
|
||||
<div>熟悉OSI模型、TCP/IP协议、路由与交换等基础概念。</div>
|
||||
<div>能够配置和管理路由器、交换机、防火墙等网络设备。</div>
|
||||
<div>掌握常见网络协议，如HTTP/HTTPS、FTP、DNS、DHCP等。</div>
|
||||
<div>具备基本的网络故障诊断和解决能力。</div>
|
||||
<div>了解基础的网络安全知识，如防火墙配置、VPN、ACL等。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">3. 工具使用</div>
|
||||
<div class="content">
|
||||
<div>熟悉如Wireshark、Nagios、PRTG等工具。</div>
|
||||
<div>了解如Ansible、Puppet等自动化工具。</div>
|
||||
<div>熟悉Windows和Linux操作系统的基本操作。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">4. 软技能</div>
|
||||
<div class="content">
|
||||
<div>能够清晰表达技术问题并与团队有效沟通。</div>
|
||||
<div>具备快速学习新技术的能力。</div>
|
||||
<div>能够在团队中协作完成任务。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">5. 认证要求</div>
|
||||
<div class="content">持有CCNA、HCIA等初级网络认证者优先。</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">6. 工作经验</div>
|
||||
<div class="content">通常要求1-2年相关经验，优秀应届生也可考虑。</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">7. 其他要求</div>
|
||||
<div class="content">
|
||||
<div>具备较强的工作责任心和抗压能力。</div>
|
||||
<div>能够编写技术文档和报告。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">总结</div>
|
||||
<div class="content">
|
||||
初级网络工程师需具备扎实的网络基础知识、设备配置能力、故障排查技能及一定的网络安全知识，同时具备良好的沟通和学习能力，持有相关认证者更具竞争力。
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user