一、全局屬性和局部屬性

　　每種元素都有自己規定的屬性，這種屬性成為局部屬性。還有另外一種屬性，他可以用來配置所有元素的共有行為，這種屬性成為稱為全局屬性。全局屬性可以用在任何一個元素身上，但是不一定會帶有用或者有意義的行為改變。

二、HTML中的全局屬性

? ? ? ??

代表HTML5新增屬性

三、用法介紹

1、accesskey屬性

a、accesskey

　　使用accesskey可以設置一個或者多個頁面上的元素的快捷方式，其目的是讓網頁或者網站的熟客可以使用快捷鍵訪問經常用到的元素。Windows系統下快捷鍵的按法是：Alt+accesskey的屬性值。

b、元素的用法?

1 <a href="http://www.baidu.com" accesskey="a">百度</a> 2 <a href="http://www.sina.con" accesskey="g">新浪</a>?　　

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

c、效果

　　使用Alt+a，會自動跳轉到百度首頁；使用Alt+g會自動跳轉到新浪首頁。

d、瀏覽器支持

　　

　?幾乎所有主流瀏覽器都支持。

2、class屬性

a、class

　　class屬性用來將元素歸類，這樣做是為了可以找到文檔中的某一類元素或為某一類元素應用css樣式，也可以利用它通過 JavaScript 來改變帶有指定 class 的 HTML 元素。

b、元素用法　

1 <a href="http://www.baidu.com" class="a1 a2">百度</a> 2 <a href="http://www.sina.con" class="a2 a3">新浪</a> 3 <a href="http://www.w3cschool.com" class="a3">WC</a>?

c、效果

　　在css中可以使用.a1選中第一個超鏈接。使用.a2選中第一個超鏈接、第二個鏈接，使用地.a3選出第二個、第三個鏈接。??

　 下面為第二個第一個、第二個鏈接設置樣式。?

1 <style type="text/css"> 2 .a2{ 3 background: red; 4 } 5 </style>

　 顯示效果：

d、瀏覽器支持

? ? ? ?

　　所有主流瀏覽器都支持 class 屬性。

3、contenteditable屬性

　　a、contenteditable

　　　　HTML5新增。目的是讓用戶能夠修改頁面上的元素。

　　b、用法

1 <p contenteditable="true">I love China!</p> 2 <p contenteditable="false">I love China!</p>

　　c、效果

　　　　第一個段落可以編輯，第二個不可以。

　　d、瀏覽器支持

　　　　

　　　　所有主流瀏覽器都支持 contenteditable 屬性。

4、contextmenu屬性

?　　a、contextmenu

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

　? ?b、用法

1 <p contextmenu="supermenu">本段落擁有一個名為 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現。</p> 2 3 <menu id="supermenu"> 4 <command label="Step 1: Write Tutorial" οnclick="doSomething()"> 5 <command label="Step 2: Edit Tutorial" οnclick="doSomethingElse()"> 6 </menu> 7 8 <p><b>注意：</b>目前的主流瀏覽器都不支持 contextmenu 屬性。</p>

　　c、瀏覽器支持

　　　　目前的主流瀏覽器都不支持該屬性。

5、data-*屬性

　　a、data-*

　　　　用來設置元素的自定義屬性。可以用當前節點的dataset.*去獲得自定義屬性。

　　b、用法　　　　

<ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>

　　c、效果

　　　　為每個元素設置了一個自定義屬性。第一個自定義屬性名為animalType,可以使用當前節點的dataset.animalType獲得屬性值。

　　d、瀏覽器支持

　　　　

　　　　所有主流瀏覽器都支持。

6、dir屬性

　　a、dir

　　　　規定元素內容的文本方向

　　b、用法　　　

　　　　<p dir="rtl">文本方向從右到左!</p>

　　 屬性值：

　　　　

　　c、效果

　　　　

　　d、瀏覽器支持

　　　　　　　　

?　　　　?　主流瀏覽器都支持。

7、draggable 屬性

　　a、draggable

　　　　draggable 屬性規定元素是否可拖動。和JS結合使用可以展示更好的效果。提示：?鏈接和圖像默認是可拖動的。提示：?draggable 屬性經常用于拖放操作。

　　b、用法　　　

　　　<p draggable="true">這是一段可移動的段落。請把該段落拖入上面的矩形。</p>

?　　　　

　　??c、效果

　　　　鼠標點擊元素可以拖動。

