HTML5中可以省略属性值的11个属性总结

在HTML5中,允许省略属性值的属性主要是布尔类型的属性,这些属性的值为true或false。当省略属性值时,表示该属性的值为true。这些属性在表单元素和页面结构中广泛应用,随着HTML5的发展,它们的使用更加标准化和语义化。

一、应用场景

这些属性主要应用于表单元素的交互控制和页面结构的语义化表达。例如checked用于复选框和单选按钮的默认选中状态,readonly用于限制输入框的编辑权限,disabled用于禁用表单控件。在多媒体元素中,autoplayloop等属性也常用于控制播放行为。

二、发展趋势

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"
相关推荐
其美杰布-富贵-李4 分钟前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
OpenTiny社区6 分钟前
GenUI SDK v1.3.0 发布|多框架兼容,一键换物料,渲染器 & 演练场全面增强!
前端·ai编程
用户938515635078 分钟前
useRef + Web Worker 实战:React 如何优雅地拥抱多线程
前端·javascript·react.js
他们叫我秃子30 分钟前
前端开发转 Go 全栈(五):终于遇到熟人了,Go 的闭包和高阶函数原来这么像 JavaScript
前端·后端·go
用户615958680002232 分钟前
从 0 写一个迷你 wujie:用原生 Web API 实现微前端
前端
妙码生花33 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(五十七):AI时代对组件封装的新理解、agInput 统一入口,动态表单预备
前端·后端·go
fairyly34 分钟前
接手新项目不用硬啃源码,我的 TRAE Work 快速上手实战工作流
前端·ai编程·trae
搬砖记录员35 分钟前
用 PyAutoGUI 手搓录屏"老板键":从原理到四套可跑源码,附工程化落地思考
前端
windliang35 分钟前
Claude Code 源码分析(七):Skill 如何进入 Agent
前端·人工智能·面试
栀鸢ouo36 分钟前
《Vue 3 实现多主题切换和自定义主题》
前端