🎯 课程目标
完成本课程后，你将能够：
- 理解 HTML 的基本结构和常用标签
- 掌握 CSS 的基本样式设置
- 能够阅读和理解 AI 生成的网页代码
- 进行简单的样式修改
📖 HTML 入门
HTML 是网页的结构骨架，就像建筑的框架结构。
<!DOCTYPE> html>
<html> <head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>主标题</h1>
<p>这是一个段落</p>
</body>
</html>
🎨 常用 HTML 标签
<h1> - <h6>
标题标签，h1 最大，h6 最小
🎨 CSS 入门
CSS 是网页的装饰，就像给建筑刷漆和装修。
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
}
h1 {
color: #333;
font-size: 24px;
text-align: center;
}
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
🔧 常见 CSS 属性
| 属性 |
作用 |
示例值 |
| color | 文字颜色 | #333, red, rgb(255,0,0) |
| background-color | 背景颜色 | #fff, rgba(0,0,0,0.5) |
| font-size | 字体大小 | 16px, 1.5em, 100% |
| margin | 外边距 | 10px, 10px 20px |
| padding | 内边距 | 10px, 10px 20px |
| border-radius | 圆角 | 5px, 50% |
| display | 显示方式 | block, inline, flex |
💡 如何让 AI 生成更好的网页
Prompt 示例
"创建一个个人主页，使用以下要求：
- HTML5 结构，包含 header、main、footer
- CSS 使用 Flexbox 布局
- 响应式设计，适配手机和平板
- 主色调使用蓝色系
- 包含个人介绍、技能展示、联系方式三个部分"