创建具有基本结构的 HTML 文档
在这一步中,你将学习如何创建一个基本的 HTML 文档,作为探索 CSS margin 样式的基础。HTML 为网页提供了结构,创建一个格式良好的文档是网页开发的第一步。
打开 WebIDE 并导航到 ~/project
目录。右键点击文件资源管理器并选择“新建文件”,创建一个名为 index.html
的新文件。
以下是本实验中使用的基本 HTML5 文档结构:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
</head>
<body>
<div>First Paragraph</div>
<div>Second Paragraph</div>
<div>Third Paragraph</div>
</body>
</html>
让我们分解一下这个 HTML 结构的关键组成部分:
<!DOCTYPE html>
声明这是一个 HTML5 文档
<html>
是 HTML 页面的根元素
<head>
包含文档的元信息
<meta charset="UTF-8">
指定字符编码
<meta name="viewport">
确保在不同设备上正确渲染
<body>
包含页面的可见内容
我添加了三个 <div>
元素,我们将在接下来的步骤中使用它们来演示 margin 样式。
通过按下 Ctrl+S
或使用 WebIDE 中的保存图标来保存文件。