　　d、瀏覽器支持

　　　　

　　　　Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 瀏覽器支持 draggable 屬性。

8、dropzone屬性

　　a、dropzone

　　　　屬性規定當被拖動的數據在拖放到元素上時，是否被復制、移動或鏈接

　　b、用法　　　　

　　<div dropzone="copy"></div>

　　

　　c、瀏覽器支持

　　　　所有主流瀏覽器都不支持。

9、hidden屬性

　　a、hidden　　　　

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

　　b、用法　　

1 <p>這是一個沒有隱藏的段落</p> 2 <p hidden="hidden">這是一個隱藏的段落</p>

　　c、效果　

　　　　　

　　d、瀏覽器支持

　　　　

　　　　主流瀏覽器都支持。

10、id屬性

　　a、id　　　　

　　　　id 屬性規定 HTML 元素的唯一的 id。id 在 HTML 文檔中必須是唯一的。id 屬性可用作鏈接錨（link anchor），通過 JavaScript（HTML DOM）或通過 CSS 為帶有指定 id 的元素改變或添加樣式。

?

　　b、用法　　　　

1 <p id="name">這是一個沒有隱藏的段落</p>

?

　　c、效果

　　　　可以用css選擇器或者JS選取當前元素。

　　d、瀏覽器支持

　　　　

　　　　主流瀏覽器都支持。

11、lang屬性

　　a、lang

　　　　lang 屬性規定元素內容的語言。

　　b、用法　　　　

<p lang="fr">這是一個段落。</p>

　　zh代表中文，en代表English。

　　c、效果

　　　　沒有效果。

　　d、瀏覽器支持

　　　　

　　　　主流瀏覽器都支持。

12、spellcheck屬性

　　a、spellcheck　　　　

　　　　spellcheck 屬性規定是否對元素內容進行拼寫檢查。檢查方式有瀏覽器決定。

　　　　可對以下文本進行拼寫檢查：

類型為 text 的 input 元素中的值（非密碼）

textarea 元素中的值

可編輯元素(contenteditable)中的值

　　b、用法

<p contenteditable="true" spellcheck="true">這是可編輯的段落。請試著編輯文本。</p>First name: <input type="text" name="fname" spellcheck="true"><p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 屬性。</p>

　　　c、效果

　　　　??會對輸入的內容檢查。

　　d、瀏覽器支持

　　　　

　　　　Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 瀏覽器支持 spellcheck 屬性。

13、style屬性

　　a、style　　　　

　　　　style 屬性規定元素的行內樣式（inline style）。style 屬性將覆蓋任何全局的樣式設定，例如在 <style> 標簽或在外部樣式表中規定的樣式。

　　b、用法　　　　

　　<p style="color:green">這是一個段落。</p>

　　　c.效果　

　　　　元素會使用style屬性設置的樣式。

　　d、瀏覽器支持

　　　　

　　　　所有主流瀏覽器都支持 style 屬性。

14、tabindex 屬性

　　a、tabindex

　　　　規定當使用 "tab" 鍵進行導航時元素的順序。

　　b、用法　　　　

1 　　<a href="//www.runoob.com//" tabindex="2"> runoob.com 菜鳥教程</a><br /> 2 <a href="//www.google.com/" tabindex="1">Google</a><br /> 3 <a href="//www.microsoft.com/" tabindex="3">Microsoft</a>

　　c、效果

　　　　

　　d、瀏覽器支持

　　　　

　　　　主流瀏覽器都支持。

15、title屬性

　　a、title

　　　　title 屬性規定關于元素的額外信息。這些信息通常會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）。

　　b、用法　　　　

　　 <p title="菜鳥教程">菜鳥教程</p>

　　c、效果

　　　　鼠標放到元素上會顯示菜鳥教程。

　　d、瀏覽器支持

　　　　

　　　　所有主流瀏覽器都支持 title 屬性。

16、translate?屬性

　　a、translate

　　　　translate 屬性規定元素內容是否要翻譯。

　　b、用法　　　

　　<p translate="no">這個段落不能翻譯。</p><p translate="yes">這個段落可以被翻譯</p>

　　c、瀏覽器支持

　　　　目前沒有主流瀏覽器支持 translate 屬性。　　　

轉載于:https://www.cnblogs.com/yiluhuakai/p/8318274.html

總結

以上是生活随笔為你收集整理的HTML中的全局属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。