一、全局屬性和局部屬性

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

二、HTML中的全局屬性

? ? ? ??

代表HTML5新增屬性

三、用法介紹

1、accesskey屬性

a、accesskey

　　使用accesskey可以設置一個或者多個頁面上的元素的快捷方式，其目的是讓網(wǎng)頁或者網(wǎng)站的熟客可以使用快捷鍵訪問經(jīng)常用到的元素。Windows系統(tǒng)下快捷鍵的按法是：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，會自動跳轉(zhuǎn)到百度首頁；使用Alt+g會自動跳轉(zhuǎn)到新浪首頁。

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 屬性規(guī)定了元素的上下文菜單。當用戶右擊元素時將顯示上下文菜單。contextmenu 屬性的值是需要打開的 <menu> 元素的 id。

　? ?b、用法

1 <p contextmenu="supermenu">本段落擁有一個名為 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現(xiàn)。</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-*

　　　　用來設置元素的自定義屬性?？梢杂卯斍肮?jié)點的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,可以使用當前節(jié)點的dataset.animalType獲得屬性值。

　　d、瀏覽器支持

　　　　

　　　　所有主流瀏覽器都支持。

6、dir屬性

　　a、dir

　　　　規(guī)定元素內(nèi)容的文本方向

　　b、用法　　　

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

　　 屬性值：

　　　　

　　c、效果

　　　　

　　d、瀏覽器支持

　　　　　　　　

?　　　　?　主流瀏覽器都支持。

7、draggable 屬性

　　a、draggable

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

　　b、用法　　　

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

?　　　　

　　??c、效果

　　　　鼠標點擊元素可以拖動。

　　d、瀏覽器支持

　　　　

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

8、dropzone屬性

　　a、dropzone

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

　　b、用法　　　　

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

　　

　　c、瀏覽器支持

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

9、hidden屬性

　　a、hidden　　　　

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

　　b、用法　　

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

　　c、效果　

　　　　　

　　d、瀏覽器支持

　　　　

　　　　主流瀏覽器都支持。

10、id屬性

　　a、id　　　　

　　　　id 屬性規(guī)定 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 屬性規(guī)定元素內(nèi)容的語言。

　　b、用法　　　　

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

　　zh代表中文，en代表English。

　　c、效果

　　　　沒有效果。

　　d、瀏覽器支持

　　　　

　　　　主流瀏覽器都支持。

12、spellcheck屬性

　　a、spellcheck　　　　

　　　　spellcheck 屬性規(guī)定是否對元素內(nèi)容進行拼寫檢查。檢查方式有瀏覽器決定。

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

類型為 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、效果

　　　　??會對輸入的內(nèi)容檢查。

　　d、瀏覽器支持

　　　　

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

13、style屬性

　　a、style　　　　

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

　　b、用法　　　　

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

　　　c.效果　

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

　　d、瀏覽器支持

　　　　

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

14、tabindex 屬性

　　a、tabindex

　　　　規(guī)定當使用 "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 屬性規(guī)定關于元素的額外信息。這些信息通常會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）。

　　b、用法　　　　

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

　　c、效果

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

　　d、瀏覽器支持

　　　　

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

16、translate?屬性

　　a、translate

　　　　translate 屬性規(guī)定元素內(nèi)容是否要翻譯。

　　b、用法　　　

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

　　c、瀏覽器支持

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

轉(zhuǎn)載于:https://www.cnblogs.com/yiluhuakai/p/8318274.html

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。