XHTML 元素

XHTML 代表可扩展超文本标记语言，是遵守更严格规则和 XML 标准的 HTML 版本。 这些规则格式化 Web 文档，以便它们始终如一地格式化和良好结构化。 在本教程中，我们将研究构成 XHTML 的各种元素，它们的作用，以及您应该如何将它们与您的网页一起使用。

块级元素

块级元素是您网页的真正构建块。 它们占据所有可用的宽度，并且始终从新行开始，因此它们非常适合创建内容的主要结构区域。

<div> 元素

<div> 元素可能是 XHTML 中最通用的元素。 将其视为将其他元素组合在一起的分组设备。 它本身没有固有的样式，但当与 CSS 或 JavaScript 结合使用时，它会真正发挥作用。 一个很好的例子是使用 <div> 包装您想要与页面其余部分样式不同的内容部分。

为此，<div> 将标题和段落组合在一起，允许它们作为一个整体进行样式设置或操作。 在此示例中，<div> 将标题和段落分组在一起，因此允许它们作为一个整体进行样式设置或操作

<p> 元素

段落实际上是由 <p> 元素定义的。 它是几乎任何您将在任何网页上编写的文本内容的最基本标签之一。 当您将文本包装在 <p> 中时，您实际上是在说“嘿浏览器，将其视为独立的文本块。”。

段落允许您的文本至少被布局和可读。

标题：<h1> 到 <h6>

标题对于构建您的内容并赋予其层次结构绝对必要。 通常，<h1> 元素将用于标记页面的主标题，而 <h2> 到 <h6> 用于重要性递减的子标题。

这种层次结构不仅可以帮助读者清楚地了解内容的结构，而且有利于可访问性和 SEO。

列表：<ul> 和 <ol>

列表是组织项目或信息的好方法。 无序列表 (<ul>) - 使用项目符号，有序列表 (<ol>) - 数字。

列表是一种更简单的内容扫描方式，非常适合指令、功能或任何类型的分组信息。

<table> 元素

表格用于将内容结构化为行和列。 它们非常适合任何适合网格结构的内容。

每个定义一个表格行，在行内有几个定义标题单元格或定义标准数据单元格。

<blockquote> 元素

当您需要在内容中包含来自其他人或某物的某种长度的引文时，您想要使用的是 <blockquote> 元素。 通常会缩进以使其与内容的其余部分分开。

使用 <blockquote> 清楚地表明您正在引用其他人，并且 cite 属性允许包含指向源的 URL。

内联元素

内联元素是那些在块级元素中使用以样式化或格式化其内容的特定部分而不破坏文本流的元素。

<span> 元素

<span> 元素是内联的，很像 <div>，但它用于内联内容。 它非常适合将样式或脚本应用于文本的特定部分。

在此示例中，<span> 元素将允许更改段落中单个单词的颜色。

<a> 元素

<a> 元素，或锚点，是制作超链接的原因。 这些可以链接到另一个页面、同一页面的另一部分，或者可能触发脚本。

超链接构成了 Web 上导航的本质，<a> 元素是制作它们的标签。

<img> 元素

<img> 元素用于将图像嵌入到您的网页中。 始终包含 alt 属性是一个好习惯，为图像提供替代文本，如果它没有显示。

这是一种更易于访问的创建网页的方式，也针对搜索引擎进行了优化。

<strong> 和 <em> 元素

这些元素用于强调文本。 <strong> 表示强烈的重要性，而 <em> 表示强调。

这些元素为用户和搜索引擎提供含义和上下文。

<br> 元素

<br> 元素用于在不开始新段落的情况下换行

<br> 元素对于地址、诗歌或任何其他需要精确换行的内容很有用。

<code> 和 <pre> 元素

<code> 元素表示内联代码，而 <pre> 元素表示预格式化的文本块。 为了显示格式化的代码，首选 <pre> 元素，因为它保持空格和换行符。

表单和输入

表单是用户与 Web 交互的最基本方式。 它们允许用户将他们的数据提交到您的站点。

<form> 元素

<form> 元素是所有表单元素的容器。 它指定应如何以及在何处提交表单数据。

在上面的示例中，当单击提交按钮时，表单将向 submit.php 发送 POST 请求。

输入元素

有几个输入元素，每个元素用于不同类型的用户输入。

• 文本输入：<input type="text" />
• 密码输入：<input type="password" />
• 复选框：<input type="checkbox" />
• 单选按钮：<input type="radio" />
• 输入按钮：<input type="submit" />

这些是不同类型的输入元素，它们从用户那里收集不同类型的数据。

XHTML 中的多媒体元素

多媒体元素是那些构建丰富、引人入胜的网页的元素。 在 XHTML 中，提供了许多元素来嵌入多媒体，例如网页本身中的图像、视频和音频文件。

<audio> 元素

<audio> 元素用于将音频文件嵌入到您的网页中。 它支持多种音频文件格式，如 MP3、WAV、Ogg 等。

在此示例中，<audio> 元素有多个源。 这是为了与更多浏览器兼容。 controls 属性添加了播放、暂停和音量控制。

<video> 元素

<video> 元素用于嵌入视频文件。 它支持 MP4、WebM 和 Ogg 文件格式。

在此示例中，<video> 元素定义了视频的尺寸，并包括播放/暂停控件。 提供了多个源以实现兼容性

<object> 元素

<object> 元素嵌入外部资源，其中包括多媒体文件、PDF 和其他 Web 文档。 此示例代码将 PDF 文档直接嵌入到网页中，并提供备用链接，以防某些浏览器可能无法正确呈现嵌入的 PDF。 可访问性考虑因素。

可访问性注意事项

开发网页的一个重要方面是确保您的页面可供所有用户访问，包括那些有残疾的用户。

XHTML 元素中的许多设施可以以增强可访问性的方式使用。

使用“alt”属性

Alt 属性在您的 <img> 元素中放置 alt 属性和描述屏幕阅读器图像的文本。

alt 文本应提供足够的描述，以允许无法查看图像的用户了解图像的目的和内容。

语义 HTML

添加语义 HTML 元素，这些元素为您的内容提供有意义的结构。 这将使屏幕阅读器和其他辅助技术能够了解网页上的信息组织或呈现的上下文。