当我们在互联网上浏览时，经常会遇到各种各样的网页。这些网页都是由HTML（超文本标记语言）和CSS（层叠样式表）构成的。下面，我将详细解析并解释这个HTML页面代码的各个部分，以及它是如何工作的。
文档类型声明
<!DOCTYPE html>
这是HTML文档的声明，告诉浏览器这是一个HTML5文档。它必须放在HTML文档的第一行。
HTML文档结构
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网站</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 800px;
margin: auto;
}
a {
color: #06c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这是一个展示HTML和CSS基础的简单网站。您可以点击以下链接了解更多信息：</p>
<a href="https://www.example.com">关于我们</a>
<a href="https://www.example.com/contact">联系我们</a>
</div>
</body>
</html>
<html> 根元素
<html lang="en">
这是HTML文档的根元素，包含了整个文档的所有内容。lang="en" 属性指定了文档的语言为英语。
<head> 元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网站</title>
<style>
/* CSS样式 */
</style>
</head>
<head> 元素包含了文档的元数据，如字符集、视口设置和标题。<title> 元素定义了网页的标题，它将在浏览器的标签页中显示。
<meta> 标签
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 标签用于定义网页的元数据。charset="UTF-8" 指定了文档的字符编码，而 viewport 属性确保网页在不同设备上正确显示。
<style> 标签
<style>
/* CSS样式 */
</style>
<style> 标签用于定义HTML文档的样式。在这个例子中，它设置了网页的字体、边距和链接样式。
<body> 元素
<body>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这是一个展示HTML和CSS基础的简单网站。您可以点击以下链接了解更多信息：</p>
<a href="https://www.example.com">关于我们</a>
<a href="https://www.example.com/contact">联系我们</a>
</div>
</body>
<body> 元素包含了网页的可视内容。在这个例子中，它包含了一个标题、一段文本和两个链接。
<div> 元素
<div class="container">
<!-- 内容 -->
</div>
<div> 元素是一个通用的容器，用于组合其他元素。在这个例子中，它被用来创建一个居中的容器。
<h1> 标题元素
<h1>欢迎来到我的网站</h1>
<h1> 元素定义了一个标题，这是网页中最主要的标题。
<p> 段落元素
<p>这是一个展示HTML和CSS基础的简单网站。您可以点击以下链接了解更多信息：</p>
<p> 元素定义了一个段落。
<a> 链接元素
<a href="https://www.example.com">关于我们</a>
<a href="https://www.example.com/contact">联系我们</a>
<a> 元素定义了一个超链接，允许用户跳转到另一个网页。href 属性指定了链接的目标URL。
通过理解这些基本元素和它们的作用，你可以开始创建自己的网页。记住，HTML和CSS是构建网页的基础，随着你技能的提高，你可以学习更多高级的网页设计技术。
