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

html5个人网站实例

HTML5个人网站实例：采用语义化标签构建导航、内容区，结合CSS3动画与响应式布局，集成作品展示、博客及联系页，适配多终端

网站结构规划

个人网站通常包含以下核心模块：
| 模块 | 功能说明 |
|—————-|———————————-|
| 首页 | 展示个人简介、核心内容入口 |
| 关于我 | 个人信息、经历、联系方式 |
| 技能展示 | 技术栈、工具熟练度 |
| 项目案例 | 作品展示与说明 |
| 联系方式 | 表单或社交链接 |

首页设计（index.html）

基础结构

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  我的个人网站</title>  
    <link rel="stylesheet" href="style.css">  
</head>  
<body>  
    <header>  
        <h1>你好，我是[你的名字]</h1>  
        <p>职业标签：前端开发 | UI设计 | 摄影爱好者</p>  
    </header>  
    <nav>  
        <ul>  
            <li><a href="index.html">首页</a></li>  
            <li><a href="about.html">关于我</a></li>  
            <li><a href="skills.html">技能</a></li>  
            <li><a href="projects.html">项目</a></li>  
            <li><a href="contact.html">联系</a></li>  
        </ul>  
    </nav>  
    <main>  
        <section>  
            <h2>欢迎来到我的网站</h2>  
            <p>这里是一段简短的自我介绍或网站导览文字。</p>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2023 [你的名字]. 保留所有权利.</p>  
    </footer>  
</body>  
</html>

关键标签说明

作用
<header> 网站头部，包含标题和个人标语
<nav> 导航栏，提供页面跳转链接
<main> 区域
<section> 内容分块，用于结构化布局
<footer> 底部信息，如版权声明

技能展示页（skills.html）

技能列表实现

<section>  
    <h2>我的技能</h2>  
    <div class="skill-container">  
        <div class="skill">  
            <h3>前端开发</h3>  
            <progress value="85" max="100"></progress>  
        </div>  
        <div class="skill">  
            <h3>UI/UX设计</h3>  
            <progress value="75" max="100"></progress>  
        </div>  
    </div>  
</section>

样式配合（style.css）

.skill-container {  
    display: flex;  
    gap: 20px;  
}  
.skill {  
    text-align: center;  
}  
progress {  
    width: 100%;  
    height: 20px;  
}

项目案例页（projects.html）

项目卡片布局

<section>  
    <h2>项目案例</h2>  
    <div class="project-grid">  
        <article class="project-card">  
            <figure>  
                <img src="project1.jpg" alt="项目1缩略图">  
                <figcaption>项目名称：个人博客系统</figcaption>  
            </figure>  
            <p>技术栈：HTML5 + CSS3 + JavaScript</p>  
        </article>  
        <!-其他项目重复结构 -->  
    </div>  
</section>

语义化标签优势

  • <article>块，适合单个项目介绍。
  • <figure> + <figcaption>：图像与说明绑定，提升可读性。

联系方式页（contact.html）

表单实现

<section>  
    <h2>联系我</h2>  
    <form action="#" method="post">  
        <fieldset>  
            <legend>留言反馈</legend>  
            <label for="name">姓名：</label>  
            <input type="text" id="name" name="name" required>  
            <label for="email">邮箱：</label>  
            <input type="email" id="email" name="email" required>  
            <label for="message">留言：</label>  
            <textarea id="message" name="message" required></textarea>  
            <button type="submit">发送</button>  
        </fieldset>  
    </form>  
</section>

相关问题与解答

问题1：如何优化个人网站的SEO？

解答：

  1. 在<head>中添加<meta name="description" content="...">，描述网站内容。
  2. 使用语义化标签（如<header>、<article>结构。
  3. 为图片添加alt属性，提升搜索引擎理解。
  4. 确保导航链接清晰，避免使用JS跳转。

问题2：如何让网站适配移动端？

解答：

  1. 在<head>添加<meta name="viewport" content="width=device-width, initial-scale=1.0">。
  2. 使用响应式布局（如Flexbox或CSS栅格）。
  3. 确保按钮、输入框等元素
个人网站实例
0

相关文章