零基礎(chǔ)速記 HTML Boolean 屬性
——編程獅(w3cschool.cn)3 分鐘背完、直接上手
一句話記住
只要寫了屬性名,值就是true
;想表示false
,就干脆別寫這個屬性。
一、什么是 Boolean 屬性?
- 不寫值 或 值等于屬性名本身,都表示
true
。 - 根本不存在 這個屬性,則表示
false
。 - 官方叫 “
布爾屬性
”,也叫 “開關(guān)屬性
”。
二、常見 Boolean 屬性一覽(收藏級)
屬性 | 元素 | 作用 | 示例 |
---|---|---|---|
disabled |
<input> <button> <select> … |
禁用控件 | <input disabled> |
checked |
<input type=checkbox/radio> |
默認選中 | <input checked> |
selected |
<option> |
默認選中 | <option selected> |
readonly |
<input> <textarea> |
只讀 | <input readonly> |
multiple |
<select> <input type=file> |
多選 | <select multiple> |
required |
<input> <textarea> <select> |
必填 | <input required> |
autofocus |
<input> <button> <select> <textarea> |
頁面加載后自動聚焦 | <input autofocus> |
hidden |
全局屬性 | 隱藏元素 | <div hidden> |
async |
<script> |
異步加載腳本 | <script async src="…"> |
defer |
<script> |
延遲執(zhí)行腳本 | <script defer src="…"> |
loop |
<audio> <video> |
循環(huán)播放 | <video loop> |
muted |
<audio> <video> |
靜音 | <audio muted> |
controls |
<audio> <video> |
顯示控制條 | <video controls> |
autoplay |
<audio> <video> |
自動播放 | <video autoplay> |
novalidate |
<form> |
關(guān)閉瀏覽器校驗 | <form novalidate> |
三、四種寫法對比(全部合法,但第 1 種最簡潔)
寫法 | 含義 | 推薦度 |
---|---|---|
<input disabled> |
true ? | ??? |
<input disabled=""> |
true ? | ?? |
<input disabled="disabled"> |
true ? | ? |
<input disabled="false"> |
仍是 true! | ? |
注意
寫disabled="false"
并不會變成false
,因為只要出現(xiàn)屬性名就是true
。
四、實戰(zhàn) 30 秒
在 編程獅HTML在線編輯器 輸入:
<!doctype html>
<input type="checkbox" checked> 默認選中<br>
<input type="checkbox"> 未選中<br>
<input type="text" placeholder="正常">
<input type="text" placeholder="禁用" disabled>
運行后 → 第一個復選框默認打鉤,第二個未打鉤;第二個文本框無法輸入。
五、記憶口訣
“布爾屬性像開關(guān),寫了就 ON,不寫就 OFF?!?/p>