布尔属性省略值，如input type="checkbox" checked

在HTML中，布尔属性是指那些只有两种状态的属性：存在或不存在。这些属性通常不需要显式地指定值，因为它们的存在本身就代表了"真"或"启用"的状态。

规范要求

根据HTML5规范，布尔属性可以有四种写法，但只有两种是符合规范的：

符合规范的写法：

1. 只写属性名（推荐）
   html 复制代码

   <input type="checkbox" checked>

2. 属性名等于空字符串
   html 复制代码

   <input type="checkbox" checked="">

不符合规范的写法：

1. 属性名等于属性名（冗余）
   html 复制代码

   <input type="checkbox" checked="checked">

2. 属性名等于任意非空字符串（错误）
   html 复制代码

   <input type="checkbox" checked="true">

常见布尔属性列表

以下是一些常见的布尔属性，它们都应该遵循上述规范：

• checked (用于<input type="checkbox">和<input type="radio">)
• disabled (用于表单元素)
• readonly (用于表单元素)
• required (用于表单元素)
• multiple (用于<select>)
• autoplay (用于媒体元素)
• controls (用于媒体元素)
• loop (用于媒体元素)
• muted (用于媒体元素)
• selected (用于<option>)
• hidden (全局属性)
• contenteditable (全局属性)
• spellcheck (全局属性)

正确与错误示例对比

复选框示例

正确：

<input type="checkbox" checked>
<input type="checkbox" checked="">

错误：

<input type="checkbox" checked="checked">
<input type="checkbox" checked="true">
<input type="checkbox" checked="false"> <!-- 仍然会被解析为checked状态 -->

禁用输入框示例

正确：

<input type="text" disabled>
<button disabled="">提交</button>

错误：

<input type="text" disabled="disabled">
<input type="text" disabled="true">

多选下拉框示例

正确：

<select multiple>
  <option>选项1</option>
  <option>选项2</option>
</select>

错误：

<select multiple="multiple">
  <!-- 内容 -->
</select>

视频自动播放示例

正确：

<video autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

错误：

<video autoplay="autoplay">
  <!-- 内容 -->
</video>

为什么推荐省略值

1. 简洁性：省略值使代码更简洁易读
2. 一致性：符合HTML5规范的标准做法
3. 性能：略微减少文件大小
4. 可维护性：减少不必要的冗余代码

特殊情况说明

虽然大多数情况下推荐完全省略值，但在某些框架或环境中可能需要使用其他形式：

1. XHTML兼容性：在XHTML中，所有属性都必须有值，因此需要使用checked="checked"的形式
2. 某些JavaScript框架：部分框架可能期望特定的属性格式

最佳实践建议

1. 在纯HTML5环境中，优先使用无值的布尔属性写法
2. 在需要XHTML兼容性的环境中，使用属性名="属性名"的形式
3. 避免使用属性名="true"或属性名="false"的形式
4. 保持项目内部的一致性

通过遵循这些规范，可以编写出更标准、更简洁、更易维护的HTML代码。