html5-全局属性

h5全局属性前面没怎么用过，今天有空跟着w3c把全局属性过一遍。

draggable 属性

• draggable 属性规定元素是否可拖动 （链接和图像默认是可拖动的）

    <p>这是一个不可拖动的段落。</p>
    <p draggable="true">这是一个可拖动的段落。</p>

image.png

• 下面一个p标签可以通过鼠标左键拖动

contenteditable 属性

• contenteditable 属性规定元素内容是否可编辑（如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性）

    <p>这是一个不可编辑的段落。</p>
    <p contenteditable ="true">这是一个可编辑的段落。</p>

image.png

• 下面一个p标签可以编辑

accesskey 属性

• 激活（使元素获得焦点）元素的快捷键。（以下元素支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>）

        <a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a><br />
        <a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>

image.png

• window系统按 alt+ accesskey 激活 ， 在mac下按 control + alt + accesskey，自定义快捷激活

  
  image.png

dir 属性

• 规定元素内容的文本方向(ltr默认从左到右， rtl从右到左)

<p dir="rtl">从右到左</p>

image.png

lang 属性

• 规定元素内容的语言。（以下标签中无效：<base>,
  , <frame>, <frameset>,

  ---

  , <iframe>, <param> 以及 <script>）

    <p>This is a paragraph.</p>
    <p lang="fr">Ceci est un paragraphe.</p>

image.png

*没看出什么区别

spellcheck 属性

*spellcheck 属性规定是否对元素进行拼写和语法检查。

• 可以对以下内容进行拼写检查：

1. input 元素中的文本值（非密码）

2. <textarea> 元素中的文本

3. 可编辑元素中的文本

<p contenteditable="true" spellcheck="true">这是一个段落。</p>

image.png

tabindex属性

• tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。

    <a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
    <a href="http://www.google.com/" tabindex="1">Google</a>
    <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

image.png

• 第一次键盘按下tab键锁定google,第二次按下锁定w3cschool......

title 属性

• 规定关于元素的额外信息。

• 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）

• 提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性

    <p title="提示文字22222222">W3School.com.cn</p>
    <a title="提示文字1">PRC</a> was founded in 1949.

image.png

• 鼠标移动到PRC上时出现提示文字1

style 属性    class 属性     id 属性    data-* 属性     hidden 属性(跳过)

contextmenu属性

• 规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单
• contextmenu 属性的值是要打开的 <menu> 元素的 id
  *w3c上说目前只有 Firefox 支持 contextmenu 属性。但是我Firefox也没成功，曰了。。。。

<div contextmenu="mymenu">

<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>

</div>

image.png

dropzone 属性

• 规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。

div dropzone="copy">啦啦啦啦啦德玛西亚</div>

• 然后更曰了狗。。。。。（目前所有主流浏览器都不支持 dropzone 属性。）

translate 属性

• translate 规定是否应该翻译元素内容
• 所有主流浏览器都无法正确地支持 translate 属性。