首頁  >  文章  >  web前端  >  html5有哪些全域屬性

html5有哪些全域屬性

青灯夜游
青灯夜游原創
2021-12-29 11:41:282576瀏覽

html5屬性有:1、accesskey;2、class;3、contenteditable;4、dir;5、draggable;6、dropzone;7、hidden;8、lang;9、spellcheck;10、tabindex等等。

html5有哪些全域屬性

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

局部屬性:有些元素能規定自己的屬性,這種屬性稱為局部屬性。

例如link元素,它所擁有的局部屬性有href、 rel、 hreflang、 media、 type、 sizes這六個。

全域屬性:可以用來配置所有元素共有的行為,這種屬性稱為全域屬性,可以用在任何一個元素身上。

HTML5全域屬性

1、accesskey屬性

使用accesskey屬性可以設定一個或幾個用來選擇頁面上的元素的快捷鍵。

2、class屬性

class屬性用來將元素歸類。

3、contenteditable屬性

contenteditable是HTML5中新增的屬性,其用途是讓使用者修改頁面上的內容。

<body>    <!-- contenteditable属性应用 -->    <p contenteditable="true">设置为 true 是可编辑的</p></body>

如上例,p元素的contenteditable屬性值設定為true時,使用者可以點選文字編輯內容。設定為false時禁止編輯。

4、dir屬性

dir屬性用來規定元素中文字的方向。有效值有兩個:ltr(從左到右)、rtl(由右到左)。

   <!-- dir属性应用 -->    <p dir="ltr">从左到右</p>    <p dir="rtl">从右到左</p>

5、draggable屬性

draggable屬性是HTML5支援拖曳操作的方式之一,用來表示元素是否可被拖曳。

6、dropzone屬性

dropzone屬性是HTML5支援拖曳操作的方式之一,與draggable屬性搭配使用。

7、id屬性

id屬性用來給元素一個唯一的識別碼。這個也無需多言。需要說明的一點是,id屬性還可以用來導覽到文件中的特定位置。

8、hidden屬性

hidden是布林屬性,表示相關元素目前不需要關注,瀏覽器對它的處理方式是隱藏相關元素(隱隱想起來控制一個元素的展示隱藏的時候,會自訂一個hidden類,然後在裡面寫隱藏樣式),具體也可以看一下這篇介紹HTML5的hidden屬性

<!-- hidden属性应用 --><div hidden>这个元素将会被隐藏</div>

9、lang屬性

lang屬性用來說明元素內容所使用的語言。 lang屬性必須使用有效的ISO語音代碼,使用這個屬性的目的在於,讓瀏覽器調整其表達元素內容的方式,例如在使用了文字朗讀器的情況下正確發音。

<!-- lang属性应用 --><p>Hello - how are you?</p>

10、spellcheck屬性

spellcheck屬性用來表示瀏覽器是否應該對元素的內容進行拼字檢查,這個屬性只有用在使用者可以編輯的元素上時才有意義。
spellcheck屬性可以接受的值有兩個:true和false。至於拼字檢查的實作方式則因瀏覽器而異。

<textarea name="" id="" cols="30" rows="10" spellcheck="true">This is some lalalala text</textarea>

11、style屬性

style屬性用來直接在元素身上定義CSS樣式。

12、tabindex屬性

HTML頁面的鍵盤焦點可以透過按下Tab鍵在各元素之間切換。用tabindex屬性可以改變預設的轉移順序。

<form action="">    <label>Name: <input type="text" name="" id="" tabindex="2"></label>    <label>City: <input type="text" name="" id="" tabindex="-1"></label>    <label>Country: <input type="text" name="" id="" tabindex="1"></label>    <input type="submit" value="" tabindex="3"></form>

上面的程式碼實作效果是:在按Tab鍵的過程中,tabindex為1的Country輸入框第一個被選中,接著焦點會跳到Name輸入框,最後是submit提交。 tabindex設定為-1的元素不會在使用者按下Tab鍵後被選取。

13、title屬性

title屬性提供了元素的額外信息,瀏覽器通常用這些東西顯示工具條提示,這個在一些展示不全的文本標題也經常使用。

相關推薦:《html影片教學

以上是html5有哪些全域屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn