一款个性化UI设计的个人主页HTML结构解析附源码-小辉娱乐网

个人主页的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">
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库可能会导致潜在的问题，建议合并或移除冗余的脚本引用。