`
天梯梦
  • 浏览: 13741243 次
  • 性别: 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

    在HTML5中,引入了一些全局属性,这些属性可以应用于任何HTML元素,极大地增强了网页的交互性和可编辑性。以下是关于这些全局属性的详细说明: 1. **draggable属性**:这个属性允许用户通过鼠标或其他输入设备拖动...

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

    首先,我们来看看一些常见的HTML5全局属性: 1. `class`:这个属性允许我们将一个或多个CSS类应用到元素上,用于样式化和JavaScript操作。例如,`&lt;div class="container info"&gt;...&lt;/div&gt;`。 2. `id`:每个元素的...

    HTML5技术参考表

    - **属性**: 全局属性。 - **示例**: `&lt;abbr title="World Health Organization"&gt;WHO&lt;/abbr&gt;` ##### 5. **首字母缩略词标签** `&lt;acronym&gt;` - **描述**: 已废弃,定义首字母缩略词。 - **版本兼容性**: HTML4。 ...

    HTML5&CSS3网页制作:边距属性.pptx

    在网页设计中,HTML5 和 CSS3 是两个关键的技术,它们共同构成了现代网页的基础。HTML5 提供了丰富的标签和语义化结构,而 CSS3 则赋予了这些元素样式和布局的能力。在这个主题中,我们将专注于 CSS3 中的边距属性,...

    第11章 全局属性和其他.pdf

    本章提到了如下一些重要的全局属性: 1. `id`属性:为元素指定一个唯一的标识符,常用于通过CSS和JavaScript选择器选中特定元素。在文档中,每个`id`应该是唯一的,不能重复。 2. `class`属性:将元素归类到一起,...

    html5新增标签和属性

    HTML5 中新增了许多全局属性,包括: * contenteditable:将页面的内容定义为可编辑可以修改的内容 * Hidden:定义页面的内容被隐藏 * spellcheck:输入的英文内容进行验证 * tabindex:使用 tab 切换的时候出现的...

    html5标签属性及使用方法教程

    最后,值得注意的是,HTML5规范中的全局属性和事件属性。全局属性如id、class、style、title和accesskey等可以被任何HTML元素使用,而事件属性如onclick、onmouseover、onload、onsubmit等允许元素在发生特定事件时...

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

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

    HTML5教程(pdf清晰版)

    7. HTML5全局属性和事件属性:全局属性像id、class、style等可以应用于所有HTML元素,它们使得元素可以被更容易地识别和样式化。事件属性如onclick、onload等则允许元素响应用户操作,如点击或加载事件。 8. 跨设备...

    html5介绍.ppt

    4. **新的属性**:包括`ping`、`charset`、`async`等通用属性,以及全局属性如`id`、`tabindex`等,增加了页面的灵活性和功能性。 5. **移除元素**:删除了一些过时或不再推荐使用的元素,如`&lt;center&gt;`、`&lt;font&gt;`、`...

    HTML5及CSS3web前端开发技术习题答案解析.pdf

    HTML5引入了许多全局属性,这些属性可以在任何HTML元素上使用,增强了元素的功能性和灵活性。下面列举了一些重要的全局属性及其功能: - **`accesskey`**:定义一个键盘快捷键,用户可以通过按该快捷键直接访问该...

    HTML5与CSS3web前端开发技术习题答案.pdf

    HTML5新增的全局属性是指可以在任何HTML元素上使用的属性,这些属性增强了元素的功能性和灵活性。具体如下: - **`accesskey`**:定义了元素的键盘快捷键,使用户可以通过特定的键盘按键快速访问该元素。 - **`...

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

    HTML5 是一种现代的网页标准,它引入了许多新特性、元素和全局属性,以增强网页的交互性、可访问性和语义化。本篇文章将详细阐述HTML5中新增的全局属性,这些属性可以应用于所有HTML元素,使得开发者在构建网页时...

    HTML5学习心得总结(推荐)

    在HTML5中,开发者可以通过全局属性来增强内容的表现和功能性,例如,accesskey属性可以设定访问元素的快捷键,contenteditable属性可以使元素内容可编辑。 了解了HTML5的这些知识点后,开发者就可以利用HTML5制作...

    HTML_5_事件属性

    在HTML 5中,事件属性可以分为多种类别,包括全局事件属性、表单事件、键盘事件、鼠标事件以及媒介事件。这些属性可以在HTML元素中直接设置,以指定在特定事件发生时执行的JavaScript代码。 1. **全局事件属性**:...

Global site tag (gtag.js) - Google Analytics