XHTML 属性

XHTML 中的属性和 HTML 类似，但它们遵循严格的规范。与 HTML 中的宽松写法不同，XHTML 要求属性名必须小写，属性值必须用引号包裹，且属性名和属性值之间必须有一个等号。

1. 属性基础规则

  • 属性名：必须小写。
  • 属性值：必须用双引号或单引号包围，即使属性值为空，也需要写成 attribute=""。
  • 自闭合标签：自闭合标签（如 <img />, <br />, <hr /> 等）必须包含一个斜杠。

2. 常见的 XHTML 属性

以下是一些常见的 XHTML 属性，分别用于不同的 HTML 元素。

2.1 通用属性

  • id：为元素指定一个唯一的标识符，常用于 JavaScript 和 CSS 的选择器。
  • class：为元素指定一个或多个类名，用于 CSS 或 JavaScript 操作。
  • style：用于元素的内联样式，设置该元素的 CSS 样式。
  • title：定义元素的额外信息，通常在用户将鼠标悬停在元素上时显示为提示信息。
  • lang：指定元素内容的语言。
  • dir：指定文本的书写方向，通常使用 ltr（从左到右）或 rtl（从右到左）。

示例：

<div id="content" class="main" style="color: blue;" lang="en" title="这是内容区">
    这是一个包含多个属性的 div 元素。
</div>

2.2 链接属性

  • href：指定超链接的目标地址。
  • target：定义超链接的打开方式，常见值：_blank（新窗口）、_self（当前窗口）等。

示例：

<a href="https://www.example.com" target="_blank">点击这里访问示例网站</a>

2.3 图像属性

  • src：指定图像的源文件路径。
  • alt：提供图像的替代文本，当图像无法加载时显示。
  • width：指定图像的宽度。
  • height：指定图像的高度。

示例：

<img src="logo.png" alt="网站Logo" width="100" height="100" />

2.4 表单元素属性

  • name：为表单控件（如输入框、按钮等）指定名称，便于在提交表单时获取数据。
  • value：为表单控件指定默认值，常用于 <input>、<option> 等元素。
  • placeholder：为输入字段提供占位符文本，提示用户应输入什么内容。
  • type：指定输入元素的类型，如 text、password、submit 等。

示例：

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="请输入用户名" />
    <input type="password" name="password" placeholder="请输入密码" />
    <input type="submit" value="提交" />
</form>

2.5 表格元素属性

  • border：定义表格的边框宽度。
  • cellspacing：定义单元格之间的间距。
  • cellpadding：定义单元格内文本与单元格边框之间的间距。

示例：

<table border="1" cellspacing="5" cellpadding="10">
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

2.6 音频和视频属性

  • src：指定音频或视频文件的路径。
  • controls：显示播放控制器（如播放按钮、暂停按钮等）。
  • autoplay：当页面加载时，自动播放音频或视频。
  • loop：设置音频或视频是否循环播放。

示例：

<audio src="audio.mp3" controls autoplay loop>
    您的浏览器不支持音频元素。
</audio>
<video src="movie.mp4" controls autoplay loop width="320" height="240">
    您的浏览器不支持视频标签。
</video>

2.7 其他常见属性

  • disabled：禁用元素，通常用于表单控件和按钮。
  • readonly：使输入框成为只读，用户无法修改内容。
  • checked：默认选中复选框或单选按钮。
  • required：要求用户在提交表单之前填写该字段。

示例：

<input type="checkbox" name="subscribe" checked />
<input type="text" name="username" readonly />
<input type="submit" value="提交" disabled />

3. XHTML 属性的要求

  1. 属性名和属性值必须小写：
    • 例如，<input TYPE="text"> 是不合法的，应该写成 <input type="text">。
  2. 属性值必须用引号包围：
    • 即使属性值为空，也必须写成 type=""，而不能写成 type=。
  3. 自闭合标签需要斜杠：
    • 所有自闭合标签（如 <img />、<br />、<hr /> 等）必须在标签末尾添加 /。

4. XHTML 和 HTML 属性的区别

虽然大多数属性在 XHTML 和 HTML 中相同，但在 XHTML 中属性值必须用引号包围，且属性名必须小写。HTML 允许属性名不区分大小写，并且有些属性值不需要引号。XHTML 强制要求更严格的规范，以确保文档符合 XML 的要求。

XHTML 示例：

<a href="https://www.example.com" target="_blank">示例链接</a>

HTML 示例（较为宽松）：

<a href=https://www.example.com target=_blank>示例链接</a>

总结

XHTML 的属性必须遵循严格的 XML 规则，包括属性名小写、属性值用引号包围以及自闭合标签的斜杠。在实际开发中，使用 XHTML 编写网页时，确保符合这些属性规范，有助于保证页面的标准化与兼容性。随着 HTML5 的普及，XHTML逐渐不那么常用，但它在需要严格文档结构和与其他 XML 数据格式兼容的场合依然有其应用价值。