在HTML5中,允许省略属性值的属性主要是布尔类型的属性,这些属性的值为true或false。当省略属性值时,表示该属性的值为true。这些属性在表单元素和页面结构中广泛应用,随着HTML5的发展,它们的使用更加标准化和语义化。
一、应用场景
这些属性主要应用于表单元素的交互控制和页面结构的语义化表达。例如checked用于复选框和单选按钮的默认选中状态,readonly用于限制输入框的编辑权限,disabled用于禁用表单控件。在多媒体元素中,autoplay、loop等属性也常用于控制播放行为。
二、发展趋势
HTML5标准化了这些布尔属性的使用方式,使得开发者可以更直观地通过属性的存在与否来判断元素状态。随着Web标准的演进,这些属性的语义化程度不断提高,同时在新特性中也得到延续和扩展。
三、可以省略属性值的11个属性说明
1. checked
- 词源含义:来自英语"check",表示"勾选"或"确认"。
- 用法 :用于
<input type="checkbox">或<input type="radio">元素,表示该选项默认被选中。 - 例子:
html
<input type="checkbox" checked>
2. readonly
- 词源含义:来自"read"和"only",表示"只读"。
- 用法 :用于
<input>或<textarea>元素,表示该元素的内容不可编辑。 - 例子:
html
<input type="text" readonly>
3. disabled
- 词源含义:来自"disable",表示"禁用"。
- 用法:用于表单元素,表示该元素不可交互。
- 例子:
html
<button disabled>提交</button>
4. selected
- 词源含义:来自"select",表示"被选中"。
- 用法 :用于
<option>元素,表示该选项默认被选中。 - 例子:
html
<option selected>选项一</option>
5. defer
- 词源含义:来自"defer",表示"延迟"。
- 用法 :用于
<script>标签,表示脚本在文档解析完成后执行。 - 例子:
html
<script defer src="script.js"></script>
6. ismap
- 词源含义:来自"is map",表示"是地图"。
- 用法 :用于
<img>标签,配合<map>使用,表示该图像为客户端图像映射。 - 例子:
html
<img src="map.png" ismap>
7. nohref
- 词源含义:来自"no href",表示"无链接"。
- 用法 :用于
<area>标签,表示该区域不具有链接。 - 例子:
html
<area shape="rect" nohref>
8. noshade
- 词源含义:来自"no shade",表示"无阴影"。
- 用法 :用于
<hr>标签,表示该水平线不显示阴影效果(已废弃)。 - 例子:
html
<hr noshade>
9. nowrap
- 词源含义:来自"no wrap",表示"不换行"。
- 用法:用于表格单元格,表示单元格内容不自动换行。
- 例子:
html
<td nowrap>内容</td>
10. multiple
- 词源含义:来自"multiple",表示"多个"。
- 用法 :用于
<input type="email">或<input type="file">,表示允许选择多个值。 - 例子:
html
<input type="email" multiple>
11. noresize
- 词源含义:来自"no resize",表示"不可调整大小"。
- 用法 :用于
<textarea>,表示该文本域不可调整大小。 - 例子:
html
<textarea noresize></textarea>
以上属性在HTML5中都可以省略属性值,省略后等价于属性值为true。这些属性通常用于控制元素的行为或状态。
四、HTML5中常见的11个可以省略属性值的属性总结列表
| 属性 | 词源及含义 | 用法 | 举例 | 说明 |
|---|---|---|---|---|
| checked | 来自英语"check",表示"勾选"或"确认" | 用于<input type="checkbox">或<input type="radio">元素,表示该选项默认被选中 |
<input type="checkbox" checked> |
省略属性值时等价于checked="checked" |
| readonly | 来自"read"和"only",表示"只读" | 用于<input>或<textarea>元素,表示该元素的内容不可编辑 |
<input type="text" readonly> |
省略属性值时等价于readonly="readonly" |
| disabled | 来自"disable",表示"禁用" | 用于表单元素,表示该元素不可交互 | <button disabled>提交</button> |
省略属性值时等价于disabled="disabled" |
| selected | 来自"select",表示"被选中" | 用于<option>元素,表示该选项默认被选中 |
<option selected>选项一</option> |
省略属性值时等价于selected="selected" |
| defer | 来自"defer",表示"延迟" | 用于<script>标签,表示脚本在文档解析完成后执行 |
<script defer src="script.js"></script> |
省略属性值时等价于defer="defer" |
| ismap | 来自"is map",表示"是地图" | 用于<img>标签,配合<map>使用,表示该图像为客户端图像映射 |
<img src="map.png" ismap> |
省略属性值时等价于ismap="ismap" |
| nohref | 来自"no href",表示"无链接" | 用于<area>标签,表示该区域不具有链接 |
<area shape="rect" nohref> |
省略属性值时等价于nohref="nohref" |
| noshade | 来自"no shade",表示"无阴影" | 用于<hr>标签,表示该水平线不显示阴影效果(已废弃) |
<hr noshade> |
省略属性值时等价于noshade="noshade" |
| nowrap | 来自"no wrap",表示"不换行" | 用于表格单元格,表示单元格内容不自动换行 | <td nowrap>内容</td> |
省略属性值时等价于nowrap="nowrap" |
| multiple | 来自"multiple",表示"多个" | 用于<input type="email">或<input type="file">,表示允许选择多个值 |
<input type="email" multiple> |
省略属性值时等价于multiple="multiple" |
| noresize | 来自"no resize",表示"不可调整大小" | 用于<textarea>,表示该文本域不可调整大小 |
<textarea noresize></textarea> |
省略属性值时等价于noresize="noresize" |