用 HTML+CSS 搭建你的第一个个人博客

南溪流不停

301人浏览 · 2026-05-22 21:39:56

南溪流不停 · 2026-05-22 21:39:56 发布

开篇：前端入门的第一步 —— 理解结构与样式

刚接触前端时，很多人会困惑：<div>、<section> 这些标签到底是干嘛的？CSS 里的 margin、padding 又有什么区别？其实，前端开发就像搭房子 ——HTML 是骨架，负责结构；CSS 是装修，负责样式，两者结合就能变出一个美观的网页。

今天，我们就从基础概念出发，一步步搭建一个结构清晰、样式美观的个人博客，把之前学到的知识点串起来。

一、核心概念先理清：HTML 标签与 CSS 盒子模型
1. 语义化标签：让页面 “有话可说”
HTML 里的标签不只是用来装内容的，语义化标签更是为了让浏览器、搜索引擎和开发者一眼看懂页面结构。
<header>：页面头部，放标题、副标题
<nav>：导航栏，放菜单链接
<main>：页面核心内容区
<section>：独立板块，比如 “技术文章”“生活随笔”
<article>：一篇完整的文章内容
<footer>：页面底部，放版权、联系方式
这些标签就像房子里的 “客厅”“卧室” 标签，不用看里面的内容，就知道这部分是干嘛的，比全用 <div> 更清晰、更利于 SEO。
2. 盒子模型：所有元素的 “尺寸算法”
不管是 <section> 还是 <div>，浏览器都会把它看成一个盒子，这套计算尺寸和间距的规则就是盒子模型，由 4 部分组成：
content：内容区，显示文字、图片
padding：内边距，内容到边框的空白
border：边框，包裹内容和内边距的线条
margin：外边距，这个盒子和其他盒子的距离

/* 全局重置：统一盒子模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 宽高包含边框和内边距，布局更直观 */
}

box-sizing: border-box 是前端开发的 “神器”—— 它让元素的 width/height 直接包含 padding 和 border，再也不用担心加了边框后元素 “变大”，布局计算更简单。

二、实战：搭建你的个人博客页面

1. 页面骨架：用语义化标签搭结构

先写好 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>
/* 这里写CSS样式 */
</style>
</head>
<body>
<header>
<h1>我的个人博客</h1>
<p>分享生活、技术与日常感悟</p>
</header>

<main>
<h2>最新文章</h2>
<section>
<h3>技术文章</h3>
<article>
<h4>HTML 语义化标签是什么？</h4>
<p>语义化标签就是用有意义的名字划分网页结构，让浏览器和开发者一眼看懂，利于 SEO 和维护。</p>
</article>
</section>

<section>
<h3>生活随笔</h3>
<article>
<h4>今天学习前端的感悟</h4>
<p>学习 HTML 和 CSS 很有趣，一步步搭起页面的成就感满满！</p>
</article>
</section>
</main>

<footer>
<p>© 2026 我的个人博客 - 保留所有权利</p>
<p>联系方式：example@mail.com</p>
</footer>
</body>
</html>

2. 样式美化：用 CSS 给页面 “装修”

接下来用 CSS 给骨架加样式，重点用到盒子模型和布局技巧：

/* 全局初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}

/* 页头样式 */
header {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}

/* 导航栏样式 */
nav {
background: #34495e;
padding: 10px;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline; /* 鼠标悬浮时下划线 */
}

/* 主体内容区 */
main {
max-width: 1000px;
margin: 20px auto; /* 水平居中 */
padding: 0 20px;
}

/* 板块样式 */
section {
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}

/* 文章卡片样式 */
article {
background: white;
padding: 20px;
margin: 15px 0;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 页脚样式 */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
}

三、关键知识点总结
<section> vs 盒子模型：
<section> 是 HTML 语义化标签，负责划分页面板块（结构层面）
盒子模型是 CSS 布局规则，负责计算元素尺寸和间距（样式层面）
所有 HTML 元素（包括 <section>）都遵循盒子模型，背景色、边框只是它的视觉表现
<style> 标签的作用：
写在 <head> 里的内部样式表，统一控制当前页面的样式
可以精准选择元素（类、标签、ID），实现 “一处定义，多处生效”
若要全站统一样式，推荐用外部 .css 文件，通过 <link> 引入
前端开发的核心逻辑：
先搭结构（HTML），再写样式（CSS）
用语义化标签提升可读性和可维护性
用盒子模型控制布局，让页面更规整、美观