HTML5全局屬性彙總

時間 2019-11-11

標籤 html5 html 全局屬性彙總欄目 HTML5 简体版

原文原文鏈接

局部屬性和全局屬性

局部屬性：有些元素能規定本身的屬性，這種屬性稱爲局部屬性。
好比link元素，它具備的局部屬性有href、 rel、 hreflang、 media、 type、 sizes這六個。
全局屬性：能夠用來配置全部元素共有的行爲，這種屬性稱爲全局屬性，能夠用在任何一個元素身上。html

一、accesskey屬性

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>HTML全局屬性測試</title>
</head>
<body>
   <form action="">
       <p>
           Name: <input type="text" name="name" id="" accesskey="n">                
       </p>
       <p>
           Password: <input type="password" name="password" id="" accesskey="p">                
       </p>
       <p>
           Name: <input type="submit" name="" id="" value="Log In" accesskey="s">                
       </p>
   </form>
</body>
</html>

在上面的例子中，三個input元素添加了accesskey屬性，這樣在Mac下就能夠用Control + Alt(Option) + n快捷鍵訪問到Name的輸入框了。用來觸發accesskey機制的按鍵組合因平臺而異，具體以下：git

瀏覽器/平臺	Window	Linux	Mac
Firefox	Alt + Shift + key	Alt + Shift + key	Control + Alt + key
Internet Explorer	Alt + key	N/A	N/A
Google Chrome	Alt + key	Alt + key	Control + Alt + key
Safari	Alt + key	N/A	Control + Alt + key
Opera	同Google Chrome	同Google Chrome	同Google Chrome

關於accesskey這個全局屬性的詳解，能夠看一下 HTML accesskey屬性與web自定義鍵盤快捷訪問

二、class屬性

class屬性用來將元素歸類，這個就無需多言了。github

三、contenteditable屬性

contenteditable是HTML5中新增長的屬性，，其用途是讓用戶可以修改頁面上的內容。web

<body>
    <!-- contenteditable屬性應用 -->
    <p contenteditable="true">設置爲 true 是可編輯的</p>
</body>

如上例，p元素的contenteditable屬性值設置爲true時，用戶能夠單擊文字編輯內容。設置爲false時禁止編輯。瀏覽器

四、dir屬性

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

<!-- dir屬性應用 -->
    <p dir="ltr">從左到右</p>
    <p dir="rtl">從右到左</p>

五、draggable屬性

draggable屬性是HTML5支持拖放操做的方式之一，用來表示元素是否可被拖放。工具

六、dropzone屬性

dropzone屬性是HTML5支持拖放操做的方式之一，與draggable屬性搭配使用。測試

七、id屬性

id屬性用來給元素分配一個惟一的標識符。這個也無需多言。須要說明的一點是，id屬性還能夠用來導航到文檔中的特定位置。網站

八、hidden屬性

hidden是個布爾屬性，表示相關元素當前不須要關注，瀏覽器對它的處理方式是隱藏相關元素（隱隱想起來控制一個元素的展現隱藏的時候，會自定義一個hidden類，而後在裏面寫隱藏樣式），具體也能夠看一下這篇介紹 HTML5的hidden屬性

<!-- hidden屬性應用 -->
    <div hidden>這個元素將會被隱藏</div>

九、lang屬性

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

<!-- lang屬性應用 -->
    <p lang="en">Hello - how are you?</p>

十、spellcheck屬性

spellcheck屬性用來代表瀏覽器是否應該對元素的內容進行拼寫檢查，這個屬性只有用在用戶能夠編輯的元素上時纔有意義。
spellcheck屬性能夠接受的值有兩個：true和false。至於拼寫檢查的實現方式則因瀏覽器而異。

<!-- spellcheck屬性應用 -->
    <textarea name="" id="" cols="30" rows="10" spellcheck="true">This is some lalalala text</textarea>

十一、style屬性

style屬性用來直接在元素身上定義CSS樣式，這個也不作過多描述了。

十二、tabindex屬性

HTML頁面的鍵盤焦點能夠經過按Tab鍵在各元素之間切換。用tabindex屬性能夠改變默認的轉移順序。

<!-- 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鍵後被選中。

1三、title屬性

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

<!-- title屬性應用 -->
    <a href="https://qiqihaobenben.github.io/" title="個人我的網站">qiqihaobenben.github.io</a>

1. html5全局屬性 html5全局屬性
2. html5全局屬性
3. CSS屬性彙總（全）
4. HTML5 學習筆記1-全局屬性
5. 全局屬性
6. html5入門初學者筆記（十）- 全局屬性（contentEditable屬性）
7. Velocity屬性彙總
8. SpringBoot全局屬性
9. 2.全局屬性
10. HTML全局屬性
更多相關文章...
• Docker 資源彙總 - Docker教程
• PHP 超級全局變量 - PHP教程
• JDK13 GA發佈：5大特性解讀
• Tomcat學習筆記（史上最全tomcat學習筆記）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。