### HTML基础知识详解
#### 一、HTML文档的基本结构
HTML（HyperText Markup Language）是一种标记语言，用于构建网页。在了解HTML之前，首先要熟悉HTML文档的基本结构，这有助于更好地理解和运用HTML。
##### 1. `<!DOCTYPE>` 文档类型声明
- **作用**：位于文档最前面，用于告诉浏览器当前文档采用哪种HTML或XHTML标准。
- **示例**：`<!DOCTYPE html>` 或 `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
- **重要性**：确保浏览器正确解析文档，避免出现兼容性问题。
##### 2. `<html>` 根标记
- **位置**：位于`<!DOCTYPE>`之后。
- **功能**：标识整个HTML文档的开始与结束。
- **示例**：
```html
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
```
##### 3. `<head>` 头部标记
- **位置**：位于`<html>`标记之后。
- **功能**：包含关于文档的信息，但不直接显示在页面上。
- **常见子标记**：
- `<title>`：定义网页的标题。
- `<meta>`：定义页面的元信息，如字符集、视口设置等。
- `<link>`：连接外部样式表文件。
- `<style>`：定义内联样式。
- **示例**：
```html
<head>
<title>我的第一个网页</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<style>
body { background-color: lightblue; }
</style>
</head>
```
##### 4. `<body>` 主体标记
- **位置**：位于`<head>`之后。
- **功能**：定义HTML文档所要显示的实际内容。
- **示例**：
```html
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个网页。</p>
<img src="image.jpg" alt="示例图片">
</body>
```
#### 二、HTML标记分类
HTML标记根据其使用方式，可以分为双标记和单标记两种。
##### 1. 双标记
- **定义**：由开始标记和结束标记组成。
- **示例**：
```html
<p>这是一个段落。</p>
```
##### 2. 单标记
- **定义**：仅由一个标记组成，通常表示某种特定功能。
- **示例**：
```html
<br />
<hr />
```
#### 三、文本和布局标记
##### 1. 标题标记
- **标记**：`<h1>` 至 `<h6>`。
- **作用**：定义不同级别的标题。
- **示例**：
```html
<h1>一级标题</h1>
<h2>二级标题</h2>
```
##### 2. 段落标记
- **标记**：`<p>`。
- **作用**：定义一个段落。
- **示例**：
```html
<p>这是一个段落。</p>
```
#### 四、头部相关标记
##### 1. `<title>` 标记
- **作用**：定义网页标题。
- **示例**：
```html
<title>我的网页</title>
```
##### 2. `<meta>` 标记
- **作用**：定义页面元信息，如字符集、关键词等。
- **示例**：
```html
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
```
通过以上内容的学习，我们可以了解到HTML文档的基本结构和常用标记，这对于构建基本的网页是非常重要的基础。掌握这些基础知识后，还可以进一步学习更高级的HTML特性，以及如何结合CSS和JavaScript来创建更加动态和交互式的网页。
