编辑“︁HTML元素”︁（章节）

= HTML元素 =

'''HTML元素'''是构成HTML文档的基本构建块，它们定义了网页的结构和内容。每个元素由标签、属性和内容组成，用于描述不同类型的网页组件，如标题、段落、图像、链接等。

== 基本结构 ==
一个典型的HTML元素由以下部分组成：
* '''开始标签'''（Opening tag）：标记元素的开始，包含元素名称（如`<p>`表示段落）。
* '''内容'''（Content）：元素的实际内容，可以是文本或其他HTML元素。
* '''结束标签'''（Closing tag）：标记元素的结束，与开始标签相同但带有斜杠（如`</p>`）。

有些元素是'''空元素'''（Void elements），不需要结束标签，例如`<img>`和`<br>`。

=== 语法示例 ===
<syntaxhighlight lang="html">
<!-- 带有内容和结束标签的元素 -->
<p>这是一个段落。</p>

<!-- 空元素 -->
<img src="image.jpg" alt="示例图片">
</syntaxhighlight>

== 元素类型 ==
HTML元素可以分为以下几类：

=== 1. 块级元素（Block-level Elements） ===
块级元素独占一行，通常用于构建页面的大块结构，如`<div>`、`<h1>`-`<h6>`、`<p>`等。

<syntaxhighlight lang="html">
<div>
    <h1>主标题</h1>
    <p>这是一个段落。</p>
</div>
</syntaxhighlight>

=== 2. 行内元素（Inline Elements） ===
行内元素不独占一行，通常用于修饰文本或其他内容，如`<span>`、`<a>`、`<strong>`等。

<syntaxhighlight lang="html">
<p>这是一个包含<strong>加粗文本</strong>和<a href="#">链接</a>的段落。</p>
</syntaxhighlight>

=== 3. 空元素（Void Elements） ===
空元素没有内容，通常用于嵌入资源或插入换行，如`<img>`、`<br>`、`<input>`等。

<syntaxhighlight lang="html">
<img src="logo.png" alt="网站标志">
<br>
<input type="text" placeholder="输入内容">
</syntaxhighlight>

== 元素嵌套 ==
HTML元素可以嵌套在其他元素中，形成层级结构。嵌套必须遵循正确的顺序，即内层元素的结束标签必须在外层元素的结束标签之前。

=== 正确嵌套示例 ===
<syntaxhighlight lang="html">
<div>
    <p>这是一个嵌套在<div>中的段落。</p>
</div>
</syntaxhighlight>

=== 错误嵌套示例 ===
<syntaxhighlight lang="html">
<div>
    <p>这是一个错误的嵌套示例。</div>
</p>
</syntaxhighlight>

== 属性 ==
HTML元素可以包含'''属性'''，用于提供额外信息或配置元素的行为。属性通常以键值对的形式出现在开始标签中。

=== 常见属性 ===
* `id`：为元素指定唯一标识符。
* `class`：为元素指定一个或多个类名，用于CSS或JavaScript。
* `style`：为元素指定内联CSS样式。
* `src`：指定外部资源的URL（如图像或脚本）。
* `href`：指定链接的目标URL。

<syntaxhighlight lang="html">
<a id="home-link" class="nav-link" href="/home" style="color: blue;">首页</a>
</syntaxhighlight>

== 实际案例 ==
以下是一个简单的HTML页面，展示了多种HTML元素的使用：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>主页内容</h2>
            <p>这是一个示例段落。</p>
            <img src="example.jpg" alt="示例图片">
        </section>
    </main>
    <footer>
        <p>© 2023 我的网站</p>
    </footer>
</body>
</html>
</syntaxhighlight>

== 元素层级关系 ==
HTML文档中的元素形成树状结构，称为'''DOM树'''（Document Object Model）。以下是一个简单的DOM树示例：

<mermaid>
graph TD
    html[<html>] --> head[<head>]
    html --> body[<body>]
    head --> title[<title>]
    body --> header[<header>]
    body --> main[<main>]
    body --> footer[<footer>]
    header --> h1[<h1>]
    header --> nav[<nav>]
    nav --> ul[<ul>]
    ul --> li1[<li>]
    ul --> li2[<li>]
    li1 --> a1[<a>]
    li2 --> a2[<a>]
</mermaid>

== 数学表示 ==
HTML元素可以形式化表示为：
<math>
E = (T_a, A, C, T_c)
</math>
其中：
* <math>T_a</math> 是开始标签，
* <math>A</math> 是属性集合，
* <math>C</math> 是内容，
* <math>T_c</math> 是结束标签。

对于空元素：
<math>
E_{void} = (T_a, A)
</math>

== 总结 ==
HTML元素是网页的基础，理解它们的类型、属性和嵌套规则对于构建有效的HTML文档至关重要。通过合理使用元素，可以创建结构清晰、语义明确的网页。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML基础]]