GENERAL TRACK

你的第一个网页

使用 AI 生成的 HTML 和 CSS 构建一个个人简介页面。

1HTML 基础：标签是什么？

在构建页面之前，我们先理解一个关键概念：HTML 标签。把标签想象成盒子上的标签。每个标签都告诉浏览器里面是什么类型的内容。

标签就像贴了标签的盒子

<h1>

大标题（像章节名）

<p>

文本段落

<ul> + <li>

带条目的项目符号列表

每个标签都有开有合：<h1>content</h1>。浏览器读取这些标签并相应地显示内容。点击运行代码即可查看：

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Understanding Tags</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>This is a list item</li>
    <li>This is another item</li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Understanding Tags</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>This is a list item</li>
    <li>This is another item</li>
  </ul>
</body>
</html>

Output

Your guide

2用 AI 构建个人简介页面

3把它变成你自己的

4进阶：用 CSS 实现现代样式

5挑战：构建你自己的简介页面

什么是氛围编程？

ALL TUTORIALS

让页面变得可交互