`
天梯梦
  • 浏览: 13630100 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

HTML5: 全局属性

 
阅读更多

出处:http://www.cnblogs.com/starof/p/4593741.html

 

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

 

一、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设置:

$('#content').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>

 

HTML5: 全局属性

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

 

三、spellcheck

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

 

举例:

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

 

HTML5: 全局属性

 

四、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>

 

HTML5: 全局属性

 

五、contenteditable

1、基本用法

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

 

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

 

举例:

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

 

HTML5: 全局属性

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

[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>

 

HTML5: 全局属性

 

八、draggable和dropzone

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

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

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

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

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

 

资源链接:

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

 

本文转自:HTML5: 全局属性

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    HTML5&CSS3网页制作:全局属性.pptx

    全局属性;全局属性简介;全局属性简介;draggable属性;draggable属性;hidden属性;spellcheck属性;spellcheck属性;contenteditable属性;contenteditable属性;总结;总结;感

    HTML5全局属性和其他共4页.pdf.zip

    HTML5全局属性和其他共4页.pdf.zip

    html5指南-1.html5全局属性(html5 global attributes)深入理解

    今天开始一个全新的关于html5系列课程,是我读《The Definitive Guide to HTML5 》的学习笔记。我会把自己觉得里面不错的章节,或者有意义的内容进行整理,以供大家学习。 一个元素可以定义自己的属性,比如a标签...

    HTML5精粹:利用HTML5开发令人惊奇的Web站点和革命性应用 pdf扫描版

    全书共16章:第1章介绍了HTML5文档的基本组成、全局结构、主体,以及新旧元素对比;第2章和第3章讲解了CSS的样式设置、框模型,以及CSS3的核心属性和新规则;第4章重点介绍了JavaScript的核心知识;第5章详细介绍了...

    HTML5 中新的全局属性(整理)

    本文整理了一些HTML 5 中新的全局属性,很使用,学习html5的朋友们可以参考下

    HTML 全局属性

    HTML 全局属性   New : HTML5 新属性。 属性 描述 accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名(classname) contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个...

    HTML5基础知识归纳汇总

    HTML知识点汇总,包括HTML文档结构和基本语法、HTML4元素、HTML4属性、HTML5元素、HTML5属性和HTML5全局属性的知识点。使用XMind打开。

    HTML5设计网络富客户端应用

    涉及了文档结构和语义、智能表单、视频与音频、画布、SVG与MathML、地理定位、Web存储与离线Web应用程序、WebSockets套接字、Web Worker多线程、微数据以及以拖曳为代表的一些全局属性,涵盖了HTML5所有的重要特性。...

    初识HTML5(入门级的,很好的)

    涉及了文档结构和语义、智能表单、视频与音频、画布、SVG与MathML、地理定位、Web存储与离线Web应用程序、WebSockets套接字、Web Worker多线程、微数据以及以拖曳为代表的一些全局属性,涵盖了HTML5所有的重要特性。...

    HTML5用户指南

     全局属性  本书中没有介绍的功能  小结 第3章 表单  我们爱html,现在它反过来爱我们了  新的输入类型  新的属性  综合应用  对遗留浏览器的向后兼容  样式化新表单字段和错误消息  覆盖浏览器默认  ...

    全面解析HTML5中的标准属性与自定义属性

    正如 HTML5 语法中所阐述的,元素可以包含属性(attributes)给一个元素设置各种属性(properties)。 有些属性被定义为全局的,可以用在任何元素上,而其他的被定义为元素特有的。所有的属性都有一个名称和一个值,...

    html5-full-course:此项目由Hcode Treinamentos开发,有200个类(113个标记,69个事件和16个全局属性)

    html5-full-course:此项目由Hcode Treinamentos开发,有200个类(113个标记,69个事件和16个全局属性)

    从入门到精通HTML5——PDF——网盘链接

     12.4 全局属性 237  12.4.1 contentEditable属性 237  12.4.2 designMode属性 238  12.4.3 hidden属性 239  12.4.4 spellcheck属性 239  12.4.5 tabindex属性 240  12.5 小结 240  12.6 习题 240  第13章 ...

    HTML5 对各个标签的定义与规定:script

    除全局属性之外有如下属性 src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中) async 定义脚本是否异步执行。 defer 指示脚本不会生成任何文档内容。...

    Axure RP7.0高清视频教程(62节).zip

    第11节:第一次接触全局变量.flv 第12节:公式的使用和局部变量简介.flv 第13节:登录验证的简单实现.flv 第14节:多用户登录验证的实现.flv 第15节:动态面板的状态与尺寸.flv 第16节:MindManager整理交互思路.flv...

    HTML5+CSS3 快速入门 前端 源代码.rar

    本课程由有着多年实战开发的资深web前端开发工程师朱朝兵老师为大家录制,从html5+css3基础知识,到实战案例分析,实际操作,均有详细讲解。 1.课程简介07:40 2.什么是HTML510:02 3.认识新的网页结构05:22 4.article...

Global site tag (gtag.js) - Google Analytics