XHTML 元素

在 XHTML 中，元素是由标签（标签对或自闭合标签）和内容组成的。与传统的HTML元素不同，XHTML要求元素必须遵循严格的规则：标签必须正确闭合、元素名和属性名必须小写、属性值必须用引号括起来等。以下是XHTML中的一些常见元素及其使用规范。

1. 文档结构元素

<html>

  • 定义整个HTML文档的根元素。
  • 必须包含 xmlns 属性，指定文档的XML命名空间。
<html xmlns="http://www.w3.org/1999/xhtml">
    ...
</html>

<head>

  • 包含文档的元数据，如字符集、标题、样式和脚本。
<head>
    <meta charset="UTF-8" />
    <title>页面标题</title>
</head>

<body>

  • 包含文档的主体内容，是网页内容的主要区域。
<body>
    <h1>这是页面的主要内容</h1>
    <p>段落内容</p>
</body>

2. 文本格式化元素

<h1> - <h6>

  • 定义标题元素，<h1>为最大，<h6>为最小。
<h1>这是主标题</h1>
<h2>这是副标题</h2>

<p>

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

<b> 和 <strong>

  • <b> 用于加粗文本，但不具有语义。
  • <strong> 用于加重文本的语气，通常以加粗显示。
<b>这部分文本会加粗。</b>
<strong>这是强调文本。</strong>

<i> 和 <em>

  • <i> 用于斜体文本，没有语义作用。
  • <em> 用于强调文本，通常以斜体显示。
<i>这部分文本会斜体显示。</i>
<em>这是强调的文本。</em>

<br />

  • 插入换行符（自闭合标签）。
<p>第一行<br />第二行</p>

<hr />

  • 插入水平线（自闭合标签）。
<hr />

3. 链接和图像元素

<a>

  • 定义超链接，href 属性指定链接目标。
<a href="https://www.example.com">点击这里访问示例网站</a>

<img />

  • 定义图像，必须包括 src（图像源）和 alt（替代文本）属性。
<img src="image.jpg" alt="描述文字" />

4. 列表元素

<ul>

  • 定义无序列表，使用 <li> 作为列表项。
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

<ol>

  • 定义有序列表，列表项 <li> 按顺序排列。
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

<li>

  • 定义列表项，<li> 元素是 <ul> 或 <ol> 的子元素。
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

5. 表格元素

<table>

  • 定义表格。
<table>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

<tr>

  • 定义表格行（必须包含在 <table> 标签内）。
<tr>
    <td>行1单元格1</td>
    <td>行1单元格2</td>
</tr>

<td>

  • 定义表格单元格。
<td>表格单元格内容</td>

<th>

  • 定义表头单元格，通常以加粗和居中的方式显示。
<th>表头单元格</th>

6. 表单元素

<form>

  • 定义表单，通常包含各种输入字段。
<form action="/submit" method="post">
    ...
</form>

<input />

  • 定义用户输入字段，可以设置多种类型（文本框、密码框、按钮等）。
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="提交" />

<textarea>

  • 定义多行文本框。
<textarea name="message" rows="4" cols="50">在这里输入信息</textarea>

<button>

  • 定义按钮。
<button type="submit">提交</button>

<select>

  • 定义下拉列表。
<select name="country">
    <option value="us">美国</option>
    <option value="cn">中国</option>
</select>

<option>

  • 定义下拉列表中的一个选项。
<option value="us">美国</option>

7. 嵌套和布局元素

<div>

  • 定义一个块级元素，用于结构化布局。<div> 本身没有任何意义，通常用于分组内容或应用样式。
<div>
    <h2>标题</h2>
    <p>这是一段文本。</p>
</div>

<span>

  • 定义一个行内元素，通常用于对文本的部分应用样式。
<span style="color:red;">红色文本</span>

<section>

  • 定义文档中的一个区域或部分，通常用于主题内容的分区。
<section>
    <h2>部分标题</h2>
    <p>这部分内容属于一个特定主题。</p>
</section>

<article>

  • 定义独立的内容块，通常是具有独立意义的内容（如文章、博客等）。
<article>
    <h2>文章标题</h2>
    <p>文章内容。</p>
</article>

<aside>

  • 定义与主要内容相关但不直接关联的部分，通常用于侧边栏。
<aside>
    <h2>侧边栏标题</h2>
    <p>这部分内容与主内容相关。</p>
</aside>

8. XHTML自闭合标签规范

XHTML要求所有自闭合标签必须加上斜杠（/），例如：

  • <img src="image.jpg" alt="描述" />
  • <br />
  • <hr />

总结

XHTML的核心要求是严格遵守XML语法规则，确保所有的标签、属性值、属性名等遵循正确的格式。XHTML的结构和元素大致与HTML相似，但语法上更为严格，要求每个标签都必须闭合，每个属性值都必须加引号，并且标签名和属性名必须小写。在现代Web开发中，虽然HTML5成为主流，但在一些特定环境（如嵌入式系统或需要与XML兼容的环境）中，XHTML仍然有它的应用场景。