当前位置：首页 > 行业动态 > 正文

html个人博客网站

admin
行业动态
2025-05-06
2400

基于HTML构建，含文章管理、页面展示模块，实现个人博客网站前端

文件结构规划

个人博客网站通常由多个HTML文件、CSS样式表、图片文件夹等组成，以下是基础文件结构示例：

文件/文件夹	说明
`index.html`	首页文件
`about.html`	关于页面
`blog.html`	博客文章列表页
`css/`	存放CSS样式文件（如`style.css`）
`images/`	存放图片资源
`js/`	存放JavaScript文件（可选）

HTML基础结构

头部（`<head>`）

包含网页元数据、标题、字符集声明、CSS链接等。

html个人博客网站第1张

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  我的个人博客</title>  
    <link rel="stylesheet" href="css/style.css">  
</head>

主体（`<body>`）

常见布局包括导航栏、内容区、侧边栏和底部。

<body>  
    <header>  
        <nav>  
            <ul>  
                <li><a href="index.html">首页</a></li>  
                <li><a href="blog.html">博客</a></li>  
                <li><a href="about.html">关于我</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h1>欢迎来到我的博客</h1>  
            <p>这里是文章摘要或简介...</p>  
        </section>  
        <aside>  
            <h2>推荐文章</h2>  
            <ul>  
                <li><a href="blog-post1.html">文章标题1</a></li>  
                <li><a href="blog-post2.html">文章标题2</a></li>  
            </ul>  
        </aside>  
    </main>  
    <footer>  
        <p>&copy; 2023 我的个人博客</p>  
    </footer>  
</body>

样式设计（CSS）

通过CSS实现布局、配色和交互效果，以下是基础样式示例：

/ 全局样式 /  
body {  
    font-family: Arial, sans-serif;  
    margin: 0; padding: 0;  
    background-color: #f4f4f4;  
}  
/ 导航栏 /  
nav ul {  
    list-style: none;  
    background-color: #333;  
    padding: 10px;  
}  
nav li {  
    display: inline-block;  
    margin-right: 20px;  
}  
nav a {  
    color: white;  
    text-decoration: none;  
}  
/ 主体布局 /  
main {  
    display: flex;  
    padding: 20px;  
}  
section {  
    flex: 3; / 主内容占70%宽度 /  
    margin-right: 20px;  
}  
aside {  
    flex: 1; / 侧边栏占30%宽度 /  
    background-color: #fff;  
    padding: 15px;  
}