以下是一个完整的HTML网页代码案例，包括一个标题和长内容：
<!DOCTYPE html>
<html>
<head>
<title>完整HTML网页代码案例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>完整HTML网页代码案例</h1>
<p>这是一个完整的HTML网页代码案例，包含了一个简单的页面结构和样式。通过这个案例，你可以学习到HTML的基本语法和标签，以及如何使用CSS样式来美化页面。</p>
<p>HTML是网页开发的基础语言，它用于创建网页的结构和内容。CSS则用于控制页面的样式和布局。下面我们将详细介绍这个案例的代码组成。</p>
<h2>HTML代码结构</h2>
<p>一个基本的HTML页面结构包括以下部分：</p>
<ul>
<li><strong><!DOCTYPE html></strong>：这个声明告诉浏览器这是一个HTML5文档。</li>
<li><strong><html></strong>：这个标签是HTML文档的根元素。</li>
<li><strong><head></strong>：这个标签用于包含页面的元数据，如标题、样式和脚本等。</li>
<li><strong><title></strong>：这个标签用于设置页面的标题，它将在浏览器的标签页上显示。</li>
<li><strong><body></strong>：这个标签用于包含页面的主要内容，如标题、段落、图像和链接等。</li>
</ul>
<p>在上面的案例中，我们使用了这些基本的HTML标签来创建一个简单的页面结构。</p>
<h2>CSS样式</h2>
<p>在上面的案例中，我们使用了内联样式来控制页面的样式。内联样式是直接在HTML元素中使用<strong>style</strong>属性来定义样式。例如：</p>
<pre><p style="color: #666; line-height: 1.5;">这是一个段落。</p></pre>
<p>在这个例子中，我们为段落元素定义了文本颜色和行高。通过使用CSS样式，我们可以控制页面的外观和布局。</p>
<h2>总结</h2>
<p>通过这个完整的HTML网页代码案例，你可以学习到HTML和CSS的基本语法和用法。通过不断实践和学习，你可以创建更加复杂和美观的网页。</p>
</body>
</html>
