ming

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

评论

昵称
邮箱
主页