HTML 5深入淺出教學(xué)篇之五

作者：webabcd 2012-05-30 13:49:52

本文講到的是HTML 5元素的通用屬性accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone的使用

介紹

HTML 5: 元素的通用屬性

元素的通用屬性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone

示例

1、accesskey - 用于定義快捷鍵element/_globalAttributes/accesskey.html

<!doctype html> 
<html> 
<head> 
    <title>accesskey</title> 
</head> 
<body> 
    <!--  
        accesskey - 用于定義快捷鍵。快捷鍵為：alt + accesskey，參考第一個(gè)示例  
          第二個(gè)示例描述為：有全鍵盤(pán)的設(shè)備快捷鍵為：ctrl + alt + q（目前 IE 為：ctrl + shift + q），僅有小鍵盤(pán)的設(shè)備快捷鍵為：“數(shù)字 0 鍵”  
    --> 
    <a accesskey="w" href="http://webabcd.cnblogs.com/">webabcd blog</a> 
    <a accesskey="q 0" href="http://webabcd.cnblogs.com/">webabcd blog</a> 
</body> 
</html>

2、style - 用于定義樣式element/_globalAttributes/style.html

<!doctype html> 
<html> 
<head> 
    <title>style</title> 
</head> 
<body> 
    <!--  
        style - 用于定義樣式  
    --> 
    <span style="font-size:36px; color:Blue">webabcd</span> 
</body> 
</html>

3、class - 指定需要應(yīng)用的 css 類選擇器element/_globalAttributes/class.html

<!doctype html> 
<html> 
<head> 
    <title>class</title> 
    <style> 
        .myClass { font-size:36px; }  
        .myClass2 { color:Blue; }  
    </style> 
</head> 
<body> 
    <!--  
        class - 指定需要應(yīng)用的 css 類選擇器  
    --> 
    <span class="myClass myClass2">webabcd</span> 
</body> 
</html>

4、title - 用于描述元素信息，相當(dāng)于 ToolTipelement/_globalAttributes/title.html

<!doctype html> 
<html> 
<head> 
    <title>title</title> 
</head> 
<body> 
    <!--  
        title - 用于描述元素信息，相當(dāng)于 ToolTip  
    --> 
    <a title="webabcd" href="http://webabcd.cnblogs.com/">webabcd blog</a> 
    <img src="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245" alt="頭像" title="webabcd" /> 
</body> 
</html>

#p#

5、tabindex - 用于定義 TAB 鍵的導(dǎo)航順序（整型值）element/_globalAttributes/tabindex.html

<!doctype html> 
<html> 
<head> 
    <title>tabindex</title> 
</head> 
<body> 
    <!--  
        tabindex - 用于定義 TAB 鍵的導(dǎo)航順序（整型值）  
          按從小到大的順序?qū)Ш剑? 除外，0 會(huì)被最后導(dǎo)航到）  
          負(fù)數(shù)則不會(huì)被導(dǎo)航到  
    --> 
    <input type="text" tabindex="-1" />   
    <input type="text" tabindex="-2" /> 
    <input type="text" tabindex="0" /> 
    <input type="text" tabindex="3" /> 
    <input type="text" tabindex="1" /> 
    <input type="text" tabindex="4" /> 
    <input type="text" tabindex="2" /> 
</body> 
</html>

6、id - 用于定義元素的唯一標(biāo)識(shí)，主要給 DOM 用element/_globalAttributes/id.html

<!doctype html> 
<html> 
<head> 
    <title>id</title> 
</head> 
<body> 
    <!--  
        id - 用于定義元素的唯一標(biāo)識(shí)，主要給 DOM 用  
    --> 
    <a id="myId" href="http://webabcd.cnblogs.com/">webabcd blog</a> 
 
    <script type="text/javascript"> 
        alert(document.getElementById('myId').innerHTML);  
    </script> 
</body> 
</html>

7、dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的縮寫(xiě)）element/_globalAttributes/dir.html

<!doctype html> 
<html> 
<head> 
    <title>dir</title> 
</head> 
<body> 
    <!--  
        bdo - 定義文本排列的方向（bdo 是 bi-directional override 的縮寫(xiě)）  
          dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的縮寫(xiě)）  
    --> 
    <bdo dir="rtl">123</bdo> 
</body> 
</html>

8、spellcheck - 是否使用瀏覽器的拼寫(xiě)檢查功能對(duì)元素內(nèi)的內(nèi)容做拼寫(xiě)檢查element/_globalAttributes/spellcheck.html

