个人技术展示网站：michalinadengusiak.github.io
简介：该网站属于个人所有，托管在GitHub Pages上，基于HTML构建，并可能使用CSS和JavaScript增强交互性和视觉样式。网站的设计和内容反映了所有者在GitHub仓库中的工作流程和开源参与精神。项目通过展示作者的简历、项目案例和个人品牌，为来访者提供了一个技术展示的平台。
1. GitHub Pages网站托管
1.1 利用GitHub Pages搭建个人网站
GitHub Pages 是一个免费的静态网站托管服务，允许用户直接使用 GitHub 仓库来发布个人或项目的网站。使用 GitHub Pages，用户无需担心服务器的配置和维护问题，所有这些都由 GitHub 自动完成。
要开始使用 GitHub Pages，用户需要有一个 GitHub 账户，然后创建一个新的仓库或选择一个已有的仓库，在仓库的设置中启用 GitHub Pages 选项。默认情况下，GitHub Pages 的域名形式为 username.github.io ，但用户也可以自定义域名。
接下来，用户需要将构建好的静态网站文件放入仓库中，然后提交并推送到 GitHub。GitHub Pages 会自动编译并发布这些文件到线上网站。这一过程非常简单，适合那些希望快速搭建个人或项目展示页面的开发者。
GitHub Pages 的设置通常只需要几个简单的步骤：
- 登录到 GitHub，创建一个新的仓库或打开已有的仓库。
- 点击仓库的 "Settings"。
- 滚动到 "GitHub Pages" 部分，选择一个源分支，例如
main或master。 - 保存更改，GitHub 会处理剩下的事情，并提供一个链接让你预览你的网站。
你可以通过添加自定义域名来个性化你的网站，例如： *** 。只需在仓库的设置页面进行设置，并确保域名DNS设置正确，GitHub 就会自动识别并使用新的域名。
安全性方面，GitHub Pages 通过 HTTPS 提供服务，并且所有的网站内容都是静态的，这在一定程度上增加了安全性。尽管如此，用户还是需要确保他们的网站不包含恶意代码，并遵循最佳实践来保护用户数据。
性能方面，由于 GitHub Pages 是由全球分布的 CDN（内容分发网络）提供的，因此网站的加载速度相对较好。不过，对于大型应用，可能需要考虑进一步优化图片、代码压缩等来提升性能。
2. HTML基础网页构建
2.1 HTML文档结构与语义化标签
2.1.1 HTML5文档类型声明
在学习如何构建一个基础的网页之前，我们首先要了解HTML5文档类型声明（Doctype）。这行声明是告诉浏览器我们正在使用哪种版本的HTML，以确保浏览器能够以标准模式渲染页面。对于HTML5，Doctype声明非常简单：
<!DOCTYPE html>
这是所有HTML文档的开始，它位于第一行，并且不区分大小写。当你在文档的根元素中包含此声明时，浏览器将按照最新的HTML标准渲染页面，而不是使用诸如怪异模式（quirks mode）这样的旧版渲染方式。
2.1.2 HTML5的语义化标签及其用途
随着HTML的发展，标签的语义化变得越来越重要。HTML5引入了新的语义化标签，例如 <header> , <footer> , <article> , <section> , 和 <aside> 等，它们为网页的结构提供了更加清晰的含义。
例如， <header> 标签通常用作页面或页面中某部分的头部区域，包含诸如标题、导航、搜索表单等元素。相对应地， <footer> 标签则用于页面的底部，包含版权信息、相关链接等。
语义化标签的使用有助于搜索引擎优化（SEO），使得网页内容的结构更加合理，更容易被搜索引擎理解。同时，它们也有助于提高页面的可访问性和可维护性。语义化标签还有助于使用辅助技术的用户更好地浏览网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML5 Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Blah blah...</p>
</section>
<article>
<h2>My Latest Blog Post</h2>
<p>Content of my latest post...</p>
</article>
<aside>
<h3>Sidebar Title</h3>
<p>Side content...</p>
</aside>
</main>
<footer>
<p>Copyright 2023 My Name</p>
</footer>
</body>
</html>
在上面的示例中，我们可以看到 <header> , <nav> , <main> , <section> , <article> , <aside> , 和 <footer> 等标签被用来构建一个结构良好的网页。
在实际开发中，合理使用HTML5语义化标签，能够让你的页面不仅更易于理解，还能提升可访问性。例如，屏幕阅读器等辅助设备可以利用这些标签更好地解析页面结构，提供给用户更清晰的信息。此外，搜索引擎也会利用这些标签来理解页面内容，对提升SEO排名有一定的帮助。
3. CSS视觉样式设计
3.1 CSS选择器与盒模型
3.1.1 基础选择器和伪类
在开始设计视觉样式之前，理解CSS选择器和伪类至关重要，因为它们帮助我们精确地定位页面元素并应用样式。基础选择器包括元素、类、ID和通配符选择器。元素选择器直接指向HTML中的元素标签，例如 p 选择器将应用于所有 <p> 元素。类选择器（例如 .class ）和ID选择器（例如 #id ）允许我们基于自定义类名和ID应用样式，而通配符选择器（ * ）会选择页面中的所有元素。
伪类则是用来添加特殊效果的关键词，它们表示元素的特定状态，比如 :hover 、 :visited 、 :active 和 :focus 。例如， a:hover 选择器将在鼠标悬停在链接上时改变样式。
3.1.2 盒模型的概念及其在布局中的应用
CSS的盒模型是布局网页时不可或缺的概念。每个元素被看作一个盒子，由内容、内边距（padding）、边框（border）和外边距（margin）组成。理解这一概念对控制布局尺寸和定位至关重要。
对于布局设计， box-sizing 属性非常重要。默认情况下，CSS的 box-sizing 属性值为 content-box ，这意味着 width 和 height 仅适用于内容区域。若设置为 border-box ，则 width 和 height 会包含内容、内边距和边框，而不包含外边距。这是一个非常有用的属性，当需要精确控制元素尺寸时尤其重要。
/* 设置box-sizing为border-box */
* {
box-sizing: border-box;
}
这段代码会让所有元素采用 border-box 模型，简化了布局的复杂度。
3.1.3 使用选择器和盒模型构造布局
使用选择器和盒模型可以创建一个简单的响应式布局，如下面的示例所示。首先，我们将使用类选择器为不同的布局元素定义样式。然后，我们会利用 box-sizing 属性简化宽度和高度的计算。
/* 定义基本布局的样式 */
.container {
max-width: 1200px;
margin: 0 auto;
}
.header, .footer {
background: #333;
color: white;
padding: 10px 0;
}
.sidebar {
float: left;
width: 25%;
padding: 20px;
}
.content {
float: left;
width: 75%;
padding: 20px;
}
在上述CSS中， .container 类用于包含所有内容，并通过设置 max-width 保证了响应式设计。 .header 和 .footer 类定义了页头和页脚的样式， .sidebar 和 .content 类则分别定义了侧边栏和内容区域的宽度和内边距。
通过上述CSS代码，我们已经简单构建了一个包含头部、侧边栏和内容区域的布局，并确保了在不同屏幕尺寸下的基本响应式特性。接下来，我们会继续探索响应式网页布局的实现。
3.2 创造响应式网页布局
3.2.1 媒体查询和布局响应化
响应式设计的目的是使网站能够适应不同尺寸的屏幕和设备。CSS媒体查询允许我们根据不同的屏幕尺寸应用不同的样式规则。利用媒体查询，我们可以确保在桌面、平板和手机等不同设备上都有良好的显示效果。
/* 在屏幕宽度小于768px时应用的样式 */
@media (max-width: 768px) {
.container {
width: 90%;
}
.sidebar {
float: none;
width: 100%;
}
.content {
float: none;
width: 100%;
}
}
以上代码片段展示了如何在屏幕宽度小于768像素时，调整布局使侧边栏和内容区域堆叠而不是并排显示。这是响应式设计的基本技术之一。
3.2.2 使用Flexbox和Grid进行复杂布局
为了构建更复杂的布局，我们通常会使用CSS的Flexbox和Grid布局。Flexbox提供了更灵活的方式来对齐和分配容器内项目的空间，即使它们的大小未知或是动态改变的。Grid布局则提供了一种定义网格系统的方法，使得我们能够创建复杂的布局结构。
/* 使用Flexbox对齐页面内容 */
.container {
display: flex;
flex-direction: column;
}
.header, .footer {
flex: 0 0 auto; /* 不允许头部和底部伸缩 */
}
.content {
flex: 1; /* 内容区域将占据所有剩余空间 */
}
在这个例子中，我们利用Flexbox将 .container 设置为一个弹性容器，并且内容区域 .content 会自动填充剩余空间，而头部和底部不会伸缩。
为了更复杂布局，我们使用CSS Grid布局：
/* 使用Grid布局定义模板区域 */
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 25% 75%;
grid-template-rows: auto 1fr auto;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
上述代码定义了一个带有三列和三行的网格布局，以及各区域在网格中的位置。 grid-template-areas 属性为每个区域提供了名称，而 grid-template-columns 和 grid-template-rows 则分别设置了列宽和行高。Grid布局使得复杂布局的实现变得非常简单。
3.2.3 响应式设计实例
现在我们已经介绍了响应式布局的基本理论，让我们通过一个实际例子来加深理解。假设我们要为一家杂志网站设计响应式首页。首页布局包含一个导航栏、侧边栏、主要内容区和页脚。
<div class="container">
<header class="header">
<!-- 导航栏 -->
</header>
<nav class="sidebar">
<!-- 侧边栏 -->
</nav>
<main class="content">
<!-- 主要内容区域 -->
</main>
<footer class="footer">
<!-- 页脚 -->
</footer>
</div>
我们首先为每个部分设定基础的HTML结构。接着，使用CSS媒体查询进行样式设置，以确保网站在不同设备上的适应性。通过调整网格布局和弹性盒模型的属性值，我们可以实现在不同屏幕尺寸下内容的灵活显示。
/* 调整媒体查询的样式 */
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
}
}
当屏幕宽度小于768像素时，我们使每个部分独占一行，从而保证内容在较小屏幕上仍然可读和易用。
通过上述布局方法和实例，我们能够使用CSS创造适应不同设备的响应式网页布局。然而，响应式设计并非只关乎布局，视觉效果同样重要。接下来，我们将探索如何使用CSS动画和图形效果提升网页的视觉体验。
3.3 CSS动画与视觉效果
3.3.1 关键帧动画和过渡效果
CSS动画能为网页添加动态效果，提升用户体验。关键帧动画（ @keyframes ）是定义动画序列的一种方法，而过渡效果（ transition ）则用于创建简单的动画，通常用于在元素状态改变时触发平滑的视觉变化。
让我们看一个简单的过渡效果实例：
/* 简单的过渡效果 */
.button {
background: blue;
color: white;
padding: 10px 20px;
transition: background 0.5s;
}
.button:hover {
background: darkblue;
}
在这个例子中，当鼠标悬停在按钮上时，背景颜色将从蓝色过渡到深蓝色，过渡时间为0.5秒。
关键帧动画则允许我们创建更复杂的动画序列：
/* 关键帧动画 */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in-element {
animation-name: fadeIn;
animation-duration: 2s;
}
@keyframes 定义了一个名为 fadeIn 的动画序列，它在0%时透明度为0（完全透明），在100%时透明度为1（完全不透明）。 .fade-in-element 类将应用这个动画，动画持续2秒钟。
3.3.2 使用SVG和Canvas创造图形效果
SVG和Canvas是Web上用于创建图形效果的两种主要技术。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，适合于图标和复杂图形的渲染。Canvas则是一个基于像素的绘图API，适用于动画和游戏等实时渲染。
SVG在创建图标和徽标时尤其有用，因为它可以很容易地被缩放而不会失去清晰度。
<svg width="100" height="100" xmlns="***">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
以上SVG代码定义了一个红色填充、黑色边框的圆形。
Canvas则允许我们在网页上绘制2D图形。下面是一个简单的Canvas动画示例：
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 100;
var velocity = 1;
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2, false);
ctx.fillStyle = 'blue';
ctx.fill();
x += velocity;
if(x > canvas.width || x < 0) {
velocity = -velocity;
}
requestAnimationFrame(update);
}
update();
</script>
这个示例创建了一个简单的动画，一个蓝色的圆形在Canvas内来回移动。
总结而言，第三章介绍了CSS在视觉样式设计中的关键概念。我们从基础选择器和盒模型出发，逐步深入到响应式网页布局的实现，再到动画和图形效果的创造。每一部分都是构建现代Web界面不可或缺的组成部分。随着前端技术的发展，CSS将继续扩展其能力，让网页设计师能够创造出更加丰富和动态的用户界面。
4. JavaScript交互功能实现
4.1 JavaScript基础语法和数据类型
4.1.1 JavaScript核心概念：变量、函数和对象
JavaScript 是一种脚本语言，它使得网页变得生动起来。变量是存储信息的基本单元，函数可以看作是一个定义好的动作或计算过程，而对象则是由属性和方法组成的复杂结构。
变量的声明和使用
// 声明一个变量并赋值
let greeting = "Hello, JavaScript!";
// 使用变量输出信息到控制台
console.log(greeting);
在上述代码中， let 是 ES6 新引入的一个关键字，用来声明变量。它与 var 相比，有块级作用域的特性，更不容易出现变量提升的问题。我们声明了一个变量 greeting 并赋予了一个字符串值 "Hello, JavaScript!" 。接着使用 console.log() 方法将这个变量的值输出到控制台。
函数的创建和调用
// 创建一个函数用于打印欢迎信息
function printGreeting() {
let greeting = "Welcome to the world of JavaScript!";
console.log(greeting);
}
// 调用函数
printGreeting();
这段代码定义了一个名为 printGreeting 的函数。函数内部有一个局部变量 greeting ，它只在函数内部有效。调用函数 printGreeting() 就会执行函数体内的代码。
对象的创建和属性访问
// 创建一个对象
const person = {
firstName: "John",
lastName: "Doe",
greet: function() {
return "Hello, " + this.firstName + " " + this.lastName;
}
};
// 访问对象的属性和方法
console.log(person.greet()); // 输出: Hello, John Doe
这里用字面量的方式创建了一个 person 对象，并赋予了 firstName 和 lastName 属性，还有一个 greet 方法用于返回一个人的完整名字。通过 . 操作符可以访问对象的属性和方法。
逻辑分析和参数说明
-
let关键字用于声明一个变量，具有块级作用域，只在声明它的代码块内有效。 -
console.log()是一个常用的调试工具，用于在控制台输出信息。 - 函数在 JavaScript 中是一种特殊的值，可以被赋值给变量，传递给其他函数，或者作为其他函数的返回值。
- 对象在 JavaScript 中是一种复合数据类型，可以存储多个键值对，每个键称为属性，每个值可以是基本类型，也可以是函数（方法）。
- 通过
this关键字，函数内部可以访问它所属对象的其他属性和方法。在greet函数中，this.firstName和this.lastName表示访问person对象的firstName和lastName属性。
4.1.2 数组和字符串的操作方法
数组和字符串是编程中常用的数据结构和类型，JavaScript 提供了丰富的 API 来操作它们，从而在实现功能时可以更加方便。
数组的创建和常用操作
// 创建并初始化一个数组
const fruits = ["Apple", "Banana", "Cherry"];
// 使用数组方法
fruits.push("Date"); // 添加一个元素到数组末尾
fruits.unshift("Apricot"); // 添加一个元素到数组开头
fruits.pop(); // 移除数组最后一个元素
fruits.shift(); // 移除数组第一个元素
console.log(fruits); // 输出当前数组的元素
// 遍历数组
fruits.forEach(function(fruit) {
console.log(fruit);
});
-
push()方法用于在数组末尾添加一个或多个元素，并返回新的数组长度。 -
unshift()方法用于在数组开头添加一个或多个元素，并返回新的数组长度。 -
pop()方法用于移除数组的最后一个元素，并返回该元素。 -
shift()方法用于移除数组的第一个元素，并返回该元素。 -
forEach()方法用于数组每个元素执行一次提供的函数。
字符串的操作方法
// 创建一个字符串
const str = "JavaScript";
// 字符串操作
let newStr = str.concat(" rocks"); // 连接字符串
newStr = newStr.toUpperCase(); // 转换成大写
newStr = newStr.toLowerCase(); // 转换成小写
console.log(newStr); // 输出: JAVASCRIPT ROCKS
// 查找字符在字符串中的位置
let pos = str.indexOf("a");
console.log(pos); // 输出: 1
-
concat()方法用于连接两个或多个字符串。 -
toUpperCase()方法用于将字符串转换为大写。 -
toLowerCase()方法用于将字符串转换为小写。 -
indexOf()方法返回指定值在调用该方法的字符串中首次出现的位置，如果未找到该值，则返回-1。
逻辑分析和参数说明
- 数组方法
push()和unshift()、pop()和shift()用于数组的增删操作。它们提供了一种灵活的方式来动态调整数组的大小。 -
forEach()方法为数组提供了遍历功能，它接受一个函数作为参数，数组中的每个元素都会执行一次该函数。 - 字符串是不可变的，所以大多数字符串操作方法（如
concat()、toUpperCase()、toLowerCase()）不会修改原始字符串，而是返回一个新的字符串。 -
indexOf()方法在搜索不到指定值时返回-1，这一点对于检查元素是否存在于字符串中非常有用。
通过这些基础概念，我们已经能完成对简单数据结构的操作。接下来我们将进入动态网页内容和事件处理的深入学习。
5. 个人品牌与技能展示
构建个人品牌是当今职业发展中不可或缺的一部分，而个人技能的展示则是强化这一品牌的关键。本章将探讨如何通过个人网站、社交媒体以及其他网络工具来建立和优化个人品牌和技能展示。
5.1 构建个人品牌的重要性
个人品牌并不仅仅是名字和面孔，它是他人对你的技能、成就和个性的感知。
5.1.1 在线品牌与社交媒体策略
在构建在线品牌时，社交媒体平台起到了至关重要的作用。社交媒体策略包括定期发布与个人专业领域相关的高质量内容，参与行业讨论，以及建立行业内的联系。
- 内容创作 ：通过博客、视频、播客等形式，分享行业见解和专业技能。
- 社区互动 ：在LinkedIn、Twitter等平台上参与行业话题讨论，回复评论，进行互动。
- 建立网络 ：关注行业内的影响者，与同行建立连接，共同推进个人品牌的发展。
5.1.2 个人网站在品牌建设中的角色
个人网站是品牌建设的中心舞台。它应反映出个人的专业形象，并且包含详细的工作经历、项目案例和联系方式。
- 个性化设计 ：网站应具有清晰的设计风格，反映出个人的审美和专业性。
- 内容更新 ：定期更新个人博客，发布与专业相关的文章，展示最新项目。
- 在线简历 ：个人网站应充当在线简历，清晰展示个人技能和工作经历。
5.2 展示个人技能的创意方法
创意地展示个人技能可以增强个人品牌的吸引力，并在潜在雇主或客户中留下深刻印象。
5.2.1 创作在线作品集和博客
展示个人技能最直接的方式是通过在线作品集和博客。作品集可以是代码项目、设计作品或是任何可以体现你技能和创造力的实例。
- 代码作品集 ：利用GitHub Pages将GitHub仓库作为作品集展示，方便展示代码质量和版本管理能力。
- 博客文章 ：通过博客分享技术心得、案例研究，甚至是对最新技术趋势的评论。
5.2.2 结合GitHub进行技术展示
GitHub为技术专业人士提供了一个展示技术实力和协作能力的平台。
- 仓库管理 ：确保GitHub仓库中的代码组织有序，使用恰当的分支策略。
- 文档编写 ：为项目编写清晰的README文档，包括安装指南、使用说明和API文档。
- 贡献展示 ：展示对其他项目做出的贡献，或是在开源社区中的活跃度。
5.3 优化个人网站的用户体验
用户体验是网站成功的关键因素之一。一个良好的用户体验可以增加访问者在网站上的停留时间，并鼓励他们参与和分享。
5.3.1 用户研究和用户界面设计
深入了解目标用户群体是优化用户体验的第一步。通过用户研究可以发现用户的偏好、需求以及行为模式。
- 用户画像 ：创建用户画像，了解用户背景、兴趣和需求。
- A/B测试 ：对网站的元素进行A/B测试，比如按钮的颜色、大小或布局，以找出最佳设计方案。
5.3.2 利用工具和分析提高参与度
网站分析工具能够提供用户参与度的数据，如页面访问量、停留时间以及跳出率。
- Google Analytics ：使用Google Analytics监控网站流量和用户行为。
- 用户反馈 ：鼓励用户提供反馈，通过调查问卷或直接的用户访谈了解用户的感受和建议。
- 转化优化 ：设定明确的网站目标（如订阅、下载或联系），并优化用户路径以提高转化率。
以上策略和工具的合理运用，不仅能增强个人品牌的可信度，也能有效地展示个人技能，从而在职业发展道路上获得竞争优势。
简介：该网站属于个人所有，托管在GitHub Pages上，基于HTML构建，并可能使用CSS和JavaScript增强交互性和视觉样式。网站的设计和内容反映了所有者在GitHub仓库中的工作流程和开源参与精神。项目通过展示作者的简历、项目案例和个人品牌，为来访者提供了一个技术展示的平台。
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
21
0- 0
已为社区贡献35条内容
所有评论(0)