- 完整的HTML结构：使用语义化标签（
<header>,<main>,<article>,<aside>,<footer>）。 - 内联的CSS样式：为了让代码成为一个独立的文件，我将CSS直接写在了
<style>标签里，样式包含了响应式设计，在手机和电脑上都能良好显示。 - 一些示例JavaScript：用于实现一个简单的“阅读更多”功能，让页面更具交互性。
- ：包含了博客标题、导航、文章列表、侧边栏（关于我、标签云、最新评论）和页脚。
您可以直接复制下面的所有代码,保存为一个 .html 文件（blog.html），然后用浏览器打开即可看到效果。
（图片来源网络，侵删）
博客网页完整源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人博客 - 分享技术与生活</title>
<style>
/* --- 全局样式 --- */
:root {
--primary-color: #4a90e2;
--secondary-color: #f7f7f7;
--text-color: #333;
--light-gray: #e0e0e0;
--border-color: #ddd;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3 {
margin-bottom: 1rem;
color: #2c3e50;
}
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
/* --- 头部导航 --- */
header {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 1.5rem;
}
/* --- 主要内容区域 --- */
.main-content {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 2rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
/* --- 文章样式 --- */
.article-card {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-meta {
font-size: 0.9rem;
color: #777;
margin-bottom: 0.5rem;
}
.article-meta span {
margin-right: 1rem;
}
.article-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.article-excerpt {
color: #555;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.read-more-btn {
display: inline-block;
background-color: var(--primary-color);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: bold;
transition: background-color 0.2s ease;
}
.read-more-btn:hover {
background-color: #357abd;
}
/* --- 侧边栏样式 --- */
.sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.sidebar-widget {
background-color: #fff;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.widget-title {
font-size: 1.2rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--light-gray);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background-color: var(--secondary-color);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
}
.tag:hover {
background-color: var(--primary-color);
color: #fff;
}
.comment-item {
padding: 0.8rem 0;
border-bottom: 1px solid var(--light-gray);
}
.comment-item:last-child {
border-bottom: none;
}
.comment-author {
font-weight: bold;
margin-bottom: 0.3rem;
}
/* --- 页脚样式 --- */
footer {
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.nav-links {
display: none; /* 在移动端可以改为汉堡菜单 */
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">我的博客</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#about">lt;/a></li>
<li><a href="#archive">归档</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<div class="main-content">
<!-- 文章列表 -->
<section class="articles">
<article class="article-card">
<div class="article-meta">
<span>2025年10月27日</span>
<span>作者：张三</span>
<span>分类：前端技术</span>
</div>
<h2 class="article-title">
<a href="#">深入理解 CSS Grid 布局</a>
</h2>
<p class="article-excerpt">
CSS Grid 是一个强大的二维布局系统，它彻底改变了我们设计网页布局的方式，本文将带你从零开始，深入了解 Grid 的核心概念，包括网格容器、网格项目、网格线、网格轨道等，并通过实例展示如何构建复杂的响应式布局...
</p>
<a href="#" class="read-more-btn">阅读更多</a>
</article>
<article class="article-card">
<div class="article-meta">
<span>2025年10月25日</span>
<span>作者：张三</span>
<span>分类：JavaScript</span>
</div>
<h2 class="article-title">
<a href="#">JavaScript 异步编程：从回调到 Async/Await</a>
</h2>
<p class="article-excerpt">
异步编程是 JavaScript 的核心特性之一，从最初的回调函数，到 Promise 的出现，再到如今优雅的 Async/Await 语法，JavaScript 的异步处理方式在不断演进，本文将梳理这条技术脉络，帮助你彻底理解异步编程的精髓...
</p>
<a href="#" class="read-more-btn">阅读更多</a>
</article>
<article class="article-card">
<div class="article-meta">
<span>2025年10月20日</span>
<span>作者：张三</span>
<span>分类：生活随笔</span>
</div>
<h2 class="article-title">
<a href="#">秋日漫步，感悟生活</a>
</h2>
<p class="article-excerpt">
秋风送爽，阳光正好，周末的午后，我决定放下手中的代码，去公园里走走，看着金黄的落叶，听着清脆的鸟鸣，所有的疲惫和烦恼仿佛都随风而去，生活不只有代码和项目，还有诗和远方...
</p>
<a href="#" class="read-more-btn">阅读更多</a>
</article>
</section>
<!-- 侧边栏 -->
<aside class="sidebar">
<!-- 关于我 -->
<div class="sidebar-widget">
<h3 class="widget-title">关于我</h3>
<p>你好，我是张三，一名热爱编程和写作的全栈开发者，这个博客是我分享技术心得、生活感悟的地方，希望我的文章能对你有所帮助！</p>
</div>
<!-- 标签云 -->
<div class="sidebar-widget">
<h3 class="widget-title">标签云</h3>
<div class="tag-cloud">
<a href="#" class="tag">HTML</a>
<a href="#" class="tag">CSS</a>
<a href="#" class="tag">JavaScript</a>
<a href="#" class="tag">Vue.js</a>
<a href="#" class="tag">React</a>
<a href="#" class="tag">Node.js</a>
<a href="#" class="tag">前端</a>
<a href="#" class="tag">生活</a>
</div>
</div>
<!-- 最新评论 -->
<div class="sidebar-widget">
<h3 class="widget-title">最新评论</h3>
<div class="comment-list">
<div class="comment-item">
<div class="comment-author">李四</div>
<div class="comment-content">这篇文章写得真好，对我帮助很大！</div>
</div>
<div class="comment-item">
<div class="comment-author">王五</div>
<div class="comment-content">期待更多关于Vue的深入文章。</div>
</div>
</div>
</div>
</aside>
</div>
</main>
<footer>
<div class="container">
<p>© 2025 我的个人博客. All Rights Reserved. | Powered by HTML, CSS & JS</p>
</div>
</footer>
<script>
// 为 "阅读更多" 按钮添加点击事件
document.querySelectorAll('.read-more-btn').forEach(button => {
button.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认的链接跳转行为
// 获取文章卡片
const articleCard = this.closest('.article-card');
const excerpt = articleCard.querySelector('.article-excerpt');
// 切换显示完整内容或摘要
if (this.textContent === '阅读更多') {
// 模拟加载更多内容
excerpt.style.webkitLineClamp = 'unset'; // 解除截断
excerpt.textContent = excerpt.textContent + ' 这是文章的剩余部分，这里可以展示更详细的内容，你可以在这里继续阐述你的观点，提供代码示例、图片或者更多的分析，一个好的博客文章不仅要有吸引人的开头，更要有充实的内容来支撑主题，感谢你的阅读！';
this.textContent = '收起';
} else {
// 恢复摘要
excerpt.style.webkitLineClamp = '3';
excerpt.textContent = excerpt.textContent.substring(0, 120) + '...'; // 恢复为原始摘要
this.textContent = '阅读更多';
}
});
});
</script>
</body>
</html>
代码结构解析
-
<!DOCTYPE html>和<html lang="zh-CN">声明这是一个HTML5文档,并设置语言为中文，有助于SEO。
-
<head>部分<meta charset="UTF-8">：确保浏览器能正确显示中文等字符。<meta name="viewport" ...>：响应式设计的核心，告诉浏览器如何控制页面的尺寸和缩放。<title>，会显示在浏览器标签页上。<style>：这里放置了所有的CSS样式，我使用了CSS变量（--primary-color等）来方便统一管理颜色，样式包括了全局样式、头部、文章卡片、侧边栏、页脚以及针对移动端的媒体查询。
-
<body>部分
（图片来源网络，侵删）<header>：网站的头部，通常包含Logo和主导航菜单。<main class="container">：网站的主要内容区域，我使用了container类来限制内容的最大宽度，并使其居中。<section class="main-content">：一个网格布局容器，用于并排显示文章列表和侧边栏。<section class="articles">：包含所有博客文章，每篇文章都用一个<article>标签包裹，这符合语义化HTML标准。<aside class="sidebar">：侧边栏，包含非主要内容，如关于我、标签云等，每个小部件用<div class="sidebar-widget">包裹。
<footer>：页脚，通常包含版权信息、联系方式等。
-
<script>部分- 这是一小段内联的JavaScript。
- 它为所有“阅读更多”按钮添加了点击监听器。
- 当点击时,它会切换文章摘要的显示状态（截断或展开），并改变按钮上的文字，实现了简单的交互效果。
如何使用和扩展
- 直接使用：将上述代码完整复制，保存为
.html文件，即可在浏览器中打开一个静态博客页面。 - 添加新文章：只需在
<section class="articles">内复制一个<article class="article-card">块，并修改其中的标题、日期等信息即可。 - 修改样式：通过修改
<style>标签中的CSS，你可以轻松改变颜色、字体、布局等，打造出你自己的风格。 - 连接真实数据：这是一个静态页面，在实际应用中，你需要后端（如 Node.js, PHP, Python）来从数据库获取文章数据，然后通过JavaScript动态渲染到页面上。
（图片来源网络，侵删）
