全局属性：对于任何一个标签都是可以使用的属性。

一、data-*

在html5之前需要在html标签上添加自定义属性来存储和操作数据，可能是会写<form role="xxx">，但这是种非常不规范的方式。

也正是因为有这种自定义属性的需求，在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性，只要加上前缀data-，通过这种方式避免与未来的html版本冲突。

<form data-type="comment" class="container">

...

</form>

data-*自定义属性不影响页面布局，但可读可写。下面介绍怎样读写。

1、获取自定义属性

获取时通过dataset对象，使用"."来获取属性，需要去掉data-前缀。

html:

<div id='test' data-age="23">html5 data-*自定义属性 data-age</div>

js获取自定义"data-*"属性

var oDiv=document.getElementById("test");

alert(oDiv.dataset.age);

jquery获取

$('#test').data('age');

2、获取带连字符的自定义属性

遇到自定义属性中有连字符需要转化为驼峰命名。

html:

<div id='test' data-user-list="user-list">html5 data-*自定义属性data-user-list属性</div>

js获取：

var oDiv=document.getElementById("test");

alert(oDiv.dataset.userList);

jquey获取：

$('#test').data('userList');

3、动态设置data-*自定义属性值

js设置

<div id='test' data-user-list="user-list">html5 data-*自定义属性data-user-list属性</div>

<script type="text/javascript">

var oDiv=document.getElementById("test");

alert(oDiv.dataset.userList);

oDiv.dataset.name="starof";

alert(oDiv.dataset.name);

</script>

网页被修改为：

<div id="test" data-user-list="user-list" data-name="starof">html5 data-*自定义属性data-user-list属性</div>

jquery设置：

$('#test').data('name','starof');

4、getAttribute和setAttribute

也可以通过setAttribute()和getAttribute()方法来设置和获取data-*自定义属性

<div id='test' >html5 data-*自定义属性 data-age</div>

<script>

var oDiv=document.getElementById("test");

oDiv.setAttribute("data-age","23");

alert(oDiv.getAttribute("data-age"));

</script>

二、hidden布尔值

表示元素的不可见状态，有2个值，true和false。

html:用css中display:none实现。

html5：

<label hidden>看不见 </label>

原理：hidden本质上还是设置类似display:none的效果。

举例探究：上面例子中label标签是不可见的，现在显示设置其display属性，尽管有hidden属性，还是可以看见元素。

<label hidden style="display:inline;">看不见 </label>

如果不显示设置display属性，则设置了hidden属性的元素display计算值为none，将脱离文档流，不显示。

三、spellcheck

规定是否必须对元素进行拼写或语法检查。用了spellcheck属性，浏览器会帮助检查html元素文本内容拼写是否正确，只有当html元素在可编辑状态，sepllcheck属性才有意义，所以一般是针对input[text],textarea元素用户输入内容进行拼写和语法检查，拼写错误有红色的波浪下划线，右键会给提示。

举例：

<textarea spellcheck="true" cols="60" rows="5"> </textarea>

四、tabindex

tabindex 属性规定元素的 tab键切换顺序（当 tab 键用于导航时），可将tabIndex属性设成1到32767的一个值。

Note：tabindex属性设为一个负值（如tabindex="-1")时，用户使用tab键切换时该html元素将不会被选中。

举例：

<form>

　　　　<label>姓名: <input type="text" name="name" tabindex="2"/></label>

　　　　<br/>

　　　　<label>身份证号: <input type="text" name="city" tabindex="-1"/></label>

　　　　</br>

　　　　<label>准考证号: <input type="text" name="country" tabindex="1"/></label>

　　　　</br>

　　　　<input type="submit" value="查询" tabindex="3"/>

</form>

五、contenteditable

1、基本用法

是否允许用户编辑内容，是个非常神奇的属性，通常我们使用的输入文本内容的标签是input和textarea，使用contentEditable属性后，可以在div,table,p,span,body等很多元素中输入内容。。点击时出现一个编辑框。配合js对网页内容局部修改。过去要使用输入框替代。

当一个元素的contenteditable状态为true（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。否则，该元素不可编辑。

举例：

<p contenteditable>我的内容可修改</p>

可以自定义样式如下：使用轮廓线代替边框，因为它不会向盒状模型添加元素，所以页面区域不会在触发时突然闪现。

[contenteditable]:hover, [contenteditable]:focus {

    outline: 2px dotted red;

}

如果想要整个网页可编辑，可在body或html标签内设置contentEditable。这样就和下面将要介绍的desginMode效果很像了。

2、分享几个有意思的应用

contenteditable在希望用户能够与演示交互和更改值的教程时它非常有用,比如CSS技巧演示。

另外一个神奇的东东：在浏览器地址栏输入data:text/html, <html contenteditable> ，即可打开一个简单的在线编辑器。

source：one line browser notepad

也可用html5创建幻灯片，然后在演示时在浏览器中实时编辑，非常酷。

六、desginMode

用来指定整个页面是否可编辑，有两个值，on和off。该属性只能用javascript来修改值。如果design设置为on，则所有允许设置contenteditable的元素都可编辑。

