慕少3449830 ·HTML 屬性
本章介紹 HTML 的標(biāo)簽內(nèi)屬性控制方式以及幾種通用的屬性的簡單介紹。屬性是 HTML 標(biāo)簽內(nèi)提供的附加信息，一般用于描述標(biāo)簽或者控制標(biāo)簽的展現(xiàn)形式。
屬性大部分情況下以鍵值對方式出現(xiàn)，比如 key='value'。
1. 全局屬性
全局屬性是大部分標(biāo)簽都可以使用的屬性，常用到的有以下 8 個(gè)：
- accesskey
- class
- id
- lang
- style
- tabindex
- dir
- title
下面我們具體來看一下他們的用法。
1.1 accesskey
accessKey 屬性定義了使元素獲得焦點(diǎn)的快捷鍵。
例如，定義了一組表單元素 ：
<input type="text" accesskey='h' value="按下alt+h"/><br/>
<a href='http://www.baidu.com' accesskey="a">按下alt+a</a><br/>
<button accesskey="b">按下alt+b</button><br/>
<label accesskey="c">按下alt+c</label><br/>
<legend accesskey="d">按下alt+d</legend><br/>
<textarea accesskey="g">按下alt+g</textarea>
在瀏覽器中，當(dāng)你同時(shí)按下 ALT+h 鍵，焦點(diǎn)會自動(dòng)切換到上邊的表單標(biāo)簽。
目前有 <a> <area> <button> <input> <label> <legend> <textarea>元素支持 accessKey 屬性。
1.2 class
class 屬性規(guī)定了元素的類名，類名命名必須以字母為開頭，內(nèi)容中可以包含大小寫字母和下劃線("_")或者橫杠("-")，類名是區(qū)分大小寫的，類名可以定義多個(gè)，以 “ ” 空格隔開，例如定義了段落元素。
<p class="class1 class2 class3"></p>
相當(dāng)于給 p 元素定義了 class1 class2 class3 3個(gè)類。
給元素定義類相當(dāng)于給元素打了個(gè)標(biāo)簽，在 JavaScript 中操作 DOM 提供了便捷，例如可以通過：
<p class="class1 class2 class3">我是一個(gè)段落</p>
<button onclick='hideTest()'>點(diǎn)擊隱藏</button>
<button onclick='showTest()'>點(diǎn)擊顯示</button>
<script>
function hideTest(){
var a = document.getElementsByClassName("class1"); //這樣可以獲取所有 class 包含test的標(biāo)簽
a[0].style.display = 'none';
}
function showTest(){
var a = document.getElementsByClassName("class1"); //這樣可以獲取所有 class 包含test的標(biāo)簽
a[0].style.display = 'block';
}
</script>
以上 demo 通過點(diǎn)擊按鈕，基于操控對應(yīng) DOM 的 class 來控制按鈕的顯示與隱藏。
1.3 id
id 屬性類似于 class，不同的是 id 是唯一標(biāo)簽，不能重復(fù)；
<div id='test'></div>
類似于class，id 也是用于操作 dom 的標(biāo)記，例如：
<p id='test' class="class1 class2 class3">我是一個(gè)段落</p>
<button onclick='hideTest()'>點(diǎn)擊隱藏</button>
<button onclick='showTest()'>點(diǎn)擊顯示</button>
<script>
function hideTest(){
var a = document.getElementById("test"); //這樣可以獲取所有 class 包含test的標(biāo)簽
a.style.display = 'none';
}
function showTest(){
var a = document.getElementById("test"); //這樣可以獲取所有 class 包含test的標(biāo)簽
a.style.display = 'block';
}
</script>
以上 demo 通過點(diǎn)擊按鈕，基于操控對應(yīng) dom 的 class 來控制按鈕的顯示與隱藏。
1.4 lang
lang 屬性定義了網(wǎng)頁或者元素的語言，是否定義 lang 屬性對網(wǎng)頁或者標(biāo)簽的展現(xiàn)影響不大，但是可以幫助搜索引擎或者瀏覽器區(qū)分出網(wǎng)頁的語言。ISO 639-1 為各種語言定義了縮略詞。
<p lang="fr">Ceci est un paragraphe.</p><!-- 表示語言是法語 -->
| Language | ISO Code |
|---|---|
| Abkhazian | ab |
| Afar | aa |
| Afrikaans | af |
| Albanian | sq |
| Amharic | am |
| Arabic | ar |
| Armenian | hy |
| Assamese | as |
| Aymara | ay |
| Azerbaijani | az |
| Bashkir | ba |
| Basque | eu |
| Bengali (Bangla) | bn |
| Bhutani | dz |
| Bihari | bh |
| Bislama | bi |
| Breton | br |
| Bulgarian | bg |
| Burmese | my |
| Byelorussian (Belarusian) | be |
| Cambodian | km |
| Catalan | ca |
| Chinese (Simplified) | zh |
| Chinese (Traditional) | zh |
| Corsican | co |
| Croatian | hr |
| Czech | cs |
| Danish | da |
| Dutch | nl |
| English | en |
| Esperanto | eo |
| Estonian | et |
| Faeroese | fo |
| Farsi | fa |
| Fiji | fj |
| Finnish | fi |
| French | fr |
| Frisian | fy |
| Galician | gl |
| Gaelic (Scottish) | gd |
| Gaelic (Manx) | gv |
| Georgian | ka |
| German | de |
| Greek | el |
| Greenlandic | kl |
| Guarani | gn |
| Gujarati | gu |
| Hausa | ha |
| Hebrew | he, iw |
| Hindi | hi |
| Hungarian | hu |
| Icelandic | is |
| Indonesian | id, in |
| Interlingua | ia |
| Interlingue | ie |
| Inuktitut | iu |
| Inupiak | ik |
| Irish | ga |
| Italian | it |
| Japanese | ja |
| Javanese | jv |
| Kannada | kn |
| Kashmiri | ks |
| Kazakh | kk |
| Kinyarwanda (Ruanda) | rw |
| Kirghiz | ky |
| Kirundi (Rundi) | rn |
| Korean | ko |
| Kurdish | ku |
| Laothian | lo |
| Latin | la |
| Latvian (Lettish) | lv |
| Limburgish ( Limburger) | li |
| Lingala | ln |
| Lithuanian | lt |
| Macedonian | mk |
| Malagasy | mg |
| Malay | ms |
| Malayalam | ml |
| Maltese | mt |
| Maori | mi |
| Marathi | mr |
| Moldavian | mo |
| Mongolian | mn |
| Nauru | na |
| Nepali | ne |
| Norwegian | no |
| Occitan | oc |
| Oriya | or |
| Oromo (Afan, Galla) | om |
| Pashto (Pushto) | ps |
| Polish | pl |
| Portuguese | pt |
| Punjabi | pa |
| Quechua | qu |
| Rhaeto-Romance | rm |
| Romanian | ro |
| Russian | ru |
| Samoan | sm |
| Sangro | sg |
| Sanskrit | sa |
| Serbian | sr |
| Serbo-Croatian | sh |
| Sesotho | st |
| Setswana | tn |
| Shona | sn |
| Sindhi | sd |
| Sinhalese | si |
| Siswati | ss |
| Slovak | sk |
| Slovenian | sl |
| Somali | so |
| Spanish | es |
| Sundanese | su |
| Swahili (Kiswahili) | sw |
| Swedish | sv |
| Tagalog | tl |
| Tajik | tg |
| Tamil | ta |
| Tatar | tt |
| Telugu | te |
| Thai | th |
| Tibetan | bo |
| Tigrinya | ti |
| Tonga | to |
| Tsonga | ts |
| Turkish | tr |
| Turkmen | tk |
| Twi | tw |
| Uighur | ug |
| Ukrainian | uk |
| Urdu | ur |
| Uzbek | uz |
| Vietnamese | vi |
| Volapuk | vo |
| Welsh | cy |
| Wolof | wo |
| Xhosa | xh |
| Yiddish | yi, ji |
| Yoruba | yo |
| Zulu | zu |
1.5 style
style 屬性定義了元素的行內(nèi)樣式（也叫內(nèi)聯(lián)樣式），行內(nèi)樣式優(yōu)先于任何其他形式定義的樣式。
<p style='color:#ccc'>這是一個(gè)行內(nèi)樣式示例</p> <!-- 行內(nèi)樣式 -->
其他兩種定義元素樣式的方式是：
- style 標(biāo)簽；
- 引入 css 樣式文件。
<style>
.test{
}
</style><!-- 使用標(biāo)簽的方式 -->
<link href="/css/test.css" /> <!-- 使用引用的方式 -->
其中 css 樣式的優(yōu)先級是： 行內(nèi)樣式 > 標(biāo)簽方式 > 引用文件 方式。
關(guān)于樣式的內(nèi)容本章節(jié)不做具體討論。
1.6 tabindex
tabindex 屬性用于定義元素的 tab 鍵的控制順序，即焦點(diǎn)的順序。
tabindex 的值可以在 1 到 32767 之間的任意數(shù)字。當(dāng)用戶使用 tab 鍵在網(wǎng)頁中移動(dòng)控件時(shí)，將首先移動(dòng)到具有最小 tabindex 屬性的控件上，然后依次按從小到大移動(dòng)。
如果兩個(gè)元素的 tabindex 的屬性值相等，瀏覽器會按照代碼出現(xiàn)的順序移動(dòng)。當(dāng)一個(gè)元素的 tabindex 設(shè)置為 -1，那么這個(gè)元素會排除在 tab 的移動(dòng)順序之外。
<a href="http://www.baidu.com.cn/" tabindex="1">焦點(diǎn)1</a>
<a href="http://www.baidu.com.cn/" tabindex="2">焦點(diǎn)2</a>
<a href="http://www.baidu.com.cn/" tabindex="3">焦點(diǎn)3</a>
<a href="http://www.baidu.com.cn/" tabindex="4">焦點(diǎn)4</a>
<a href="http://www.baidu.com.cn/" tabindex="5">焦點(diǎn)5</a>
在上述示例中，通過點(diǎn)擊鍵盤的 tab 鍵可以看到焦點(diǎn)依次按順序通過鏈接標(biāo)簽。
1.7 dir
dir 屬性定義元素內(nèi)文本的方向。參數(shù)值有 2 種：
- ltr 默認(rèn)值。文字按從左到右的方向；
- rtl 文字按照從右到左的方向。
<p dir="rtl">這是一個(gè)文字從右到左展示的方式</p>
1.8 title
title 屬性用于指定元素的備注信息。這些信息通常是指，鼠標(biāo)移動(dòng)到元素上并且停留一段時(shí)間時(shí)，瀏覽器的提示框內(nèi)的文本。
<p title="test123456789" style="word-wrap:break-all;width:30px;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;">test123456789</p> <!-- 定義一個(gè)段落 -->
上面的代碼實(shí)現(xiàn)的功能是：當(dāng)段落文字超出段落寬度時(shí)，顯示省略號，并且鼠標(biāo)移上去可顯示全部內(nèi)容：
2. HTML5 新增全局屬性
2.1 contentEditable
這個(gè)屬性是用來將一個(gè)標(biāo)簽變成可編輯的類型，可能了解的人并不太多，在加入 HTML5 標(biāo)準(zhǔn)以前，瀏覽器也有部分支持。比較通用的創(chuàng)建一個(gè)可編輯標(biāo)簽的方式是，使用表單 input 或者 textarea 的方式，不過都有一定的局限性。
- 會跟隨 form 表單提交內(nèi)容，有時(shí)候你可能并不需要；
- 展現(xiàn)樣式比較單一。
使用 div + css + contentEditable 可以解決以上的問題，例如：
<p contenteditable="true">這是一個(gè)可編輯的段落。</p>
以上定義了一個(gè)段落，如果沒有加 contentEditable 屬性的話，段落只是展示作用，當(dāng)加了 contentEditable 屬性之后，鼠標(biāo)點(diǎn)擊此段落之后可以編輯段落文字。
2.2 contextmenu
contextmenu 屬性用于制定 div 元素的右鍵單擊菜單，需要配合 menu 標(biāo)簽使用，例如：
<div contextmenu='test'>
<menu type="context" id="test">
<menuitem label="刷新"></menuitem> <!-- 菜單1 -->
<menuitem label="回退"></menuitem> <!-- 菜單2 -->
</menu>
</div>
這個(gè)功能類似于桌面應(yīng)用的右鍵菜單功能，但是目前只有 Firefox 瀏覽器支持 contextmenu 屬性，不支持的瀏覽器可以使用 div + css 模擬實(shí)現(xiàn)。
2.3 data-*
這個(gè)屬性是 HTML5 中用于存儲自定義屬性值，自定義屬性值用于方便開發(fā)者存儲一些簡單的數(shù)據(jù)內(nèi)容，而不需從服務(wù)器端獲取。
在 HTML4 中自定義屬性的方式很有可能會跟系統(tǒng)關(guān)鍵字沖突，而 data-* 會被客戶端忽略。
- data- 后邊必須至少有一個(gè)字符，不要包含大寫字符；
- JavaScript 可以用 getAttribute 函數(shù)獲取自定義屬性；
- HTML5 原生函數(shù)支持使用 dataset / setAttribute 來 獲取/操作自定義屬性。
下面是 JavaScrip t使用 getAttribute 函數(shù)獲取自定義屬性的例子：
<script>
function show(animal) {
var type = animal.getAttribute("data-type");
alert(animal.innerHTML + "是一種" + type + "。");
}
</script>
<ul>
<li onclick="show(this)" id="owl" data-type="標(biāo)記語言">html</li>
<li onclick="show(this)" id="salmon" data-type="腳本語言">JavaScript</li>
<li onclick="show(this)" id="tarantula" data-type="層疊樣式表">css</li>
</ul>
以上示例通過 data-type 保存了無序列表中每個(gè)條目的類型值，通過點(diǎn)擊列表?xiàng)l目可以彈出類型值。
2.4 draggable
這個(gè)屬性用來標(biāo)識元素是否支持被拖動(dòng)，如果沒有被設(shè)置則按照瀏覽器默認(rèn)的方式來執(zhí)行，屬性可選值有 true/false/auto 。默認(rèn)情況下，只有圖片、鏈接是可以拖動(dòng)的。需要配合定義 ondragstart 事件來實(shí)現(xiàn)拖動(dòng)之后的響應(yīng)機(jī)制。
<p id="drag1" draggable="true" >這是一段可移動(dòng)的段落。</p>
上述標(biāo)簽，當(dāng)鼠標(biāo)點(diǎn)擊段落且移動(dòng)時(shí)，呈現(xiàn)出可拖動(dòng)樣式：
如果未定義 draggable 屬性，鼠標(biāo)點(diǎn)擊段落且拖動(dòng)會選中文本：
2.5 dropzone
dropzone 屬性是指在元素上拖動(dòng)數(shù)據(jù)時(shí)，是否拷貝、移動(dòng)或鏈接被拖動(dòng)數(shù)據(jù)。目前所有主流瀏覽器暫不支持該屬性。
2.6 hidden
hidden 用來設(shè)置元素是否應(yīng)該被隱藏，當(dāng)該屬性設(shè)置為 hidden 或者 true 時(shí)，瀏覽器將不再渲染該元素。在早期的 HTML4 中，通過設(shè)置 css 樣式 display:none 可以實(shí)現(xiàn)相同的效果。
<input type=hidden id='test' />
上述表單在瀏覽器不顯示任何效果，只有當(dāng)提交表單時(shí)數(shù)據(jù)才會提交到服務(wù)器端。
2.7 spellcheck
spellcheck 屬性定義是否對元素進(jìn)行拼寫檢查，目前該屬性支持非密碼的 input 標(biāo)簽、textarea 中的文本，可編輯元素中的文本。spellcheck 的值有 true 和 false。
<p spellcheck="true">這是一個(gè)段落。</p>
2.8 translate
translate 屬性定義渲染元素時(shí)是否需要對內(nèi)容進(jìn)行翻譯，目前所有主流瀏覽器都不支持該屬性。
3. 總結(jié)
回顧本章，介紹了 HTML 通用的 8 個(gè)屬性，以及 HTML5 新增的 8 個(gè)通用屬性。通用的屬性一般對大部分元素標(biāo)簽都支持，但是 HTML5 目前是新標(biāo)準(zhǔn)，所有有些屬性不能百分之百兼容所有的瀏覽器。因?yàn)闉g覽器更新迭代速度較快，所以在此沒有對瀏覽器兼容性做深入講解，大家在實(shí)際使用的時(shí)候可以在 w3c 官網(wǎng)或者其他網(wǎng)站手冊中查詢對照。
2025 imooc.com All Rights Reserved |