编辑“︁HTML标签语法”︁（章节）

= HTML标签语法 =

HTML（超文本标记语言）是构建网页的基础，而HTML标签则是其核心组成部分。标签用于定义网页的结构和内容，浏览器通过解析这些标签来正确渲染页面。本章节将详细介绍HTML标签的基本语法、常见类型及其使用方法。

== 基本概念 ==

HTML标签是由尖括号（<code><</code>和<code>></code>）包围的关键词，通常成对出现，包括一个开始标签和一个结束标签。结束标签在标签名前加一个斜杠（<code>/</code>）。例如：
<syntaxhighlight lang="html">
<p>这是一个段落。</p>
</syntaxhighlight>

* <code><p></code> 是开始标签。
* <code></p></code> 是结束标签。
* 标签之间的内容（“这是一个段落。”）是元素的内容。

有些标签是自闭合的（也称为空元素），不需要结束标签，例如：
<syntaxhighlight lang="html">
<img src="image.jpg" alt="示例图片">
</syntaxhighlight>

== 标签的组成部分 ==

一个完整的HTML标签通常包含以下部分：
1. **标签名**：定义元素的类型（如<code>p</code>、<code>div</code>、<code>img</code>）。
2. **属性**：提供元素的额外信息，以键值对的形式出现（如<code>src="image.jpg"</code>）。
3. **内容**：标签之间的文本或其他元素（仅适用于非空元素）。

=== 属性 ===
属性用于配置HTML元素的行为或外观。例如：
<syntaxhighlight lang="html">
<a href="https://example.com" target="_blank">访问示例网站</a>
</syntaxhighlight>
* <code>href</code> 是属性名，指定链接的目标URL。
* <code>target="_blank"</code> 是另一个属性，指定链接在新标签页打开。

== 常见HTML标签示例 ==

以下是几种常见的HTML标签及其用途：

=== 1. 标题标签（<code><h1></code>到<code><h6></code>） ===
标题标签用于定义文档的标题，<code><h1></code>是最高级标题，<code><h6></code>是最低级标题。
<syntaxhighlight lang="html">
<h1>主标题</h1>
<h2>次级标题</h2>
<h3>三级标题</h3>
</syntaxhighlight>

=== 2. 段落标签（<code><p></code>） ===
用于定义段落文本：
<syntaxhighlight lang="html">
<p>这是第一段。</p>
<p>这是第二段。</p>
</syntaxhighlight>

=== 3. 链接标签（<code><a></code>） ===
用于创建超链接：
<syntaxhighlight lang="html">
<a href="https://example.com">点击这里</a>
</syntaxhighlight>

=== 4. 图像标签（<code><img></code>） ===
用于插入图像：
<syntaxhighlight lang="html">
<img src="image.jpg" alt="描述文字">
</syntaxhighlight>

=== 5. 列表标签 ===
无序列表（<code><ul></code>）和有序列表（<code><ol></code>）：
<syntaxhighlight lang="html">
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
</syntaxhighlight>

== 嵌套标签 ==

HTML标签可以嵌套使用，即一个标签可以包含其他标签。例如：
<syntaxhighlight lang="html">
<div>
  <h1>标题</h1>
  <p>这是一个段落，包含一个<a href="#">链接</a>。</p>
</div>
</syntaxhighlight>

== 自闭合标签 ==

某些标签不需要闭合，因为它们没有内容。例如：
<syntaxhighlight lang="html">
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
<input type="text"> <!-- 输入框 -->
</syntaxhighlight>

== HTML标签的层级结构 ==

HTML文档是一个树状结构，从根元素<code><html></code>开始，包含<code><head></code>和<code><body></code>。以下是一个简单的HTML文档示例：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    <h1>我的第一个网页</h1>
    <p>欢迎来到我的网站！</p>
  </body>
</html>
</syntaxhighlight>

=== 结构图示 ===
<mermaid>
graph TD
  A[html] --> B[head]
  A --> C[body]
  B --> D[title]
  C --> E[h1]
  C --> F[p]
</mermaid>

== 实际应用案例 ==

以下是一个完整的HTML页面示例，展示标签的实际使用：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
  <head>
    <title>我的个人主页</title>
  </head>
  <body>
    <header>
      <h1>欢迎来到我的主页</h1>
      <nav>
        <a href="#about">关于我</a>
        <a href="#contact">联系</a>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>关于我</h2>
        <p>我是一个网页开发者。</p>
      </section>
      <section id="contact">
        <h2>联系</h2>
        <p>邮箱：example@example.com</p>
      </section>
    </main>
    <footer>
      <p>© 2023 我的主页</p>
    </footer>
  </body>
</html>
</syntaxhighlight>

== 总结 ==

HTML标签是构建网页的基础，通过成对的开始标签和结束标签（或自闭合标签）来定义内容和结构。掌握标签的语法和常见类型是学习HTML的第一步。后续章节将深入介绍CSS和JavaScript如何与HTML结合使用。

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