用法：

window.document.designmode="off";

designmode为on时，整个页面都是可编辑的。全局都可修改不是很实用，还是contenteditable这种对局部的修改比较实用。

七、accesskey

accesskey属性允许设置一个或者多个键盘快捷键，实现快速选取页面元素。

举例：

<form>

　　用户名： <input type="text" name="name" accesskey="n"/>

　　<p/>

　　密码： <input type="password" name="password" accesskey="p"/>

　　<p/>

　　<input type="submit" value="登录" accesskey="s"/>

</form>

八、draggable和dropzone

这两个属性放在一起使用，因为它们是新的拖放API（DnD API）的一部分。draggable表示是否允许用户拖动元素；dropzone规定元素被拖放到哪个区域。

draggable属性有3个值：true表示元素可拖动；false表示元素不可拖动；auto表示使用用户代理默认行为。

dropzone属性有3个值：copy表示创建被拖动元素的一个副本；move实际将元素移动到新位置；link创建被拖动的数据的链接。

没有过多研究不多介绍了。

了解更多和想看demo可参考：HTML5 drag & drop 拖拽与拖放简介

资源链接：

理解HTML5语义 – 第2部分：文档结构和全局属性

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4593741.html有问题欢迎与我讨论，共同进步。

html5全局属性的更多相关文章

  1. HTML5全局属性和事件详解

    属性: HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素. 属性 描述 contenteditable 规定是否允许用户编辑内容. contextmenu 规定元素 ...

  2. HTML5全局属性和事件

    全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件.   属性:   HTML5属性能够赋给标签元素含义和语 ...

  3. HTML5全局属性汇总

    局部属性和全局属性 局部属性:有些元素能规定自己的属性,这种属性称为局部属性.比如link元素,它具有的局部属性有href. rel. hreflang. media. type. sizes这六个. ...

  4. 学习HTML5 全局属性 accesskey-title

    属性classcontextmenu指定一个元素的上下文菜单.当用户右击该元素,出现上下文菜单dirdropzone指定是否将数据复制,移动,或链接,或删除idspellcheck检测元素是否拼写错误 ...

  5. 自学HTML5第一天（认识HTML5的全局属性）

    contextmenu 属性 规定 <div> 元素的上下文菜单.上下文菜单会在用户右键点击元素时出现.列子: <div contextmenu="mymenu" ...

  6. html5中的全局属性

    在html5中,新增了一个"全局属性"的概念,所谓全局属性,是指可以对任何属性都使用的属性.下面列出常用的全局属性. 1.contentEditable属性,是微软开发的,该属性主 ...

  7. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  8. html5权威指南：html全局属性

    html全局属性:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp 辅助记忆:(ail1,s2,c3,t3,d4)(acd ...

  9. html5 转义实体字符 元数据 跳转 全局属性 id class lang style

    实体 Html 实体就是把特殊字符通过代码显示出来, 比如, <>在浏览器会识别为标签,不能正常显示, 这是你就需要安如<去表达左尖括号.     元数据 2. 声明字符编码 3.模 ...

随机推荐

  1. SQL查询数据的几大方法

    有你,查询数据我什么都不怕.快快掌握!! 出大招的工具: 1.使用LIKE.BETWEEN.IN进行模糊查询 eg1: SELECT * FROM Students WHERE 姓名 like '张% ...

  2. js的动态加载、缓存、更新以及复用（三）

    总体思路 1.  建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2.  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3.  Js服务只提供通用的 ...

  3. CentOS系统Kernel panic - not syncing: Attempted to kill init

    结果启动虚拟机出现如下问题: Kernel panic - not syncing: Attempted to kill init     解决方法: 系统启动的时候,按下'e'键进入grub编辑界面 ...

  4. jquery.sobox 经典版弹窗控件

    sobox 是一款非常实用的,基于 jQuery 的弹窗控件.功能非常完整,而代码量又非常少(压缩完仅8k不到)的一款弹窗控件,如果你熟悉ext的弹窗控件,那么sobox的使用对你来说应该是愉悦而完全 ...

  5. 使用 HTML5 WebGL 实现逼真的云朵效果

    这里给大家展示一个使用 HTML5 WebGL 实现超逼真的云朵效果.WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实 ...

  6. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  7. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  8. 总结的一些微信API接口

    本文给大家介绍的是个人总结的一些微信API接口,包括微信支付.微信红包.微信卡券.微信小店等,十分的全面,有需要的小伙伴可以参考下. 1. [代码]index.php <?php include ...

  9. 【初探Underscore】再说模版引擎

    前言 Underscore 是一个JavaScript实用库,提供了类似Prototype.js (或 Ruby)的一些功能,但是没有扩展任何JavaScript内置对象. 它弥补了部分jQuery没 ...

  10. JavaScript 数据类型判断

    JavaScript 的数据类型分为两类:原始类型(基本类型)和对象类型(引用类型).原始类型包括数字.字符串和布尔值,另外有两个特殊的原始值:null 和 undefined,除此之外的都是对象.对 ...