HTML的全局属性

Posted 2022-09-18 ckafter

关于html的全局属性，它们使HTML能表达更加丰富的与仪，提供更多实用的功能。

一、HTML原有属性

accesskey,class,dir,id,lang,style,tabindex,title(经常使用的就不介绍了)

1，accesskey

作用：浏览器用来创建激活和聚焦元素的快捷键。

值：一个键盘字符如 O

范围：支持该属性的元素有<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>

注意：使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽

<div>
    <a href="https://www.baidu.com" accesskey="b">百度</a>
    <a href="https://www.taobao.com" accesskey="a">阿里</a>
    <a href="https://www.qq.com" accesskey="t">腾讯</a>    
    <p>快捷键(alt+b)可以跳转到百度；快捷键(alt+a)可以跳转到阿里；快捷键(alt+t)可以跳转到腾讯</p>
</div>

2，dir

作用：文字的方向

值：ltr/rtl/auto

3，tabindex

作用：规定元素的tab键次序

值：number(1是第一个)

4，title

作用：规定关于元素的额外信息，鼠标移到元素上时显示一段提示文本。

二、HTML5新增属性

contenteditable,data-*,draggable,hidden,spellcheck

1，contenteditable

作用：指定是否可以在浏览器里编辑内容

值：true/false

注意：设置document.designMode =‘on‘时，页面的任意位置都可以编辑；使用contenteditable =‘true‘则只对具体元素和其包含的元素起作用

移动端：移动端ios5以及android3之后才支持该属性

2,draggable

作用：用户是否可以拖动元素

值：true/false/auto

注意：链接和图像默认是可拖动的

3，hidden

作用：显示或隐藏该元素(与display:none作用一样)

值：hidden="" || hidden= "hidden"

4，spellcheck

作用：规定是否对元素进行拼写和语法检查，对拼写错误的单词会在其下方出现红线

范围：可编辑区域（表单或contenteditable元素）

值：true/false

注意：移动端支持不好

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考：https://www.xiaohuochai.cc/posts/5a7eefb01453972fd0a53eeb