Skip to content

Commit d049e78

Browse files
humensmochumensmoc
committed
显示html语法测试
1 parent 1ef256c commit d049e78

File tree

3 files changed

+164
-4
lines changed

3 files changed

+164
-4
lines changed

‎blog/favicon-tutorial.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>网站图标设置教程 - humensmoc</title>
7+
<link rel="stylesheet" href="/css/main.css">
8+
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
9+
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
10+
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
11+
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
12+
<link rel="manifest" href="/images/favicon/site.webmanifest">
13+
<link rel="shortcut icon" href="/images/favicon/favicon.ico">
14+
<style>
15+
.tutorial-container {
16+
max-width: 800px;
17+
margin: 0 auto;
18+
padding: 40px 20px;
19+
line-height: 1.8;
20+
}
21+
.step-section {
22+
margin-bottom: 40px;
23+
padding: 20px;
24+
background: #f8f9fa;
25+
border-radius: 10px;
26+
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
27+
}
28+
.step-number {
29+
display: inline-block;
30+
width: 30px;
31+
height: 30px;
32+
background: #222;
33+
color: white;
34+
text-align: center;
35+
line-height: 30px;
36+
border-radius: 50%;
37+
margin-right: 10px;
38+
}
39+
.code-block {
40+
background: #f1f1f1;
41+
padding: 15px;
42+
border-radius: 5px;
43+
overflow-x: auto;
44+
font-family: monospace;
45+
margin: 15px 0;
46+
}
47+
.note-box {
48+
background: #fff3cd;
49+
border-left: 4px solid #ffc107;
50+
padding: 15px;
51+
margin: 20px 0;
52+
}
53+
</style>
54+
</head>
55+
<body>
56+
<div class="nav-buttons" style="padding: 20px;">
57+
<a href="/newblog.html" class="nav-button">
58+
<i class="fa fa-arrow-left"></i> 返回博客
59+
</a>
60+
<a href="/" class="nav-button">
61+
<i class="fa fa-home"></i> 返回主页
62+
</a>
63+
</div>
64+
65+
<div class="tutorial-container">
66+
<h1>如何设置网站图标（Favicon）</h1>
67+
68+
<div class="step-section">
69+
<h2><span class="step-number">1</span>准备图标文件</h2>
70+
<p>首先需要准备以下尺寸的图标文件：</p>
71+
<ul>
72+
<li>favicon.ico (16x16 或 32x32 像素)</li>
73+
<li>favicon-16x16.png (16x16 像素)</li>
74+
<li>favicon-32x32.png (32x32 像素)</li>
75+
<li>apple-touch-icon.png (180x180 像素，用于 iOS 设备)</li>
76+
<li>android-chrome-192x192.png (192x192 像素)</li>
77+
<li>android-chrome-512x512.png (512x512 像素)</li>
78+
</ul>
79+
80+
<div class="note-box">
81+
<strong>提示：</strong> 可以使用 <a href="https://realfavicongenerator.net/" target="_blank">Real Favicon Generator</a>
82+
在线工具生成所有需要的图标文件。只需上传一个高质量的原始图像（建议至少 512x512 像素），工具会自动生成所有所需尺寸。
83+
</div>
84+
</div>
85+
86+
<div class="step-section">
87+
<h2><span class="step-number">2</span>创建文件结构</h2>
88+
<p>将生成的图标文件放在网站的 <code>/images/favicon/</code> 目录下：</p>
89+
<pre class="code-block">
90+
/images/favicon/
91+
├── favicon.ico
92+
├── favicon-16x16.png
93+
├── favicon-32x32.png
94+
├── apple-touch-icon.png
95+
├── android-chrome-192x192.png
96+
├── android-chrome-512x512.png
97+
└── site.webmanifest</pre>
98+
</div>
99+
100+
<div class="step-section">
101+
<h2><span class="step-number">3</span>创建 Manifest 文件</h2>
102+
<p>在 <code>/images/favicon/</code> 目录下创建 <code>site.webmanifest</code> 文件：</p>
103+
<pre class="code-block">{
104+
"name": "网站名称",
105+
"short_name": "短名称",
106+
"icons": [
107+
{
108+
"src": "/images/favicon/android-chrome-192x192.png",
109+
"sizes": "192x192",
110+
"type": "image/png"
111+
},
112+
{
113+
"src": "/images/favicon/android-chrome-512x512.png",
114+
"sizes": "512x512",
115+
"type": "image/png"
116+
}
117+
],
118+
"theme_color": "#ffffff",
119+
"background_color": "#ffffff",
120+
"display": "standalone"
121+
}</pre>
122+
</div>
123+
124+
<div class="step-section">
125+
<h2><span class="step-number">4</span>添加 HTML 代码</h2>
126+
<p>在所有页面的 <code>&lt;head&gt;</code> 标签中添加以下代码：</p>
127+
<pre class="code-block">&lt;link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png"&gt;
128+
&lt;link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png"&gt;
129+
&lt;link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png"&gt;
130+
&lt;link rel="manifest" href="/images/favicon/site.webmanifest"&gt;
131+
&lt;link rel="shortcut icon" href="/images/favicon/favicon.ico"&gt;</pre>
132+
</div>
133+
134+
<div class="step-section">
135+
<h2>注意事项</h2>
136+
<ul>
137+
<li>确保所有图标文件的路径正确</li>
138+
<li>图标文件应该清晰可辨，即使在小尺寸下也能识别</li>
139+
<li>建议使用 PNG 格式以保持最佳质量</li>
140+
<li>记得在所有页面都添加相关代码</li>
141+
</ul>
142+
</div>
143+
</div>
144+
</body>
145+
</html>

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@
5050
<div class="home-container">
5151
<div class="profile-section">
5252
<img src="/images/avatar.jpg" alt="头像" class="profile-image">
53-
<h1>李泊凡</h1>
54-
<p>欢迎来到我的个人网站</p>
53+
<h1>&lt;h1&gt;humensmoc&lt;/h1&gt;</h1>
54+
<p>&lt;p&gt;test test&lt;/p&gt;</p>
5555
</div>
5656

