元素属性有局部属性和全局属性，你知道这些全局属性吗（id，class，title，style就不说了^ _ ^）？
一、accesskey
语法：
<element accesskey="character">
<!-- character是你设置的快捷键 -->
使用accesskey属性可以设定一个或者几个用来选择页面上的元素的快捷键。但是在不同的操作系统之下，使用快捷键的方式有所不同。
- windows : alt+character
- Mac : Control + Alt + character
说明：
- 在HTML4.01的版本中，accesskey 属性可使用于: <a>, <area>, <button>, <input>, <label>, <legend>, 和 <textarea>。
- 在 HTML5 中, accesskey 属性可用于任何 HTML 元素 ，但是不一定会生效，如给div添加这个属性
下面举两个简单的例子：
- 表单聚焦
为了展示效果，可以在input标签前面多加一些<br />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
(<br> * n + tab)
<input type="text" accesskey="i">
</body>
</html>
在浏览器中打开之后，使用快捷键，很方便的跳转到表单所在位置并聚焦表单。也可以在表单域中使用，可以实现表单之间的相互跳转
- 链接跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<a href="https://www.baidu.com" accesskey="a">跳转至百度</a>
</body>
</html>
在浏览器中打开，按alt+a之后，页面就会自动跳转至百度
二、contenteditable
contenteditable是HTML5新增的属性，用途是让用户能够修改页面上的内容
属性值
- true：允许用户修改
- false：不允许用户修改
- inherit：从父级元素继承
使用
<element contenteditable="true/false">
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div contenteditable="true" id="btn">请输入内容</div>
</body>
</html>
在浏览器中打开之后，点击“请输入内容”之后就会出现输入光标，就能输入了。
说明
- 对于事件的支持: 支持focus、blur事件，不支持change事件
- 也不支持input，textarea那些局部属性，如placeholder。
三、contextmenu
contextmenu属性用来为元素设定快捷菜单。会在触发菜单时弹出来（如在windows用户右键时弹出）
使用
<element contextmenu="menu_id">
<!-- 需要配合menu元素使用 -->
<!-- menu_id:menu元素的id -->
<!-- 目前还没有浏览器支持此属性 -->
四、dir
dir属性来规定元素中文字的方向
使用
<element dir="ltr/rtl">
属性值
- ltr：文字从左到右显示
- rtl：文字从右到左显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<p dir="rtl">前端开发</p>
<p dir="ltr">前端开发</p>
</body>
</html>
效果就是
dir.PNG
五、draggable（dropzone与draggable配合使用）
通过給元素添加此属性，可以告诉浏览器文档中哪些元素可以被拖动
属性值
- true：此元素可以被拖动
- false：此元素不可以被拖动
- auto：浏览器自主决定某个元素是否可以被拖动
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: red;" draggable="true"></div>
</body>
</html>
展示的效果是，浏览器允许我们拖动
allow.jpg
但是浏览器不允许让我们把他放在任意的地方，但鼠标箭头移出了原来元素的范围时，就会显示一个禁止图标
no.jpg
简单说一下拖拽事件
- dragstart：元素开始拖动时触发
- drag：元素被拖动时反复触发
- dragend：元素拖动完成时触发
- dragenter ：移入目标元素时触发
- dragover ：移入目标元素后连续触发
- dragleave ：离开目标元素触发
- drop ：在目标元素释放鼠标触发
六、hidden
hidden是一个布尔值属性，表示当前元素无需关注，浏览器会对设置了hidden属性的元素进行隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="box" style="width: 300px; height: 300px; background-color: red;" draggable="true"></div>
<button id="btn">点我隐藏div</button>
<script>
var btn = document.getElementById('btn')
var box = document.getElementById('box')
btn.onclick = function(){
box.setAttribute('hidden', 'true')
}
</script>
</body>
</html>
为了更明显的显示，我使用了js对div进行控制，当点击按钮之后，为div添加了hidden属性，接着div就被隐藏了.通过对div的display进行观察，实际上是div的display的值变成了none
七、lang
刚开始以为lang属性是<html></html>的局部属性呢，其实他也是一个全局属性。
- 表示该元素内部使用的文字是哪一种自然语言书写而成。该属性在浏览器安装有某种插件时，可以触发浏览器的翻译行为、语音阅读等。lang属性值必须使用有效的ISO语言代码, 可以参https://www.w3school.com.cn/tags/html_ref_language_codes.asp
中给出的ISO语言代码。 - 使用该属性该可以让浏览器调整其表达元素内容的方式。如，改变使用的引号，在使用了文字朗读器的情况下正确发音。
八、spellcheck
此属性是用来表明浏览器是否应该对元素的内容进行拼写检查。这个属性只有用在可以编辑的元素上时才有意义，如input，textarea，当然也包含设置了contenteditable=‘true’的元素。
用法
<element spellcheck='true/false'>
属性值
- true：规定应当对元素的文本进行拼写检查
- false：规定不应对元素的文本进行拼写检查
九、tableindex
HTML页面中的键盘焦点可以通过按tab键依次聚焦，并且可以来回切换，tabindex的属性就是可以默认改变这种顺序，自己来设定。
取值
- 当取值为负数时，元素不会在用户按下tab时聚焦
- 当取值为0时，元素排在了最后一个聚焦
- 当取值为正时，按照数字的顺序依次聚焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tableindex</title>
</head>
<body>
<input type="text" tabindex="-1">
<input type="text" tabindex="0">
<input type="text" tabindex="1">
<input type="text" tabindex="4">
<input type="text" tabindex="3">
<input type="text" tabindex="2">
<input type="text" tabindex="5">
<input type="text" tabindex="9">
<input type="text" tabindex="7">
<input type="text" tabindex="8">
<input type="text" tabindex="6">
</body>
</html>
十、data-*
data-* 属性用于存储页面或应用程序的私有自定义数据，赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验
data-* 属性包括两部分：
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
网友评论