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

最新推荐文章于 2024-04-23 02:00:49 发布
最新推荐文章于 2024-04-23 02:00:49 发布
阅读量561 收藏
点赞数
分类专栏： HTML 文章标签： html button input menu class 浏览器

原文地址：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>
复制代码



OK
[源码下载]


scoliver
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230429.pdf
06-21
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230429.pdf
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230604.pdf
06-19
东吴证券-固态电池行业深度：千呼万唤始出来，犹抱琵琶半遮面-230604.pdf
html标签
齐枫的博客
08-10 324
标签 定义和用法 表示一个缩写形式，比如 "Inc."、"etc."。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻 译系统以及搜索引擎分度器提供有用的信息。 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。 浏览器可能会根据这个信息改变对这些文本的显示方式，或者用其他文本代替。也许当前流行的浏览器对 标签中包含的文本还
千呼万唤 HTML 5 (6) - 表单元素之 input 元素
scoliver的专栏
03-08 780
原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/06/2339534.html 作者：webabcd 介绍 HTML 5: 表单元素之 input 元素 表单元素之 input 元素 - text, password, url, telephone, email, search, file, radio, ch
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月13日-2月19日)
Kevin Fan
02-22 1549
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(2月13日-2月19日) 本周Silverlight学习资源更新 Silverlight 编写Json查看器(JsonViewer) Hunter.Wei Silverlight 设计器错误解决办法! NatureSexy Silverlight
HTML5, CSS3, ES5新的web标准和浏览器支持一览 转（一）
java home
03-03 394
本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已...
地产行业深度报告：千呼万唤始出来，REITs开启新篇章.pdf
07-09
地产行业深度报告：千呼万唤始出来，REITs开启新篇章.pdf
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 858
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
前端开发攻略---合并表格单元格，表格内嵌套表格实现手风琴效果。
nibabaoo的博客
04-18 498
合并表格单元格，表格内嵌套表格实现手风琴效果。
HTML 入门
lvshihao_的博客
04-16 1107
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
HTML中的页面可见性
小卡酷谋的博客
04-22 348
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
数据可视化-ECharts Html项目实战（13）
qq_49513817的博客
04-17 2808
今天的文章，我会以鼠标左键触发为例带着大家学习ECharts特殊图表设置中组件交互的行为事件。希望你能在本篇文章中有所收获。希望我的文章能帮助到正在学习的你，也欢迎各位来本篇文章下一起交流学习，共同进步。
高频前端面试题汇总之HTML篇
qq_51685537的博客
04-18 667
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
用html写一个有趣的动态背景
liulang68的博客
04-20 455
【代码】用html写一个有趣的动态背景。
前端三剑客 HTML+CSS+JavaScript ② HTML相关概念
m0_73983707的博客
04-18 1146
html双标签，可以分为：一种是父子级 包含关系的标签 一种是兄弟级 并列关系的标签HTML标签名、类名、标签属性和大部分属性值统一用小写1.在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择”检查“2.【检查】和【查看网页源代码】的区别：【查看网页源代码】看到的是程序员编写的源代码【检查】看到的是经过浏览器”处理“后的源代码备注：日常开发中，【检查】用的最多3.网页的基本结构如下：①想要呈现在网页中的内容写在body标签中②head标签中的内容不会出现在网页中。
html中字体加粗
Dxy1239310216的博客
04-18 426
标签表示文本的重要性。在需要强调文本的重要性时，应该使用。标签在视觉上都是将文本加粗，但是它们有不同的语义含义。标签不仅表示粗体文本，还表示文本的重要性。在只需要视觉上的加粗效果时，可以使用。属性来设置字体加粗。在HTML中，你可以使用。标签用于表示粗体文本，而。在CSS中，你也可以使用。标签只是表示粗体，而。
kotlinx.serialization
08-25
例如，可以在序列化和反序列化Project类时，自动填充language属性的默认值为"Kotlin"，并且不会将该属性写入JSON字符串中。 此外，kotlinx.serialization库还支持可空属性的默认值为null。在序列化和反序列化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值