web前端学习-不常用的HTML5全局属性

时间：2021-02-22 12:57:17

最近刚进入HTML5的学习，在书上学习到一些不常用的全局属性分享一下，也当做记录，防止自己忘记了。有一些属性是HTML5的属性，我会标注出来。
全局属性大概意思就是大部分的标签都是能用到的属性：

  1. accesskey属性：
    生成快捷键，比如accesskey=n在用户使用ALT+N的时候就能把焦点移到这个标签上，常用与可编辑的标签上，比如input框等。

  2. tabindex属性：
    HTML页面上的键盘焦点可以通过Tab键在各元素之间切换，用tabindex属性可以改变切换顺序。tabindex的值设置为-1的时候不会切换到这个元素上的。

  3. contenteditable属性(H5)：
    可以让用户修改页面上的内容。比如让一个p标签可以在点击的时候可编辑。值有true和false两个。表示可不可以编辑
  4. dir属性:
    用来规定元素中文字的方向，其中有ltr和rtl两个值，表示文字位于左边和右边，有点类似文字居中和左右浮动的效果。
  5. draggable属性(H5):
    可拖放元素，是H5规定的一个属性，类似百度上的选中文字之后可以直接拖一下就能用百度搜索这个关键字。其中搭配的有dropzone等一些属性，这个相关的有事件处理，会比较复杂，并且不是所有的浏览器都会支持。
  6. hidden属性：
    隐藏元素，如果你想隐藏一个属性，就可以直接在标签中写这个属性。
  7. lang属性：
    用于说明元素内容使用的语言，必须使用有效的iso语言代码。
  8. spellcheck属性：
    用于拼写检查，这个属性只能用于用户可编辑的元素上才有意义。例如当用户输入一个不符合检查规范（单词…）的时候，就会在这个单词下面画红色的曲线。

以下是我做的demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>accesskeyTest</title>
</head>
<body>
<form>
    Name:<input type="text" name="name" accesskey="n" tabindex="1" spellcheck="true">
<p/>
    Password<input type="password" name="password" accesskey="p" tabindex="-1" >
<p/>
<input type="submit" value="Log In" accesskey="l" tabindex="5">
<p/>
<p contenteditable="true" tabindex="2">It is contenteditable Test</p>
<!--这个地方的"）"会被放到前面，我还没有查到原因，知道原因的请告诉我，谢谢-->
<p dir="rtl" tabindex="3">It is dirTest(right-to-left)</p>
<p dir="ltr" draggable="true" tabindex="4">It is dirTest(left-to-right)</p>
</form>
</body>
</html>
标签：

相关文章