HTML的16个全局属性_html/css_WEB-ITnose

  • A+
所属分类:html教程
摘要

HTML的16个全局属性

目录 [1]accesskey [2]class [3]dir [4]id [5]lang [6]style [7]tabindex [8]title [9]contenteditable [10]contentmenu [11]data-* [12]draggable [13]dropzone [14]hidden [15]spellcheck [16]translate

前面的话

  在HTML中,属性能表达相当丰富的语义,而且属性也会额外提供很多实用的功能,HTML共支持16个常见的全局属性。

HTML原有属性

accesskey

  作用:浏览器用来创建激活或聚焦元素的快捷键

  值:一个键盘字符如 O

  范围:支持该属性的元素有、、、、、、</p> <p>  注意:使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽</p> <p class="sycode"> <pre class="precsshui"><div> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5iYWlkdS5jb20=" accesskey="b">百度</a> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy50YW9iYW8uY29t" accesskey="a">阿里</a> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5xcS5jb20=" accesskey="t">腾讯</a> <p>快捷键(alt+b)可以跳转到百度;快捷键(alt+a)可以跳转到阿里;快捷键(alt+t)可以跳转到腾讯</p></div></pre> </p> <p></p> <h3>class</h3> <p>  作用:规定元素的一个或多个类名</p> <p>  值:多个类名用空格分隔</p> <p>  注意:类名不能以数字开头</p> <p> </p> <h3>dir</h3> <p>  作用:文字的方向</p> <p>  值:ltr/rtl/auto</p> <p></p> <h3>id</h3> <p>  作用:规定元素的唯一标识</p> <p>  注意:若浏览器中出现多个id名的情况,CSS样式对所以该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效</p> <p></p> <h3>lang</h3> <p>  作用:规定元素内容的语言</p> <p>  值:en英文/zn中文</p> <p> </p> <h3>style</h3> <p>   作用:设置元素的行间样式</p> <p> </p> <h3>tabindex</h3> <p>  作用:规定元素的tab键次序</p> <p>  值:<number>(1是第一个)</p> <p class="sycode"> <pre class="precsshui"><div> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5iYWlkdS5jb20=" tabindex="3">百度</a> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy50YW9iYW8uY29t" tabindex="2">阿里</a> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5xcS5jb20=" tabindex="1">腾讯</a> </div></pre> </p> <p> </p> <h3>title</h3> <p>  作用:规定关于元素的额外信息,鼠标移到元素上时显示一段提示文本 </p> <p> </p> <p> </p> <h2>HTML5新增属性</h2> <h3>contenteditable</h3> <p>  作用:指定是否可以在浏览器里编辑内容</p> <p>  值:true/false</p> <p>  注意:设置document.designMode ='on'时,页面的任意位置都可以编辑;使用contenteditable ='true'则只对具体元素和其包含的元素起作用</p> <p>  移动端:移动端ios5以及android3之后才支持该属性</p> <p></p> <p>  <演示框>选中文字后,点击下列相应属性值可进行演示</p> <p></p> <h3>contextmenu(没有浏览器支持)</h3> <p>  作用:跟元素关联的右键菜单</p> <p>  值:<menu>元素中唯一ID</p> <p> </p> <h3>data-*</h3> <p>  作用:用于存储页面或应用程序的私有定制数据</p> <p>  注意:属性名不应包含任何大写字母,且在前缀"data-"之后必须有至少一个字符;属性值可以是任意字符串</p> <p>  使用:可以在所有浏览器中使用getAttribute方法来获取data-*属性的值,也可以使用javascript中dataset属性访问data-*属性的值,不过IE10-浏览器不支持dataset</p> <p> </p> <h3>draggable(IE8-不支持)</h3> <p>  作用:用户是否可以拖动元素</p> <p>  值:true/false/auto</p> <p>  注意:链接和图像默认是可拖动的</p> <p> </p> <h3>dropzone(所有浏览器都不支持)</h3> <p>  作用:规定在拖动被拖动数据时是否进行复制、移动或链接</p> <p>  值:copy拷贝/move移动/link指向原始数据链接</p> <p> </p> <h3>hidden(IE7-不支持)</h3> <p>  作用:显示或隐藏该元素(与display:none的作用一样)</p> <p>  值:true/false</p> <p> </p> <h3>spellcheck(IE9-不支持) </h3> <p>  作用:规定是否对元素进行拼写和语法检查,对拼写错误的单词会在其下方出现红线</p> <p>  范围:可编辑区域(表单或contenteditable元素)</p> <p>  值:true/false</p> <p>  注意:移动端支持不好</p> <p></p> <h3>translate(所有浏览器都不支持)</h3> <p> 作用:规定是否应该翻译元素内容</p> <p> 值:yes/no <div class='share layui-clear bdsharebuttonbox'> <li ><a href='javascript:;' data-cmd="weixin" class='wechat'><i class="layui-icon"></i>微信</a></li> <li ><a href='javascript:;' data-cmd="more" class='share-btn'><i class="layui-icon"></i>分享</a></li> </div> <img src="/static/images/article_wechat.jpg?1" style="margin-top: 30px;" alt="php教程最新课程二维码"/> <div class='tags layui-clear'> <li>相关标签:<a href="/search?word=html的16个全局属性" target="_blank">HTML的16个全局属性</a></li> <li class='line'> 本文原创发布php教程 ,转载请注明出处,感谢您的尊重! </li> </div> <div class='page layui-clear'> <ul> <li>上一篇:<a href="/div-tutorial-271196.html">【02】json语法_html/css_WEB-ITnose</a></li> <li>下一篇:<a href="/div-tutorial-271198.html">CSS3之边框属性border_html/css_WEB-ITnose</a></li> </ul> </div> </div> <p class="article-relative-header">相关文章</p> <p class="article-relative-header">相关视频</p> <hr class="layui-clear"> <ul class="article-relative-ul"> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10862.html" target="_blank">Html如何设置横向导航结构_HTML/Xhtml...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10863.html" target="_blank">Html+css实现纯文字和带图标的按钮_HTML...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10868.html" target="_blank">HTML对于元素水平垂直居中的探讨_HTML/Xh...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10871.html" target="_blank">修改输入框placeholder文字默认颜色-we...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-271197.html">HTML的16个全局属性_html/css_WEB...</a></li> </ul> <ul class="article-relative-ul"> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31616.html" target="_blank" title='轮播图案例讲解'>轮播图案例讲解</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31615.html" target="_blank" title='轮播图案例的预备知识(3)'>轮播图案例的预备知识(3)</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31614.html" target="_blank" title='轮播图案例的预备知识(2)'>轮播图案例的预备知识(2)</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31613.html" target="_blank" title='轮播图案例的预备知识(1)'>轮播图案例的预备知识(1)</a></li> </ul> <div class="layui-clear"></div> </div> <div class="comment layui-clear"> <div class="J_Header" id="J_Header"> <p class="header-title">网友评论</p> <p class="header-protocol">文明上网理性发言,请遵守 <a href="javascript:void(0);">新闻评论服务协议</a></p> <a class="article-comment-publish" href="javascript:void(0);">我要评论</a> </div> <div class="layui-row diy-page"></div> <div class="text-box layui-clear article_comment_textarea" > <div class="box-left"> <li> <a href="javascript:login_trigger()"> <img src="/static/images/user_avatar.jpg" alt=""> </a> </li> <li><a href="javascript:login_trigger()"></a></li> </div> <div class="box-right"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea article_textarea"> 立即提交

除非注明,否则均为@蒲公英网原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.aipgy.com/322307.html

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: