HTML – XHTML – 来学习啦 – 编程乐园，实战驱动的编程学习平台

HTML – XHTML

天天向上

发布： 2025-02-23 13:24:48

原创

946 人浏览过

XHTML 是以 XML 格式编写的 HTML，学习 XHTML 是 HTML 发展的一个重要步骤！XHTML 是一种更严格的 HTML 规范，它结合了 XML 的规则，要求文档必须是完全符合语法的。本文会做详细的介绍，帮助你深入学习 XHTML。我们可以从基础语法、实例演示、以及一些常见的注意事项开始。这里有几个核心内容，你可以参考：

1. XHTML 文档结构

XHTML 强制要求文档结构符合严格的 XML 规范。下面是一个简单的 XHTML 文档结构示例：

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
    <meta charset="UTF-8" />
    <title>XHTML 示例</title>
</head>
<body>
    <h1>欢迎来到 XHTML 页面</h1>
    <p>这是一个 XHTML 文档。</p>
</body>
</html>

关键点：

XML 声明：<?xml version="1.0" encoding="UTF-8"?> 表示这是一个 XML 文件，必须出现在文件的最开始。
DOCTYPE 声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 是 XHTML 的标准文档类型声明，要求使用严格模式。
命名空间声明：<html xmlns="http://www.w3.org/1999/xhtml">，指定 XHTML 的命名空间。

2. 标签和属性要求

所有标签名必须小写。比如，<h1> 而不是 <H1>。
所有标签必须闭合。例如，<br />，<img />，以及 <hr /> 都必须在自闭合标签后加上 /。
所有属性值必须加引号。例如，<a href="https://www.example.com">点击这里</a>。

3. 标签闭合

在 XHTML 中，所有的 HTML 标签必须是完全闭合的，包括自闭合标签。例如：

<br />
<img src="image.jpg" alt="图片描述" />

4. XHTML 中的链接与表单

XHTML 对链接和表单标签有严格要求：

<form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" />
    <input type="submit" value="提交" />
</form>

关键点：

表单中的 label 标签必须与输入框通过 for 属性关联。
所有的 <input> 标签必须正确闭合。

5. 严格嵌套规则

在 XHTML 中，标签必须严格嵌套。如果你写了一个 <div> 标签，并且该标签内包含 <p> 标签，那么 <p> 必须正确放在 <div> 内部，不得出现不符合 XML 规范的嵌套。举个例子：

<div>
    <p>这是一段文本。</p>
</div>

6. 处理缺失或多余的闭合标签

在标准 HTML 中，一些标签如果没有闭合，也会被浏览器自动处理，但在 XHTML 中，必须手动闭合所有标签，任何不符合的地方都会导致页面无法正确渲染。

7. 实例解析

让我们看一个带有一些常见 XHTML 特性的小示例：

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
    <meta charset="UTF-8" />
    <title>XHTML 示例</title>
</head>
<body>
    <h1>我的博客</h1>
    <p>欢迎来到我的博客。这是一个 XHTML 示例。</p>

    <ul>
        <li><a href="https://example.com">首页</a></li>
        <li><a href="https://example.com/about">关于我</a></li>
    </ul>

    <hr />
    <img src="image.jpg" alt="图片描述" />

    <form action="submit.php" method="post">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

说明：

XML 声明：这是一个典型的 XHTML 文件的开始部分，告诉浏览器这是一个 XML 文档，并指定字符编码。
DOCTYPE：明确文档遵循的标准。
标签闭合：所有标签（包括自闭合标签如 <br />, <img />, <hr />）都按照 XML 规则正确闭合。

小结：

XHTML 比 HTML 严格，但它也帮助开发者更好地理解 HTML 的结构，确保页面在不同平台上渲染时更稳定。