HTML5全局属性

2021-01-03 本文已影响0人踏莎行

元素属性有局部属性和全局属性，你知道这些全局属性吗（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-" 之后必须有至少一个字符
属性值可以是任意字符串