HTML5之全局屬性

HTML5 除了支持原有的全局屬性之外,還添加了8個新的全局屬性。

1、 id 屬性規定元素的唯一 id

  id 屬性規定 HTML 元素的唯一的 id。id 在 HTML 文檔中必須是唯一的。id 屬性可用作鏈接錨,通過 JavaScript(HTML DOM)或通過 CSS 可以爲帶有指定 id 的元素改變或添加樣式。在 HTML5 中, id 屬性可用於任何的 HTML 元素 ,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,id 屬性不能用於:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和<title>。

  語法:<element(元素) id="id">

  屬性值定義元素的唯一 id。命名規則:①:不能以數字開頭,必須以字母 A-Z 或 a-z 開頭。②:其後的字符可以爲:字母(A-Za-z)、數字(0-9)、連字符("-")、下劃線("_")、冒號(":") 以及點號(".")。③:值對大小寫敏感。

 

2、class 屬性規定元素的類名(className)

  class 屬性定義了元素的類名。class 屬性通常用於指向樣式表的類,但是,它也可以用於 JavaScript 通過 HTML DOM 來修改 HTML 元素的類名。在 HTML5 中,class 屬性可用於任何的 HTML 元素 ,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,class 屬性不能用於:<base>, <head>, <html>,<meta>, <param>, <script>, <style> 和 <title>。

  語法:<element class="classname">

  屬性值定義元素的類的名稱。如需爲一個元素規定多個類,可用空格分隔類名。 <span class="A B C">,HTML 元素允許使用多個類。命名規則:①:必須以字母 A-Z 或 a-z 開頭。②:可以是以下字符: (A-Za-z),數字 (0-9),連字符 ("-") 和 下劃線 ("_")。③:在 HTML 中, 類名是區分大小寫的。

 

3、style 屬性規定元素的行內樣式(inline style)

  style 屬性規定元素的行內樣式。style 屬性將覆蓋任何全局的樣式設定,例如在 <style> 標籤或在外部樣式表中規定的樣式。在 HTML5 中,style 屬性可用於任何的 HTML 元素,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,style 屬性不能用於:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。

  語法:<element style="style:value;">

  屬性值定義一個或多個由分號分隔的 CSS 屬性和值,例如: <p style="font-size:16px;color:blue;text-align:center;"></p>

 

4、title 屬性規定元素的額外信息

  描述信息可在工具提示中顯示,這些信息通常會在鼠標移到元素上時顯示一段工具提示文本。在 HTML5 中, title 屬性可用於任何的 HTML 元素 ,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,title 屬性不能用於:<base>, <head>, <html>, <meta>, <param>, <script>, <style> 和 <title>。

  語法:<element title="text">

  屬性值定義元素的提示文本。

 

5、lang 屬性設置元素中內容的語言代碼

  該屬性規定元素內容的語言,在 HTML5 中, lang 屬性可用於任何的 HTML 元素 ,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,lang 屬性不能用於:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, 和 <script>。

  語法:<element lang="language_code">

  屬性值爲語言代碼,用於規定元素內容的語言代碼。

 

6、dir 屬性設置元素中內容的文本方向

  在 HTML5 中,dir 屬性可用於任何的 HTML 元素,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,dir 元素不能用於:<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 和 <script>。

  語法:<element dir="ltr|rtl|auto">

  值描述:①:ltr 爲默認值,從左向右的文本方向,正常顯示。②:rtl 定義從右向左的文本方向。③:auto 定義讓瀏覽器根據內容來判斷文本方向,僅在文本方向未知時推薦使用。

 

7、accesskey 屬性設置訪問元素的鍵盤快捷鍵

  accesskey 屬性規定激活(使元素獲得焦點)元素的快捷鍵。注意:在不同操作系統中不同的瀏覽器中訪問快捷鍵的方式不同。但是,在大多瀏覽器中快捷鍵可以設置爲另外一組組合。

  各種瀏覽器下 accesskey 快捷鍵的使用方法:

  ①:IE:按住 Alt 鍵,點擊 accesskey 定義的快捷鍵(焦點將移動到鏈接),再按回車。

  ②:Chrome:按住 Alt 鍵,點擊 accesskey 定義的快捷鍵。

  ③:FireFox:按住 Alt+Shift 鍵,點擊 accesskey 定義的快捷鍵。

  ④:Safari:按住 Alt 鍵,點擊 accesskey 定義的快捷鍵。

  ⑤:Opera:按住 Shift 鍵,點擊 esc,出現本頁定義的 accesskey 快捷鍵列表可供選擇。

  在 HTML5 中, accesskey 屬性可用於任何 HTML 元素,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,accesskey 屬性可使用於:<a>, <area>, <button>, <input>, <label>, <legend> 和 <textarea>。

  語法:<element accesskey="character">

  屬性值用於指定激活元素的快捷鍵。

 

