标题：从零开始，用HTML和JS制作动态通讯录

正文：

最近，随着互联网的发展和普及，动态网页的需求也越来越多。在这个过程中，HTML（超文本标记语言）和JS（JavaScript）被广泛运用于各种网页开发中。本文将介绍如何使用HTML和JS，从零开始制作一个动态通讯录。

首先，我们需要了解一下HTML和JS的基本概念。HTML是一种用于创建网页的标记语言，它通过标签的形式来描述页面的各个部分。而JS则是一种用于开发交互式和动态网页的编程语言，它可以通过操作HTML元素来改变网页的内容和行为。

接下来，我们开始动手制作动态通讯录。首先，打开一个文本编辑器，创建一个新的HTML文件。然后，使用以下代码来构建基本的HTML结构：

```html

动态通讯录

```

在这段代码中，我们创建了一个包含一个标题、一个表单、一个无序列表和一个嵌入式脚本的HTML页面。表单里包含两个输入框，用于输入联系人的姓名和电话号码。还有一个“添加联系人”的按钮，点击该按钮将调用一个名为`addContact()`的JS函数。

接下来，我们在同一目录下创建一个名为`script.js`的JS文件，并在其中实现`addContact()`函数。这个函数的功能是读取输入框中的值，并在无序列表中添加一个新的列表项，显示联系人的姓名和电话号码。下面是`script.js`文件的代码：

```javascript

function addContact() {

var name = document.getElementById("name").value;

var tel = document.getElementById("tel").value;

var listItem = document.createElement("li");

var textNode = document.createTextNode(name + ": " + tel);

listItem.appendChild(textNode);

document.getElementById("contacts").appendChild(listItem);

document.getElementById("name").value = "";

document.getElementById("tel").value = "";

}

```

在这个函数中，我们首先使用`getElementById()`方法获取输入框中的值，并存储在变量`name`和`tel`中。接着，我们创建一个新的列表项，将联系人的姓名和电话号码作为文本节点，添加到列表项中。最后，我们通过`appendChild()`方法将列表项添加到无序列表中，并清空输入框中的值。

现在，我们可以在浏览器中打开这个HTML文件，输入联系人的姓名和电话号码，并点击“添加联系人”按钮。你将会发现，每次点击按钮后，新的联系人信息都会动态地显示在无序列表中。

通过上述步骤，我们成功地用HTML和JS制作了一个简单的动态通讯录。当然，这只是一个入门级的示例，有很多改进的空间。你可以尝试添加更多的功能，比如编辑和删除联系人、搜索功能等，以提升通讯录的实用性和用户体验。

总结起来，HTML和JS是制作动态网页的常用工具。通过学习和运用它们，我们可以创造出丰富多样的交互式和动态的网页应用。期待看到你运用HTML和JS制作出更多有趣、实用的动态网页！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/