5757
<div class="about-section">
58-
<h2>关于我</h2>
59-
<p>这里是一段个人简介...</p>
58+
<h2>&lt;h2&gt;个人简介&lt;/h2&gt;</h2>
59+
<p>&lt;p&gt;这里是一段个人简介...&lt;/p&gt;</p>
6060
<p>
6161
<i class="fa fa-envelope"></i> 邮箱：<a href="mailto:humensmoc@163.com">humensmoc@163.com</a><br>
6262
<i class="fa fa-gamepad"></i> Itch.io：<a href="https://humensmoc.itch.io" target="_blank">humensmoc.itch.io</a>

‎newblog.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,21 @@
7676
<div class="blog-container">
7777
<h1>博客文章</h1>
7878

79+
<div class="blog-post">
80+
<h2 class="post-title">网站图标（Favicon）设置教程</h2>
81+
<div class="post-meta">
82+
<i class="fa fa-calendar"></i> 2024-01-02
83+
<span class="tag"><i class="fa fa-tag"></i> 教程</span>
84+
<span class="tag"><i class="fa fa-code"></i> Web</span>
85+
</div>
86+
<div class="post-preview">
87+
详细介绍如何为网站设置自定义图标（Favicon），包括准备不同尺寸的图标文件、创建manifest文件、添加HTML代码等内容...
88+
</div>
89+
<a href="/blog/favicon-tutorial.html" class="read-more">
90+
阅读全文 <i class="fa fa-arrow-right"></i>
91+
</a>
92+
</div>
93+
7994
<div class="blog-post">
8095
<h2 class="post-title">Unity WebGL游戏上传教程</h2>
8196
<div class="post-meta">

0 commit comments

Comments
 (0)