8、tabindex 屬性設置元素的 Tab 鍵控制次序

  tabindex 屬性規定當使用 "tab" 鍵進行導航時元素的順序。在 HTML5 中,tabindex 屬性可用於任何的 HTML 元素,它會驗證任何HTML元素,但不一定是有用。在 HTML4 中,tabindex 屬性可用於:<a>, <area>, <button>, <input>, <object>, <select> 和 <textarea>。

  語法:<element tabindex="number">。

  屬性值爲數值,用於規定元素的 Tab 鍵控制順序,1 是第一,依此類推。

 

下面是 HTML5 新添加的屬性:

9、data-* 屬性用於存儲頁面的自定義數據

  該屬性用於存儲私有頁面後應用的自定義數據,可以在所有的 HTML 元素中嵌入數據。自定義的數據可以讓頁面擁有更好的交互體驗,不需要使用 Ajax 或去服務端查詢數據。

  data-* 屬性由以下兩部分組成:①:屬性名不要包含大寫字母,在 data- 後必須至少有一個字符。②:該屬性可以是任何字符串。注意:自定義屬性前綴 "data-" 會被客戶端忽略。

  語法:<element data-*="somevalue">

  屬性值是以字符串形式規定屬性的值。

 

10、contenteditable 屬性規定是否可編輯元素的內容

  contenteditable 屬性指定元素內容是否可編輯。注意: 當元素中沒有設置 contenteditable 屬性時,元素將從父元素繼承。

  語法:<element contenteditable="true|false">

  值描述:①:當值爲 true 時候,元素是可編輯的。②:當值爲 false 時,元素是不可編輯的。

 

11、contextmenu 屬性指定一個元素的上下文菜單

  contextmenu 屬性規定了元素的上下文菜單,當用戶右擊元素時將顯示上下文菜單。contextmenu 屬性的值是需要打開的 <menu> 元素的 id。

  語法:<element contextmenu="menu_id">

 

12、spellcheck 屬性檢測元素是否拼寫錯誤

  spellcheck 屬性規定是否對元素內容進行拼寫檢查。

  可對以下文本進行拼寫檢查:①:類型爲 text 的 input 元素中的值,非密碼。②:textarea 元素中的值。③:可編輯元素中的值。

  語法:<element spellcheck="true|false">

  值描述:①:當值爲 true 時,規定應當對元素的文本進行拼寫檢查。②:當值爲 false 時,規定不應對元素的文本進行拼寫檢查。

 

13、hidden 屬性規定對元素進行隱藏

  如果使用該屬性,則會隱藏元素,隱藏的元素不會被顯示,可以對 hidden 屬性進行設置,使用戶在滿足某些條件時才能看到某個元素,比如選中複選框,等等。然後,可使用 JavaScript 來刪除 hidden 屬性,使該元素變得可見。

  語法:<element hidden>

 

14、draggable 屬性指定某個元素是否可以拖動

  draggable 屬性規定元素是否可拖動。注意:鏈接和圖像默認是可拖動的。

  語法:<element draggable="true|false|auto">

  值描述:①:當值爲 true 時,元素是可拖動的。②:當值爲 false 時,元素是不可拖動的。③:當值爲 auto 時,使用瀏覽器的默認特性。

 

15、dropzone 屬性指定是否將數據複製,移動,或鏈接,或刪除

  dropzone 屬性規定當被拖動的數據在拖放到元素上時,是否被複制、移動或鏈接。目前沒有主流瀏覽器支持 dropzone 屬性。

  拖動數據會導致被拖數據產生副本:<div dropzone="copy"></div>

  語法:<element dropzone="copy|move|link">

  值描述:①:當值爲 copy 時,拖動數據會導致被拖數據產生副本。②:當值爲 move 時,拖動數據會導致被拖數據移動到新位置。③:當值爲 link 時,拖動數據會生成指向原始數據的鏈接。

 

16、translate 屬性指定是否一個元素的值在頁面載入時是否需要翻譯

  translate 屬性規定元素內容是否要翻譯。可使用 class="notranslate" 替代。目前沒有主流瀏覽器支持 translate 屬性。

  語法:<element translate="yes|no">

  值描述:①:當值爲 yes 時,規定元素內容需要翻譯。②:當值爲 no 時,規定元素內容不需要翻譯。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章