本教程将教你如何使用HTML和CSS创建一个简单的网页，你需掌握HTML的基本结构，如`,,和`等标签，使用CSS对网页元素进行样式设置，如字体、颜色、背景等，这里我们以设置网页标题、段落文本和按钮为例，详细展示了HTML和CSS的搭配使用，完成后，保存为.html文件，即可在浏览器中预览效果。
在数字时代，网页已经成为我们日常生活和工作中不可或缺的一部分，无论是个人网站、企业官网还是在线商城，都需要精心设计和制作的网页来吸引访问者，要创建网页，就需要掌握前端开发的核心技术——HTML（超文本标记语言）和CSS（层叠样式表），本文将带你入门HTML和CSS的基础知识,并指导你如何打造出自己的第一个网页。
HTML基础：构建网页结构
HTML是一种标记语言，用于定义网页的结构和内容，通过使用HTML标签，你可以描述文档中的各个部分，如标题、段落、列表、链接等。
基本语法：
HTML文档由<!DOCTYPE html>开始，它告诉浏览器文档类型，接下来是一个或多个<html>标签，它们包裹了整个HTML文档的内容。<head>标签包含了网页的元数据，如字符集、文档标题等，而<body>标签则包含了可见的网页内容。
常用标签：
<h1>到<h6>,从最大到最小。<p>：定义段落。<a href="URL">：创建超链接。<ul>和<li>：创建无序列表。<ol>和<li>：创建有序列表。<img src="URL" alt="...">：插入图片。
CSS基础：美化网页
CSS用于控制网页的外观和布局，它通过选择器和样式规则来改变HTML元素的颜色、字体、大小、位置等属性。
基本语法：
CSS规则由选择器（选择要应用样式的HTML元素）和声明块（包含样式属性和值的集合）组成，声明块由大括号包围,其中包含了属性和值的对。
常用选择器：
- 元素选择器：直接使用元素名作为选择器，如
p、h1等。 - 类选择器：以开头，后面跟类名，如
.class-name。 - ID选择器：以开头，后面跟ID名，如
#id-name。
常用样式属性：
- 颜色：
color、background-color等。 - 字体：
font-family、font-size、font-weight等。 - 大小：
width、height、padding、margin等。 - 布局：
display、position、float、clear等。
实战演练：打造第一个网页
我们已经了解了HTML和CSS的基础知识,我们将通过一个简单的实战演练来巩固所学。
创建HTML结构
使用文本编辑器创建一个新的文本文件,并输入以下代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个使用HTML和CSS创建的简单网页。</p>
<a href="https://www.example.com">点击访问example.com</a>
</body>
</html>
添加CSS样式
在同一目录下创建一个新的文本文件，并命名为styles.css,在文件中输入以下代码：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 16px;
}
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
合并HTML和CSS文件
将styles.css复制到index.html文件的<head>标签内,如下所示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个使用HTML和CSS创建的简单网页。</p>
<a href="https://www.example.com">点击访问example.com</a>
</body>
</html>
你已经拥有了一个属于自己的第一个网页，打开index.html文件，你将看到一个包含标题、段落和链接的简单网页，你可以根据自己的喜好继续添加更多的HTML元素和CSS样式,来打造出更加丰富和美观的网页。