<!doctype html> 
<html> 
<head> 
    <title>spellcheck</title> 
</head> 
<body> 
    <!--  
        spellcheck - 是否使用瀏覽器的拼寫(xiě)檢查功能對(duì)元素內(nèi)的內(nèi)容做拼寫(xiě)檢查（支持如下元素：textarea; 類型為 text 的 input; contenteditable 為 true 的元素）  
          可能的值有："", "true", "false"  
    --> 
    <textarea rows="10" cols="20" spellcheck="true"> 
i am jack, i am webabcd, haha, good, hehe  
    </textarea> 
</body> 
</html>

#p#

9、hidden - 用于隱藏元素（不占位）element/_globalAttributes/hidden.html

<!doctype html> 
<html> 
<head> 
    <title>hidden</title> 
</head> 
<body> 
    <!--  
        hidden - 用于隱藏元素（不占位）  
    --> 
    <input type="text" hidden />     
    <input type="text" /> 
    <input type="text" hidden /> 
</body> 
</html>

10、contenteditable - 用于定義內(nèi)容是否可編輯element/_globalAttributes/contenteditable.html

<!doctype html> 
<html> 
<head> 
    <title>contenteditable</title> 
</head> 
<body> 
    <!--  
        contenteditable - 用于定義內(nèi)容是否可編輯  
          可能的值有："", "true", "false"  
    --> 
    <p contenteditable>我是可以編輯的，試試看</p> 
</body> 
</html>

11、contextmenu - 指定上下文菜單的數(shù)據(jù)源element/_globalAttributes/contextmenu.html

<!doctype html> 
<html> 
<head> 
    <title>contextmenu</title> 
</head> 
<body> 
    <!--  
        contextmenu - 指定上下文菜單的數(shù)據(jù)源  
 
        menu - 定義菜單（目前僅有 FireFox 實(shí)現(xiàn)了 context 菜單）  
          type - 菜單的類型，有兩種類型：context（右鍵菜單） 和 toolbar（工具欄菜單）  
          label - 菜單的名稱，顯示用  
          menuitem - 定義菜單項(xiàng)（菜單的子集）  
            label - 菜單項(xiàng)的名稱，顯示用  
            icon - 菜單項(xiàng)的圖標(biāo)  
    --> 
    <section contextmenu="myContextMenu"> 
        <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="" /> 
        <menu type="context" id="myContextMenu"> 
            <menuitem label="menuitem1" onclick="alert('menuitem1')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem> 
            <menuitem label="menuitem2" onclick="alert('menuitem2')"></menuitem> 
            <menu label="menuitem3" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"> 
                <menuitem label="menuitem31" onclick="alert('menuitem31')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem> 
                <menuitem label="menuitem32" onclick="alert('menuitem32')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem> 
            </menu> 
        </menu> 
    </section> 
    <!-- 工具欄式的菜單，目前還沒(méi)有瀏覽器實(shí)現(xiàn)此標(biāo)準(zhǔn) --> 
    <section contextmenu="myToolbarMenu"> 
        <menu type="toolbar"> 
            <li> 
                <menu label="File"> 
                    <button type="button" onclick="fnew()"> 
                        New...</button> 
                    <button type="button" onclick="fopen()"> 
                        Open...</button> 
                    <button type="button" onclick="fsave()"> 
                        Save</button> 
                    <button type="button" onclick="fsaveas()"> 
                        Save as...</button> 
                </menu> 
            </li> 
            <li> 
                <menu label="Edit"> 
                    <button type="button" onclick="ecopy()"> 
                        Copy</button> 
                    <button type="button" onclick="ecut()"> 
                        Cut</button> 
                    <button type="button" onclick="epaste()"> 
                        Paste</button> 
                </menu> 
            </li> 
            <li> 
                <menu label="Help"> 
                    <li><a href="#">Help</a></li> 
                    <li><a href="#">About</a></li> 
                </menu> 
            </li> 
        </menu> 
    </section> 
</body> 
</html>

12、draggable - 元素是否可拖拽；dropzone - 拖放的目標(biāo)元素（可承載被拖拽元素的元素）element/_globalAttributes/draggable_dropzone.html

<!doctype html> 
<html> 
<head> 
    <title>draggable dropzone</title> 
</head> 
<body> 
    <span>關(guān)于 draggable 和 dropzone 的詳細(xì)說(shuō)明，參見(jiàn) /other/drag_drop</span> 
</body> 
</html>