千呼万唤 HTML 5 (5) - 元素的通用属性

关注

转载最新推荐文章于 2026-09-04 08:55:24 发布 643 阅读 AI 写同款· GEO 优化 ›

AMD Ryzen AI Max+ 395四机集群实战：开源工具链与大模型推理优化全解析本文详细解析了基于AMD Ryzen AI Max+ 395处理器的四机集群搭建与优化实践，涵盖硬件配置、开源工具链评测及大模型推理优化技巧。通过深度测试，揭示了集群在AI推理中的性能瓶颈与解决方案，特别适合需要扩展显存的大模型实验场景。文章还提供了成本效益分析，帮助开发者做出更明智的选型决策。阅读详情

原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/02/2335318.html

作者：webabcd

介绍
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，参考第一个示例
          第二个示例描述为：有全键盘的设备快捷键为：ctrl + alt + q（目前 IE 为：ctrl + shift + q），仅有小键盘的设备快捷键为：“数字 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 - 指定需要应用的 css 类选择器
element/_globalAttributes/class.html

<!doctype html>
<html>
<head>
    <title>class</title>

    <style>
        .myClass { font-size:36px; }
        .myClass2 { color:Blue; }
    </style>
</head>
<body>

    <!--
        class - 指定需要应用的 css 类选择器
    -->

    <span class="myClass myClass2">webabcd</span>

</body>
</html>

复制代码

4、title - 用于描述元素信息，相当于 ToolTip
element/_globalAttributes/title.html

<!doctype html>
<html>
<head>
    <title>title</title>
</head>
<body>

    <!--
        title - 用于描述元素信息，相当于 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>

复制代码

5、tabindex - 用于定义 TAB 键的导航顺序（整型值）
element/_globalAttributes/tabindex.html

<!doctype html>
<html>
<head>
    <title>tabindex</title>
</head>
<body>

    <!--
        tabindex - 用于定义 TAB 键的导航顺序（整型值）
          按从小到大的顺序导航（0 除外，0 会被最后导航到）
          负数则不会被导航到
    -->

    <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 - 用于定义元素的唯一标识，主要给 DOM 用
element/_globalAttributes/id.html

<!doctype html>
<html>
<head>
    <title>id</title>
</head>
<body>

    <!--
        id - 用于定义元素的唯一标识，主要给 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 的缩写）
element/_globalAttributes/dir.html

<!doctype html>
<html>
<head>
    <title>dir</title>
</head>
<body>

    <!--
        bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
          dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
    -->
    <bdo dir="rtl">123</bdo>

</body>
</html>

复制代码

8、spellcheck - 是否使用浏览器的拼写检查功能对元素内的内容做拼写检查
element/_globalAttributes/spellcheck.html

<!doctype html>
<html>
<head>
    <title>spellcheck</title>
</head>
<body>

    <!--
        spellcheck - 是否使用浏览器的拼写检查功能对元素内的内容做拼写检查（支持如下元素：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>

复制代码

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 - 用于定义内容是否可编辑
element/_globalAttributes/contenteditable.html

<!doctype html>
<html>
<head>
    <title>contenteditable</title>
</head>
<body>

    <!--
        contenteditable - 用于定义内容是否可编辑
          可能的值有："", "true", "false"
    -->

    <p contenteditable>我是可以编辑的，试试看</p>

</body>
</html>

复制代码

11、contextmenu - 指定上下文菜单的数据源
element/_globalAttributes/contextmenu.html

<!doctype html>
<html>
<head>
    <title>contextmenu</title>
</head>
<body>

    <!--
        contextmenu - 指定上下文菜单的数据源

        menu - 定义菜单（目前仅有 FireFox 实现了 context 菜单）
          type - 菜单的类型，有两种类型：context（右键菜单） 和 toolbar（工具栏菜单）
          label - 菜单的名称，显示用
          menuitem - 定义菜单项（菜单的子集）
            label - 菜单项的名称，显示用
            icon - 菜单项的图标
    -->

    <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>

    <!-- 工具栏式的菜单，目前还没有浏览器实现此标准 -->
    <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 - 拖放的目标元素（可承载被拖拽元素的元素）
element/_globalAttributes/draggable_dropzone.html

<!doctype html>
<html>
<head>
    <title>draggable dropzone</title>
</head>
<body>

    <span>关于 draggable 和 dropzone 的详细说明，参见 /other/drag_drop</span>

</body>
</html>