html5网页制作实例代码-网页设计-锦华智联科技

个人简介页面（基础语义化与布局）

这个实例将重点介绍 HTML5 的语义化标签，并使用 Flexbox 进行简单的布局,这是构建任何网页的基石。

（图片来源网络，侵删）

效果预览

一个简洁的个人简介页面，包含头部、导航、主要内容区、侧边栏和页脚。

代码结构

我们将创建三个文件：

index.html (网页结构)
style.css (网页样式)
script.js (网页交互,可选)

`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人简介 - HTML5 实例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 1. 页头：通常包含网站标志、导航等 -->
    <header>
        <h1>张三的个人网站</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- 2. 主要内容区 -->
        <section id="about">
            <h2>关于我</h2>
            <p>你好！我是张三，一名热爱前端开发的工程师，我专注于使用 HTML5, CSS3 和 JavaScript 创建美观、高效且用户友好的网页。</p>
            <img src="https://via.placeholder.com/150" alt="我的照片">
        </section>
        <section id="portfolio">
            <h2>我的作品</h2>
            <article>
                <h3>项目一：响应式企业官网</h3>
                <p>使用 HTML5 和 CSS3 Grid/Flexbox 构建的现代化企业官网，支持多设备适配。</p>
            </article>
            <article>
                <h3>项目二：在线任务管理应用</h3>
                <p>一个基于原生 JavaScript 的单页应用，实现了任务的增删改查功能。</p>
            </article>
        </section>
    </main>
    <!-- 3. 侧边栏 -->
    <aside>
        <h3>技能标签</h3>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>响应式设计</li>
        </ul>
    </aside>
    <!-- 4. 页脚：通常包含版权信息、联系方式等 -->
    <footer>
        <p>&copy; 2025 张三的个人网站. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

`style.css`

/* 全局样式重置 */
body, h1, h2, h3, p, ul, li {
    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;
    background-color: #f4f4f4;
    color: #333;
}
/* 布局容器 */
.container {
    display: flex; /* 使用 Flexbox 布局 */
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}
区 */
main {
    flex: 3; /* main 占据 3 份空间 */
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 侧边栏 */
aside {
    flex: 1; /* aside 占据 1 份空间 */
    margin-left: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 页头和页脚 */
header, footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    margin-bottom: 20px;
    border-radius: 5px;
}
/* 导航链接 */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px; /* 子元素间距 */
}
nav a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
nav a:hover {
    color: #ff9800;
}
/* 图片样式 */
img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 15px;
}
/* 响应式设计：在小屏幕上堆叠布局 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    aside {
        margin-left: 0;
        margin-top: 20px;
    }
}

`script.js` (可选，增加一点交互)

// 当页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 为所有导航链接添加点击事件
    const navLinks = document.querySelectorAll('nav a');
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            // 阻止默认的跳转行为（因为我们用的是锚点，其实可以不加）
            // event.preventDefault();
            // 简单的提示，你可以替换为更平滑的滚动效果
            console.log(`导航到: ${this.getAttribute('href')}`);
        });
    });
});

互动式待办事项列表（JavaScript 交互）

这个实例将展示如何使用 JavaScript 来操作 DOM，实现一个功能完整的待办事项列表，包括添加、删除和标记完成功能。

效果预览

一个可以添加新任务、标记任务为已完成、删除任务的动态列表。

（图片来源网络，侵删）

代码结构

index.html (包含输入框和列表容器)
style.css (美化样式)
script.js (核心逻辑)

`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>
    <div class="todo-container">
        <h1>我的待办事项</h1>
        <form id="todo-form">
            <input type="text" id="todo-input" placeholder="输入新任务..." required>
            <button type="submit">添加</button>
        </form>
        <ul id="todo-list">
            <!-- 任务项将通过 JavaScript 动态添加到这里 -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

`style.css`

body {
    font-family: 'Arial', sans-serif;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}
.todo-container {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 500px;
}
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}
#todo-form {
    display: flex;
    margin-bottom: 20px;
}
#todo-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
}
#todo-form button {
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    font-size: 16px;
    border-radius: 0 5px 5px 0;
    transition: background-color 0.3s;
}
#todo-form button:hover {
    background-color: #0056b3;
}
#todo-list {
    list-style: none;
    padding: 0;
}
.todo-item {
    background: #f8f9fa;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.todo-item.completed {
    background-color: #d4edda;
    text-decoration: line-through;
    color: #155724;
}
.todo-item span {
    flex-grow: 1;
    margin-right: 10px;
}
.todo-item button {
    padding: 5px 10px;
    border: none;
    background-color: #dc3545;
    color: white;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.3s;
}
.todo-item button:hover {
    background-color: #c82333;
}

`script.js`

document.addEventListener('DOMContentLoaded', () => {
    // 获取 DOM 元素
    const todoForm = document.getElementById('todo-form');
    const todoInput = document.getElementById('todo-input');
    const todoList = document.getElementById('todo-list');
    // 从 localStorage 加载任务
    let todos = JSON.parse(localStorage.getItem('todos')) || [];
    // 渲染任务列表
    function renderTodos() {
        todoList.innerHTML = ''; // 清空列表
        todos.forEach((todo, index) => {
            createTodoElement(todo, index);
        });
    }
    // 创建单个任务元素
    function createTodoElement(todo, index) {
        const li = document.createElement('li');
        li.className = 'todo-item';
        if (todo.completed) {
            li.classList.add('completed');
        }
        li.innerHTML = `
            <span>${todo.text}</span>
            <button data-index="${index}">删除</button>
        `;
        // 点击任务文本切换完成状态
        li.querySelector('span').addEventListener('click', () => {
            todos[index].completed = !todos[index].completed;
            saveTodos();
            renderTodos();
        });
        // 点击删除按钮删除任务
        li.querySelector('button').addEventListener('click', (e) => {
            const indexToDelete = e.target.getAttribute('data-index');
            todos.splice(indexToDelete, 1);
            saveTodos();
            renderTodos();
        });
        todoList.appendChild(li);
    }
    // 保存任务到 localStorage
    function saveTodos() {
        localStorage.setItem('todos', JSON.stringify(todos));
    }
    // 添加新任务
    todoForm.addEventListener('submit', (e) => {
        e.preventDefault(); // 阻止表单默认提交行为
        const todoText = todoInput.value.trim();
        if (todoText) {
            todos.push({ text: todoText, completed: false });
            saveTodos();
            renderTodos();
            todoInput.value = ''; // 清空输入框
        }
    });
    // 初始渲染
    renderTodos();
});

实例一 重点是 HTML5 语义化标签 (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) 和 CSS3 Flexbox 布局,这是现代网页结构和布局的基础。
实例二 重点是 JavaScript DOM 操作 和 事件处理，展示了如何让网页“活”起来，响应用户的操作，并利用 localStorage 实现数据持久化。

这两个实例覆盖了前端开发的核心技能，你可以基于这些代码进行扩展，比如添加更多动画效果、数据验证、或者连接后端 API 等。

（图片来源网络，侵删）

html5网页制作实例代码

个人简介页面（基础语义化与布局）

效果预览

代码结构

index.html

style.css

script.js (可选，增加一点交互)

互动式待办事项列表（JavaScript 交互）

效果预览

代码结构

index.html

style.css

script.js

`index.html`

`style.css`

`script.js` (可选，增加一点交互)

`index.html`

`style.css`

`script.js`