1. 简介
在网页开发中，为了实现页面的美化与功能的实现，我们需要使用到CSS和图片等外部资源。在HTML文档中，我们可以通过将CSS和图片嵌入其中来实现页面的样式和展示效果。本文将详细介绍如何在HTML文档中嵌入CSS和图片。
2. 嵌入CSS
2.1 在HTML文档中直接嵌入CSS
在HTML文档中嵌入CSS最简单的方式就是将CSS代码直接放在HTML代码的
标签中。具体方法如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入CSS代码</title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
上述代码中，<style>标签中的CSS代码会直接影响到<p>标签，将文字颜色设为红色。
注意：在单独使用CSS时，我们需要使用<style>标签将CSS代码包裹起来，而且需要指定type为text/css。
2.2 将CSS文件链接到HTML文档中
当我们需要使用更加复杂的CSS样式时，我们可以将CSS代码保存到一个外部文件中，并通过链接的方式在HTML文档中引用。具体方法如下：
Step1:创建一个新的CSS文件，并将CSS代码保存到该文件中。该文件的后缀名通常为.css，比如我们将文件命名为style.css。
p {
color: red;
}
Step2:在HTML文档中的<head>标签中，使用<link>标签将style.css文件导入到HTML文档中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引入CSS文件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
上述代码中，<link>标签的rel属性指定为stylesheet，type属性指定为text/css。href属性指定为style.css，这样HTML文档就能够导入style.css文件中的CSS代码了。
3. 嵌入图片
3.1 在HTML文档中直接嵌入图片
在HTML文档中直接使用<img>标签，可以将图片直接嵌入HTML文档中。具体方法如下：
Step1:将图片文件保存到本地磁盘中。
Step2:在HTML文档中使用<img>标签，通过src属性指定图片的路径。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入图片</title>
</head>
<body>
<img src="image.jpg" alt="图片">
</body>
</html>
上述代码中，<img>标签的src属性指定了图片的路径，alt属性则用于为图片添加描述文字，有助于全面地展示网页内容。
3.2 将图片作为CSS背景图片引入
当我们需要使用图片作为页面的背景图或者其他样式时，我们可以将图片作为CSS的背景图片引入。具体方法如下：
Step1:将图片文件保存到本地磁盘中。
Step2:在CSS文件中使用background-image属性将图片作为背景图片引入。
body {
background-image: url(image.jpg);
}
上述代码中，我们使用background-image属性将图片作为页面的背景图片。这种方式需要将CSS代码放到<style>标签中或者保存到外部CSS文件中，并在HTML文档中导入该文件。
4. 总结
通过本文的介绍，我们学习了如何在HTML文档中嵌入CSS和图片。在实际开发中，嵌入CSS和图片是实现网页美化和功能实现的重要手段，掌握这些技巧是每一名前端开发工程师必不可少的基础。