设置 HTML 文档结构
在这一步中,你将学习如何创建一个基本的 HTML 文档结构,这将作为我们 JavaScript DOM 操作实验的基础。我们将设置一个简单的 HTML 文件,包含我们将使用 JavaScript 交互的基本元素。
打开 WebIDE 并导航到 ~/project
目录。右键点击文件资源管理器并选择“新建文件”,创建一个名为 index.html
的新文件。
以下是你将创建的基本 HTML 结构:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM Manipulation Lab</title>
</head>
<body>
<div id="container">
<h1 id="main-title">Welcome to DOM Manipulation</h1>
<p class="description">
This is a practice page for JavaScript DOM methods.
</p>
<div id="dynamic-content"></div>
</div>
<script src="script.js"></script>
</body>
</html>
让我们分解关键组件:
<!DOCTYPE html>
声明这是一个 HTML5 文档
- 我们为主要的容器和关键元素添加了
id
- 为段落添加了一个
class
- 创建了一个空的
div
,其 id="dynamic-content"
用于后续操作
- 链接了一个外部的 JavaScript 文件
script.js
当你在浏览器中打开此 HTML 文件时,示例输出如下:
Welcome to DOM Manipulation
This is a practice page for JavaScript DOM methods.
现在,在同一目录下创建对应的 JavaScript 文件 script.js
:
// Initial JavaScript file for DOM manipulation
console.log("HTML document is ready for DOM manipulation");