个人主页的HTML结构解析
这是一个，结合了多种前端技术来提升用户体验。以下是对其HTML结构和使用的相关技术的详细解析。
1. 文档类型声明与基本设置
<!DOCTYPE html>
<html lang="en">- 文档类型声明：
<!DOCTYPE html>声明文档类型为HTML5。 - 语言属性：
lang="en"指定页面的主要语言为英语。
2. <head> 部分
a. 字符集与视口设置
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">- 字符集：
charset="utf-8"设置页面编码格式为UTF-8，支持各种语言的字符。 - 视口设置：
name="viewport"控制移动设备上的显示效果，确保页面在不同设备上都能正确缩放。
b. 页面标题与元信息
<title>个人主页</title>
<meta name="description" content="“这里是个人主页，程序语言不止于记录，更是艺术的呈现。”">
<meta name="keywords" content="“个人主页”">- 页面标题：
<title>标签定义网页的标题，出现在浏览器标签页上。 - 描述与关键词：
<meta name="description">和<meta name="keywords">提供关于网页内容的信息，有助于SEO优化。
c. 图标链接
<link rel="icon" type="/ico" href="https://vip.helloimg.com/i/2024/03/06/65e7ede67bd72.ico">- 网站图标：
<link rel="icon">指定网站图标，当用户收藏或分享页面时会显示。
d. 外部样式表链接
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googlefonts.cn/css?family=Capriola" rel="stylesheet">- Bootstrap框架：引入Bootstrap CSS文件以实现响应式布局。
- Font Awesome图标库：通过
all.min.css引入Font Awesome图标库。 - Animate动画库：引入animate.min.css用于添加CSS动画效果。
- 自定义样式表：
style.css文件包含了站点特有的样式规则。 - Google Fonts字体：从Google Fonts引入Capriola字体以增强文本表现力。
e. JavaScript脚本链接
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/player.js"></script>
<script src="js/dark.js"></script>
<script src="js/jquery.min.js"></script>- jQuery库：两次引用jQuery库（注意重复），用于简化DOM操作及事件处理。
- Bootstrap JS插件：依赖jQuery，提供丰富的JavaScript组件。
- 自定义脚本：
player.js可能用于媒体播放功能；dark.js实现深色模式切换；另一个jquery.min.js再次引入jQuery，这可能导致冲突或冗余。
f. 内联JavaScript代码
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>- 文档加载后执行：使用jQuery的
$(document).ready()函数，在DOM完全加载后自动显示.toast元素的内容，通常用于提示消息或通知。
3. 自定义CSS样式
<style>
body.dark-mode{
--dark-mode-text-color:rgb(245, 245, 245);
--dark-mode-body:#3d3d3d;
--dark-mode-toggle-translate:15px;
--dark-mode-body1:url(img/moon-solid.svg);
}
.mode-switch__circle{
height: 15px;
width: 15px;
border-radius: 100px;
background:var(--dark-mode-body1,url(img/sun-regular.svg));
transform: translateX(var(--dark-mode-toggle-translate,0));
transition: transfore 0.3s ease;
pointer-events: none;
transition: 0.4s;
}
</style>- CSS变量：利用CSS变量存储颜色值、背景图片路径等信息，便于维护和调整主题风格。
- 深色模式样式：定义了深色模式下的文字颜色、背景色以及开关按钮的位置变换。
- 模式切换圆点：设置了圆形按钮的基本样式及其过渡效果，用于视觉反馈。
总结
该个人主页通过合理的HTML结构组织页面内容，并借助Bootstrap、Font Awesome等流行前端框架丰富功能和设计。同时，通过内联CSS和JavaScript实现了动态交互效果，提升了用户体验。然而，需要注意的是，多次引入相同的jQuery库可能会导致潜在的问题，建议合并或移除冗余的脚本引用。
© 版权声明
THE END
暂无评论内容