**学习目标**：掌握HTML和CSS基础，创建首个个人网页。，* **HTML基础**：介绍HTML的基本概念、语法及常用标签，通过实例，如无序列表、有序列表等，加深理解，并学会创建简单的网页结构。，* **CSS基础**：阐述CSS的重要性及语法，通过选择器、属性和值的学习，掌握如何设计网页样式和布局。，**实践项目**：设计并制作个人网页原型，将HTML和CSS理论知识应用到实践中。
在数字时代,网页设计不再是专业程序员的专属技能，借助HTML（超文本标记语言）和CSS（层叠样式表），任何人都能创建出功能性的网页，本文将引导你了解HTML和CSS的基础知识，并教你如何使用这些工具来打造你自己的第一个网页。
HTML基础：构建网页的结构
HTML是一种用于创建网页的标准标记语言,通过使用HTML，你可以定义文档的结构，如标题、段落、列表、链接等，一个简单的HTML文档结构如下所示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的HTML页面示例。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<a href="https://www.example.com">点击访问Example.com</a>
</body>
</html>
在这个例子中,<!DOCTYPE html> 声明了文档类型，<html> 标签是整个网页的根元素，<head> 部分包含了文档的元数据，如字符集声明、视口设置和页面标题。<body> 部分包含了可见的网页内容。
CSS基础：美化网页的样式
与HTML不同,CSS用于描述网页的外观和布局，通过使用CSS，你可以控制文本的颜色、字体、大小，段落的对齐方式，以及各种元素的边距、填充和边框等样式属性，下面是一个简单的CSS示例，用于改变上面HTML文档的外观：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 16px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #fff;
margin-bottom: 5px;
padding: 10px;
border-radius: 5px;
}
这个CSS规则将改变段落文本的颜色、字体大小，并使列表项看起来更整洁。
创建你的第一个网页
你已经了解了HTML和CSS的基础知识,可以开始创建你自己的第一个网页了，从简单的文本页面开始，逐步添加更多的内容和样式，实践是学习的关键，随着你编写更多的代码，你会逐渐掌握这些工具的使用，并能够创建出更复杂、更吸引人的网页，拿起你的键盘和显示器，开始你的HTML和CSS之旅吧！
