HTML元素

在本章节中，我们将学习HTML元素的概念和使用方法，这是HTML的核心基础。

1. 什么是HTML元素？

HTML元素是HTML文档的基本构建块，由开始标签、内容和结束标签组成。

<标签名 属性="值">内容</标签名>

例如：

<p>这是一个段落元素。</p>

2. HTML元素的组成部分

一个完整的HTML元素通常包括：

组成部分	描述	示例
开始标签	标记元素的开始，包含元素名称和属性	`<p>`
属性	提供元素的额外信息，可选	`class="paragraph"`
内容	元素包含的文本或其他元素	`这是一个段落元素。`
结束标签	标记元素的结束，包含斜杠和元素名称	`</p>`

3. 常见的HTML元素

让我们来看一些常见的HTML元素示例：

段落元素

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

标题元素

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

链接元素

<a href="https://www.zhankeng.com">这是一个链接</a>

图像元素

<img src="image.jpg" alt="描述文本">

4. 空元素（自闭合元素）

有些HTML元素没有内容，也不需要结束标签，这些元素称为空元素或自闭合元素。

常见的空元素包括：

<br> - 换行符
<hr> - 水平线
<img> - 图像
<input> - 输入框
<meta> - 元标签
<link> - 链接外部资源

空元素的语法：

<标签名 属性="值">

或者（HTML5推荐的写法）：

<标签名 属性="值" />

5. HTML元素的嵌套

HTML元素可以嵌套，即一个元素可以包含另一个元素。

<div>
    <h2>标题</h2>
    <p>段落文本，<strong>这里是粗体</strong>，<em>这里是斜体</em>。</p>
</div>

嵌套规则

必须正确嵌套，不能交叉嵌套
每个开始标签必须有对应的结束标签
空元素不需要结束标签

错误的嵌套示例：

<p>这是一个段落<strong>这里是粗体</p></strong>

正确的嵌套示例：

<p>这是一个段落<strong>这里是粗体</strong></p>

6. HTML元素的属性

属性提供了HTML元素的额外信息，它们总是在开始标签中指定。

属性的语法

<标签名 属性名="属性值">内容</标签名>

常见属性

属性名	描述	示例
id	元素的唯一标识符	`id="header"`
class	元素的类名，用于样式或JavaScript	`class="container"`
src	资源的URL（用于图像、音频等）	`src="image.jpg"`
href	链接的目标URL	`href="https://www.zhankeng.com"`
alt	图像的替代文本	`alt="描述文本"`
title	元素的提示文本	`title="这是一个提示"`

7. HTML元素的分类

HTML元素可以根据其显示方式分为两类：

块级元素

独占一行空间
可以设置宽度、高度、内外边距
可以包含其他块级元素和内联元素

常见的块级元素：

<div> - 容器
<h1> 到 <h6> - 标题
<p> - 段落
<ul>, <ol>, <li> - 列表
<table> - 表格
<form> - 表单

内联元素

只占据内容所需的空间
不能设置宽度、高度、上下边距
只能包含文本或其他内联元素

常见的内联元素：

<span> - 文本容器
<a> - 链接
<strong>, <b> - 粗体
<em>, <i> - 斜体
<img> - 图像
<input> - 输入框
<button> - 按钮

8. HTML元素实战

让我们创建一个包含多种HTML元素的简单页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML元素示例</title>
</head>
<body>
    <h1>HTML元素学习</h1>
    
    <div class="content">
        <h2>1. 段落和文本格式化</h2>
        <p>这是一个<strong>粗体</strong>文本示例，这是一个<em>斜体</em>文本示例。</p>
        <p>这是另一个段落，包含<u>下划线</u>和<del>删除线</del>文本。</p>
        
        <h2>2. 列表</h2>
        <h3>无序列表</h3>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        
        <h3>有序列表</h3>
        <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>
        
        <h2>3. 链接和图像</h2>
        <p>访问我们的网站：<a href="https://www.zhankeng.com">站坑网</a></p>
        <img src="https://via.placeholder.com/200" alt="占位图像" title="这是一个占位图像">
        
        <h2>4. 水平线和换行</h2>
        <p>这是第一行文本<br>这是第二行文本</p>
        <hr>
        <p>这是水平线下方的文本。</p>
    </div>
</body>
</html>

9. 常见问题解答

Q: 什么是自闭合元素？

A: 自闭合元素是没有内容的HTML元素，不需要结束标签，如<br>、<img>等。

Q: 元素和标签有什么区别？

A: 标签是HTML元素的一部分，开始标签和结束标签组成了HTML元素，元素还包括内容和属性。

Q: 为什么要正确嵌套HTML元素？

A: 正确嵌套HTML元素可以确保浏览器正确渲染页面，避免显示错误，同时也有利于SEO和代码维护。

10. 练习项目

创建一个HTML文件，包含以下元素：
- 页面标题为"HTML元素练习"
- 一级标题
- 三个段落，包含不同的文本格式化（粗体、斜体、下划线）
- 一个无序列表，包含3个列表项
- 一个有序列表，包含3个列表项
- 一个链接，指向站坑网
- 一个图像（可以使用占位图像）
- 一个水平线
- 至少一个换行符
在浏览器中打开文件，验证显示效果

11. 小结

HTML元素是HTML文档的基本构建块
完整的HTML元素由开始标签、内容和结束标签组成
空元素没有内容，不需要结束标签
HTML元素可以嵌套，但必须正确嵌套
属性提供元素的额外信息
HTML元素分为块级元素和内联元素

在下一章节中，我们将学习HTML属性的详细知识。