HTML和CSS基础，打造你的第一个网页

HTML和CSS是构建网页的基础，HTML提供网页的结构和内容，而CSS负责样式和布局，使用HTML创建基本结构，如标题、段落和列表，并为元素添加类名以便应用CSS样式，通过CSS选择器定位并自定义这些元素，调整字体、颜色、间距等，将HTML和CSS文件合并，即可展现完整的网页，此过程虽然简单，但所涵盖的技能和概念至关重要，为后续深入学习网页开发奠定基础。

在数字时代，网页已经成为了信息传播的重要渠道，无论你是想要创建个人博客，还是想要展示你的作品，都需要掌握网页设计的基础知识，HTML（超文本标记语言）和CSS（层叠样式表）是构建网页不可或缺的两个工具，本文将详细介绍HTML和CSS的基础知识,并指导你如何使用它们来打造你的第一个网页。

HTML基础：构建网页的结构

HTML是一种标记语言，用于创建网页的结构，它使用一系列标签（tag）来定义文档中的各个部分，如标题、段落、列表、链接等，要开始学习HTML,你需要熟悉以下几个基本的标签：

<!DOCTYPE html>：声明文档类型,告诉浏览器这是一个HTML5文档。
<html>：定义整个HTML文档的开始和结束。
<head>：包含文档的元数据，如标题、字符集和样式表链接，`：定义网页的标题,出现在浏览器的标签页上。
<body>：包含网页的所有可见内容。

以下是一个简单的HTML文档结构：

<!DOCTYPE html>
<html>
<head>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
    </ul>
    <a href="https://www.example.com">点击访问示例网站</a>
</body>
</html>

CSS基础：美化网页的外观

CSS是一种样式表语言，用于描述HTML元素的外观和布局，通过使用CSS，你可以控制文本的字体、颜色、大小，以及元素的间距、对齐方式等，要使用CSS,你需要了解以下几个基本概念：

元素选择器：用于选择特定的HTML元素。
类选择器：用于选择一个或多个具有相同样式的元素。
ID选择器：用于选择一个具有特定ID的元素。
属性选择器：用于选择具有特定属性的元素。

以下是一个简单的CSS样式表,用于美化上面的HTML文档：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
    text-align: center;
}
p {
    color: #666;
    line-height: 1.6;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background: #ddd;
    padding: 10px;
    margin-bottom: 5px;
}
a {
    color: #007BFF;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}