个人网站是展示个人技能、作品和经历的最佳平台。一个好的个人网站不仅能展示你的专业能力,还能帮助你在求职和职业发展中脱颖而出。
东巴文(db-w.cn) 认为:个人网站是你的数字名片,它应该真实反映你的个性和专业能力。不要追求花哨,而要注重实用性和用户体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目规划 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.goal-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.goal-card h3 {
margin-bottom: 10px;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>项目规划</h1>
<h2>项目目标</h2>
<div class="goal-card">
<h3>🎯 核心目标</h3>
<ul>
<li>展示个人技能和专业能力</li>
<li>展示项目作品和案例</li>
<li>提供联系方式和社交链接</li>
<li>建立个人品牌形象</li>
</ul>
</div>
<div class="goal-card">
<h3>🎯 次要目标</h3>
<ul>
<li>提高在搜索引擎中的可见度</li>
<li>吸引潜在雇主或客户</li>
<li>分享知识和经验</li>
<li>建立专业网络</li>
</ul>
</div>
<h2>目标受众</h2>
<table class="info-table">
<thead>
<tr>
<th>受众类型</th>
<th>关注点</th>
<th>设计考虑</th>
</tr>
</thead>
<tbody>
<tr>
<td>招聘人员</td>
<td>技能、经验、作品</td>
<td>清晰的技能展示、作品集</td>
</tr>
<tr>
<td>潜在客户</td>
<td>服务能力、案例、价格</td>
<td>服务介绍、案例展示、联系方式</td>
</tr>
<tr>
<td>同行开发者</td>
<td>技术分享、开源项目</td>
<td>技术博客、GitHub链接</td>
</tr>
<tr>
<td>一般访客</td>
<td>个人信息、兴趣爱好</td>
<td>个人介绍、趣味内容</td>
</tr>
</tbody>
</table>
<h2>项目范围</h2>
<ul>
<li><strong>页面数量:</strong> 4-6个主要页面</li>
<li><strong>开发周期:</strong> 2-4周</li>
<li><strong>技术栈:</strong> HTML5 + CSS3 + JavaScript</li>
<li><strong>响应式:</strong> 支持桌面、平板、手机</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>项目规划要切合实际,不要一开始就追求完美。可以先搭建基础框架,然后逐步迭代优化。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>需求分析 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.page-list {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.page-list h3 {
color: #667eea;
margin-bottom: 10px;
}
.feature-item {
background: white;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #667eea;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>需求分析</h1>
<h2>页面需求</h2>
<div class="page-list">
<h3>📄 首页(Home)</h3>
<div class="feature-item">
<strong>功能:</strong>
<ul>
<li>个人介绍和头像</li>
<li>简短的自我描述</li>
<li>核心技能展示</li>
<li>最新作品预览</li>
<li>社交链接</li>
</ul>
</div>
</div>
<div class="page-list">
<h3>📄 关于我(About)</h3>
<div class="feature-item">
<strong>功能:</strong>
<ul>
<li>详细的个人介绍</li>
<li>教育背景</li>
<li>工作经历</li>
<li>技能列表</li>
<li>兴趣爱好</li>
</ul>
</div>
</div>
<div class="page-list">
<h3>📄 作品集(Portfolio)</h3>
<div class="feature-item">
<strong>功能:</strong>
<ul>
<li>项目展示网格</li>
<li>项目详情弹窗</li>
<li>项目分类筛选</li>
<li>技术栈标签</li>
<li>项目链接</li>
</ul>
</div>
</div>
<div class="page-list">
<h3>📄 博客(Blog)</h3>
<div class="feature-item">
<strong>功能:</strong>
<ul>
<li>文章列表</li>
<li>文章分类</li>
<li>搜索功能</li>
<li>文章详情页</li>
<li>评论系统(可选)</li>
</ul>
</div>
</div>
<div class="page-list">
<h3>📄 联系我(Contact)</h3>
<div class="feature-item">
<strong>功能:</strong>
<ul>
<li>联系表单</li>
<li>社交链接</li>
<li>邮箱地址</li>
<li>地图位置(可选)</li>
</ul>
</div>
</div>
<h2>功能需求</h2>
<table class="info-table">
<thead>
<tr>
<th>功能模块</th>
<th>优先级</th>
<th>复杂度</th>
</tr>
</thead>
<tbody>
<tr>
<td>响应式导航</td>
<td>高</td>
<td>中</td>
</tr>
<tr>
<td>作品集展示</td>
<td>高</td>
<td>中</td>
</tr>
<tr>
<td>联系表单</td>
<td>高</td>
<td>低</td>
</tr>
<tr>
<td>技能展示</td>
<td>中</td>
<td>低</td>
</tr>
<tr>
<td>博客系统</td>
<td>中</td>
<td>高</td>
</tr>
<tr>
<td>搜索功能</td>
<td>低</td>
<td>中</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>需求分析要区分"必须有"和"最好有"的功能。优先实现核心功能,其他功能可以后续迭代。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面结构设计 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.structure-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.structure-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>页面结构设计</h1>
<h2>HTML结构规划</h2>
<div class="structure-demo">
<h3>基础HTML结构</h3>
<div class="code-block">
<pre>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="个人网站描述">
<meta name="keywords" content="关键词">
<title>个人网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<div class="logo">Logo</div>
<ul class="nav-menu">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#blog">博客</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<!-- 主要内容 -->
<main>
<!-- 首页区域 -->
<section id="home">
<!-- 内容 -->
</section>
<!-- 关于我区域 -->
<section id="about">
<!-- 内容 -->
</section>
<!-- 作品集区域 -->
<section id="portfolio">
<!-- 内容 -->
</section>
<!-- 博客区域 -->
<section id="blog">
<!-- 内容 -->
</section>
<!-- 联系我区域 -->
<section id="contact">
<!-- 内容 -->
</section>
</main>
<!-- 页脚 -->
<footer>
<p>&copy; 2024 个人网站</p>
</footer>
<script src="script.js"></script>
</body>
</html>
</pre>
</div>
</div>
<h2>语义化标签使用</h2>
<ul>
<li><strong><header>:</strong> 页面头部,包含导航</li>
<li><strong><nav>:</strong> 导航菜单</li>
<li><strong><main>:</strong> 主要内容区域</li>
<li><strong><section>:</strong> 独立的内容区块</li>
<li><strong><article>:</strong> 独立的文章内容</li>
<li><strong><aside>:</strong> 侧边栏内容</li>
<li><strong><footer>:</strong> 页面底部</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>使用语义化标签不仅有利于SEO,还能提高代码可读性和可访问性。合理使用HTML5标签是现代Web开发的基本要求。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式实现 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.style-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.style-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
.color-palette {
display: flex;
gap: 10px;
margin: 20px 0;
}
.color-box {
width: 80px;
height: 80px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>样式实现</h1>
<h2>配色方案</h2>
<div class="color-palette">
<div class="color-box" style="background: #667eea;">
主色<br>#667eea
</div>
<div class="color-box" style="background: #764ba2;">
辅色<br>#764ba2
</div>
<div class="color-box" style="background: #2d2d2d;">
文字<br>#2d2d2d
</div>
<div class="color-box" style="background: #f8f9fa; color: #2d2d2d;">
背景<br>#f8f9fa
</div>
</div>
<h2>CSS样式示例</h2>
<div class="style-demo">
<h3>导航栏样式</h3>
<div class="code-block">
<pre>
/* 导航栏样式 */
header {
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #667eea;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-menu a {
text-decoration: none;
color: #2d2d2d;
transition: color 0.3s;
}
.nav-menu a:hover {
color: #667eea;
}
</pre>
</div>
</div>
<div class="style-demo">
<h3>按钮样式</h3>
<div class="code-block">
<pre>
/* 按钮样式 */
.btn {
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
}
.btn-secondary:hover {
background: #667eea;
color: white;
}
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>配色方案要简洁统一,不要使用过多颜色。建议使用2-3种主色调,通过明暗变化创造层次感。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互功能 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.interaction-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.interaction-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>交互功能</h1>
<h2>平滑滚动</h2>
<div class="interaction-demo">
<h3>实现平滑滚动导航</h3>
<div class="code-block">
<pre>
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</pre>
</div>
</div>
<h2>移动端菜单</h2>
<div class="interaction-demo">
<h3>汉堡菜单实现</h3>
<div class="code-block">
<pre>
// 移动端菜单切换
const menuToggle = document.querySelector('.menu-toggle');
const navMenu = document.querySelector('.nav-menu');
menuToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
// 点击菜单项后关闭菜单
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
});
});
</pre>
</div>
</div>
<h2>作品集筛选</h2>
<div class="interaction-demo">
<h3>项目分类筛选</h3>
<div class="code-block">
<pre>
// 作品集筛选功能
const filterButtons = document.querySelectorAll('.filter-btn');
const projects = document.querySelectorAll('.project-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// 移除所有按钮的active类
filterButtons.forEach(btn => btn.classList.remove('active'));
// 给当前按钮添加active类
button.classList.add('active');
const filter = button.getAttribute('data-filter');
projects.forEach(project => {
if (filter === 'all' || project.getAttribute('data-category') === filter) {
project.style.display = 'block';
project.classList.add('fade-in');
} else {
project.style.display = 'none';
}
});
});
});
</pre>
</div>
</div>
<h2>表单验证</h2>
<div class="interaction-demo">
<h3>联系表单验证</h3>
<div class="code-block">
<pre>
// 表单验证
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = this.querySelector('input[name="name"]').value;
const email = this.querySelector('input[name="email"]').value;
const message = this.querySelector('textarea[name="message"]').value;
// 验证姓名
if (name.trim() === '') {
showError('请输入姓名');
return;
}
// 验证邮箱
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showError('请输入有效的邮箱地址');
return;
}
// 验证消息
if (message.trim() === '') {
showError('请输入消息内容');
return;
}
// 提交表单
submitForm(name, email, message);
});
function showError(message) {
alert(message);
}
function submitForm(name, email, message) {
// 这里可以发送AJAX请求
console.log('提交表单:', { name, email, message });
alert('消息已发送!');
}
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>交互功能要适度,不要过度使用动画和特效。好的交互应该是自然的、不引人注意的,让用户专注于内容本身。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式适配 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.responsive-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.responsive-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>响应式适配</h1>
<h2>断点设计</h2>
<table class="info-table">
<thead>
<tr>
<th>设备类型</th>
<th>屏幕宽度</th>
<th>布局调整</th>
</tr>
</thead>
<tbody>
<tr>
<td>桌面</td>
<td>> 1024px</td>
<td>多列布局,完整导航</td>
</tr>
<tr>
<td>平板</td>
<td>768px - 1024px</td>
<td>两列布局,简化导航</td>
</tr>
<tr>
<td>手机</td>
<td>< 768px</td>
<td>单列布局,汉堡菜单</td>
</tr>
</tbody>
</table>
<h2>媒体查询示例</h2>
<div class="responsive-demo">
<h3>响应式导航</h3>
<div class="code-block">
<pre>
/* 桌面端样式 */
.nav-menu {
display: flex;
gap: 2rem;
}
.menu-toggle {
display: none;
}
/* 平板端样式 */
@media (max-width: 1024px) {
.nav-menu {
gap: 1rem;
}
}
/* 手机端样式 */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 1rem;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.nav-menu.active {
display: flex;
}
}
</pre>
</div>
</div>
<div class="responsive-demo">
<h3>响应式网格</h3>
<div class="code-block">
<pre>
/* 作品集网格布局 */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* 平板端 */
@media (max-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 手机端 */
@media (max-width: 768px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
}
</pre>
</div>
</div>
<h2>响应式图片</h2>
<div class="code-block">
<pre>
/* 响应式图片 */
img {
max-width: 100%;
height: auto;
display: block;
}
/* 使用picture元素 */
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>
</pre>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>移动优先设计是现代Web开发的最佳实践。先设计移动端样式,然后逐步增强到桌面端,这样可以确保所有设备都有良好的体验。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>性能优化 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.optimization-card {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
}
.optimization-card h3 {
color: #155724;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>性能优化</h1>
<h2>优化策略</h2>
<div class="optimization-card">
<h3>1. 资源压缩</h3>
<ul>
<li>压缩CSS和JavaScript文件</li>
<li>优化图片大小和格式</li>
<li>使用WebP格式图片</li>
<li>启用Gzip压缩</li>
</ul>
</div>
<div class="optimization-card">
<h3>2. 懒加载</h3>
<div class="code-block">
<pre>
// 图片懒加载
<img src="placeholder.jpg" data-src="actual-image.jpg" alt="懒加载图片">
// JavaScript实现
const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
</pre>
</div>
</div>
<div class="optimization-card">
<h3>3. 资源预加载</h3>
<div class="code-block">
<pre>
<!-- 预加载关键资源 -->
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="hero-image.jpg" as="image">
<!-- 预连接外部域名 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
</pre>
</div>
</div>
<div class="optimization-card">
<h3>4. 缓存策略</h3>
<ul>
<li>设置适当的缓存头</li>
<li>使用版本号或哈希管理缓存</li>
<li>利用浏览器缓存</li>
<li>考虑使用Service Worker</li>
</ul>
</div>
<h2>性能指标</h2>
<ul>
<li><strong>FCP(First Contentful Paint):</strong> 首次内容绘制 < 1.8s</li>
<li><strong>LCP(Largest Contentful Paint):</strong> 最大内容绘制 < 2.5s</li>
<li><strong>FID(First Input Delay):</strong> 首次输入延迟 < 100ms</li>
<li><strong>CLS(Cumulative Layout Shift):</strong> 累积布局偏移 < 0.1</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>性能优化是一个持续的过程。使用Lighthouse、PageSpeed Insights等工具定期检测网站性能,并根据报告进行优化。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO优化 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.seo-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.seo-card h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>SEO优化</h1>
<h2>元标签优化</h2>
<div class="seo-card">
<h3>基础元标签</h3>
<div class="code-block">
<pre>
<head>
<!-- 标题标签 -->
<title>张三 - 前端开发者 | 个人网站</title>
<!-- 描述标签 -->
<meta name="description" content="张三的个人网站,专注于前端开发和用户体验设计。查看我的项目作品和技术博客。">
<!-- 关键词标签 -->
<meta name="keywords" content="前端开发,Web开发,JavaScript,HTML,CSS,个人网站">
<!-- 作者标签 -->
<meta name="author" content="张三">
<!-- robots标签 -->
<meta name="robots" content="index, follow">
</head>
</pre>
</div>
</div>
<div class="seo-card">
<h3>Open Graph标签</h3>
<div class="code-block">
<pre>
<!-- Open Graph标签 -->
<meta property="og:title" content="张三 - 前端开发者">
<meta property="og:description" content="专注于前端开发和用户体验设计">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">
</pre>
</div>
</div>
<h2>结构化数据</h2>
<div class="seo-card">
<h3>JSON-LD结构化数据</h3>
<div class="code-block">
<pre>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "张三",
"url": "https://example.com",
"image": "https://example.com/photo.jpg",
"jobTitle": "前端开发者",
"worksFor": {
"@type": "Organization",
"name": "某科技公司"
},
"sameAs": [
"https://github.com/zhangsan",
"https://linkedin.com/in/zhangsan",
"https://twitter.com/zhangsan"
]
}
</script>
</pre>
</div>
</div>
<h2>SEO最佳实践</h2>
<ul>
<li>使用语义化HTML标签</li>
<li>优化页面标题和描述</li>
<li>使用合适的标题层级(h1-h6)</li>
<li>为图片添加alt属性</li>
<li>创建sitemap.xml文件</li>
<li>添加robots.txt文件</li>
<li>确保网站可访问性</li>
<li>提高页面加载速度</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>SEO是一个长期过程,不要期望立即看到效果。持续优化内容和结构,提供有价值的信息,搜索引擎会给予回报。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>部署上线 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.deployment-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.deployment-card h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>部署上线</h1>
<h2>部署选项</h2>
<table class="info-table">
<thead>
<tr>
<th>平台</th>
<th>特点</th>
<th>适用场景</th>
</tr>
</thead>
<tbody>
<tr>
<td>GitHub Pages</td>
<td>免费、简单、支持自定义域名</td>
<td>静态网站、个人项目</td>
</tr>
<tr>
<td>Netlify</td>
<td>免费、自动部署、表单处理</td>
<td>静态网站、JAMstack</td>
</tr>
<tr>
<td>Vercel</td>
<td>免费、自动部署、边缘网络</td>
<td>Next.js项目、现代Web应用</td>
</tr>
<tr>
<td>传统主机</td>
<td>完全控制、支持服务器端</td>
<td>动态网站、需要后端</td>
</tr>
</tbody>
</table>
<h2>GitHub Pages部署</h2>
<div class="deployment-card">
<h3>部署步骤</h3>
<div class="code-block">
<pre>
# 1. 创建GitHub仓库
git init
git add .
git commit -m "Initial commit"
# 2. 推送到GitHub
git remote add origin https://github.com/username/repository.git
git push -u origin main
# 3. 启用GitHub Pages
# 在仓库Settings中找到Pages选项
# 选择分支和文件夹(通常是main分支的root文件夹)
# 4. 访问网站
# https://username.github.io/repository
</pre>
</div>
</div>
<h2>自定义域名</h2>
<div class="deployment-card">
<h3>配置自定义域名</h3>
<div class="code-block">
<pre>
# 1. 购买域名
# 从域名注册商购买域名(如阿里云、腾讯云、GoDaddy等)
# 2. 配置DNS记录
# 添加CNAME记录指向GitHub Pages
CNAME www username.github.io
A @ 185.199.108.153
A @ 185.199.109.153
A @ 185.199.110.153
A @ 185.199.111.153
# 3. 在仓库中添加CNAME文件
# 文件内容为你的域名
echo "www.example.com" > CNAME
# 4. 启用HTTPS
# 在GitHub Pages设置中启用Enforce HTTPS
</pre>
</div>
</div>
<h2>部署检查清单</h2>
<ul>
<li>✅ 测试所有页面和链接</li>
<li>✅ 检查响应式设计</li>
<li>✅ 验证表单功能</li>
<li>✅ 优化图片和资源</li>
<li>✅ 检查SEO标签</li>
<li>✅ 测试跨浏览器兼容性</li>
<li>✅ 配置自定义域名</li>
<li>✅ 启用HTTPS</li>
<li>✅ 设置Google Analytics</li>
<li>✅ 提交到搜索引擎</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>部署不是终点,而是起点。定期更新内容,监控网站性能,收集用户反馈,持续改进你的个人网站。
</div>
</div>
</body>
</html>
东巴文(db-w.cn) 提醒:个人网站是你的数字名片,投入时间精心打造,它会成为你职业发展的有力工具。记住,内容为王,设计为后,技术为基。