### HTML、XHTML 和 CSS 入门指南
#### 一、HTML 概述
HTML (HyperText Markup Language) 是一种标记语言，用于构建网页的基本结构。它由一系列的元素组成，这些元素通过标签来表示。HTML 文件是纯文本格式，可以使用任何文本编辑器创建或编辑。
**HTML 的发展历程：**
- **HTML 1.0** (1993): 最初版本，定义了基本的文档结构。
- **HTML 2.0** (1995): 定义了一些新的元素和属性。
- **HTML 3.2** (1997): 引入了表格和字体样式等新特性。
- **HTML 4.01** (1999): 当前广泛使用的标准之一，增加了对多媒体的支持，并改进了表单处理功能。
- **XHTML 1.0** (2000): 基于 XML 的 HTML 版本，强调严格的语法。
- **HTML5** (2014): 最新标准，引入了许多新特性，如视频和音频支持、画布绘图、离线存储等。
**HTML 文档结构：**
- `<html>`: 根元素，所有其他元素都在其内部。
- `<head>`: 包含文档元数据，如标题、样式表链接、脚本等。
- `<body>`: 包含文档的主要内容，包括文本、图像和其他媒体。
**基本标签示例：**
```html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一段文本。</p>
<img src="image.jpg" alt="图片描述">
</body>
</html>
```
#### 二、XHTML 介绍
XHTML (Extensible HyperText Markup Language) 是 HTML 的一个更加严格和清晰的版本，它是基于 XML 的。XHTML 的目标是提高文档的一致性和可读性，使它们更易于解析和处理。
**XHTML 的特点：**
- **严格的语法**：要求所有的标签都必须闭合。
- **小写标签**：XHTML 使用小写字母来编写标签。
- **自闭合标签**：像 `<br>` 这样的单标签需要写成 `<br />`。
- **属性值必须加引号**：所有属性值都必须放在引号内。
- **XML 命名空间**：允许在一个文档中使用多个命名空间。
**XHTML 与 HTML 的区别：**
- XHTML 是基于 XML 的，而 HTML 不是。
- XHTML 要求所有标签必须闭合。
- XHTML 的语法更加严格。
**XHTML 示例：**
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>我的 XHTML 页面</title>
</head>
<body>
<h1>欢迎来到我的 XHTML 网站</h1>
<p>这是我的第一段文本。</p>
<img src="image.jpg" alt="图片描述" />
</body>
</html>
```
#### 三、CSS 基础
CSS (Cascading Style Sheets) 是一种用来描述 HTML 或 XML 文档样式的语言。它可以控制页面布局、颜色、字体等各种外观属性。
**CSS 的优点：**
- **更好的控制**：可以精确地控制每个元素的样式。
- **代码复用**：可以通过外部样式表将样式应用于多个 HTML 页面。
- **分离内容与表现**：将样式与 HTML 结构分开，使得维护更加简单。
**CSS 选择器类型：**
- **类型选择器**：匹配特定类型的元素，如 `p`。
- **类选择器**：匹配带有特定类名的元素，如 `.example`。
- **ID 选择器**：匹配带有特定 ID 的元素，如 `#unique`。
- **后代选择器**：匹配某个元素的子元素或后代元素，如 `div p`。
**CSS 属性示例：**
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
font-size: 16px;
line-height: 1.5;
}
```
**外部样式表的使用：**
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一段文本。</p>
</body>
</html>
```
以上内容概述了 HTML、XHTML 和 CSS 的基础概念及其使用方法，这对于刚接触网页开发的新手来说是非常宝贵的资源。掌握这些基础知识后，可以进一步学习更高级的 Web 开发技术，如 JavaScript、jQuery 等。
