在这个数字化时代，手机通讯录已经成为了我们日常生活中不可或缺的一部分。HTML5，作为现代网页开发的核心技术，让我们能够轻松地创建出功能丰富、个性化的手机通讯录应用。本文将带领你从零开始，一步步打造一个属于你自己的手机通讯录。

第一步：准备工作

在开始之前，我们需要准备以下工具：

  1. 文本编辑器：如Sublime Text、Notepad++等，用于编写代码。
  2. 浏览器：如Chrome、Firefox等，用于测试网页效果。

第二步：创建基本结构

首先，我们需要创建一个基本的HTML5页面结构。以下是页面结构的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个性化手机通讯录</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的手机通讯录</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#addContact">添加联系人</a></li>
            <li><a href="#contactList">通讯录列表</a></li>
        </ul>
    </nav>
    <main>
        <!-- 页面主体内容 -->
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

第三步：设计样式

接下来，我们需要为页面添加一些样式，使其更加美观。以下是样式文件的代码示例：

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

header, nav, main, footer {
    margin: 20px;
    padding: 10px;
    background-color: #fff;
}

header {
    background-color: #007bff;
    color: #fff;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

第四步：添加联系人功能

为了让用户能够添加联系人，我们需要在页面上添加一个表单。以下是添加联系人的代码示例：

<!-- 添加联系人表单 -->
<section id="addContact">
    <h2>添加联系人</h2>
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        <label for="phone">电话：</label>
        <input type="tel" id="phone" name="phone" required>
        <button type="submit">添加</button>
    </form>
</section>

第五步：通讯录列表展示

为了展示已添加的联系人，我们需要在页面上添加一个列表。以下是通讯录列表的代码示例：

<!-- 通讯录列表 -->
<section id="contactList">
    <h2>通讯录列表</h2>
    <ul>
        <!-- 联系人数据将被动态添加到这里 -->
    </ul>
</section>

第六步：动态添加联系人数据

为了实现动态添加联系人数据的功能，我们需要使用JavaScript。以下是JavaScript代码示例：

// JavaScript代码
document.addEventListener('DOMContentLoaded', function () {
    const addContactForm = document.getElementById('addContact');
    const contactList = document.getElementById('contactList').querySelector('ul');

    addContactForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const name = document.getElementById('name').value;
        const phone = document.getElementById('phone').value;

        const li = document.createElement('li');
        li.innerHTML = `${name} - ${phone}`;
        contactList.appendChild(li);

        addContactForm.reset();
    });
});

第七步：测试与优化

完成以上步骤后，我们可以在浏览器中打开HTML文件，测试添加联系人和显示通讯录列表的功能。根据测试结果，对代码进行优化和调整。

总结

通过本文的教程，你已经掌握了如何使用HTML5打造一个个性化手机通讯录。在实际应用中，你可以根据需求添加更多功能，如搜索、分类、编辑和删除联系人等。祝你在网页开发的道路上越走越远！