HTML5 全局属性
来源:互联网 发布:风行云 知乎 编辑:程序博客网 时间:2024/06/06 04:02
HTML5 全局属性
了解HTML5新加入的内容,首先了解对于所有元素都适应的全局属性,一部分是HTML5新添加的属性,一部分是HTML5之前就已经存在的属性,至于是什么时候添加到HTML标准中,就不纠结了。可以到 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes上进行查看
1. 全局属性
2. 可访问性
accesskey
accesskey 属性 --提供生成当前元素的键盘快捷方式的提示。该属性由空格分隔的字符列表组成。浏览器应该使用计算机键盘布局中存在的第一个。(但是对于多个字符的存在测试没有效果,不知道是什么原因,还是只用一个字符吧。)
定义了accesskey的链接可以使用快捷键(ALT+字母)访问.
<form> 用户名: <input type="text" name="name" accesskey="u"/> <p/> 密码: <input type="password" name="password" accesskey="p"/> <p/> <input type="submit" value="Submit" accesskey="s"/></form>
在HTML4.0.1的时候,HTML accesskey属性请可以作用在以下元素上:<a>, <area>, <button>, <input>, <label>, <legend>以及<textarea>元素。在HTML5 则可以作用到所有的元素上。
附上一张(参照MSDN)各平台的激活访问键的操作
* a标签在IE浏览器中只会聚焦,但是不会出发click,其他的浏览器都可以。
一个负值意味着元素应该是可聚焦的,但不应该是通过顺序键盘导航可达,也就是table不可到达这个元素;
0 意味着元素应该通过顺序键盘导航来聚焦和可达,但其相对顺序由平台约定定义,也就是在所有正值之后;
一个正值,这意味着应该通过顺序键盘导航来聚焦和达到; 其相对顺序由属性的值定义:顺序遵循增加的tabindex数。如果几个元素共享相同的tabindex,则它们的相对顺序将跟随它们在文档中的相对位置)。
根据msdn上的描述:最大值为tabindex 32767. 如果未指定,则取值为缺省值-1。
但是通过本人的测试,如果tabindex设为32768,仍然可以工作,如果为指定缺省值的效果相当于0.
chorme : 1 -> 2 -> 32768 -> 0 -> 缺省 (-1不会到达)
firefox: 1 -> 2 -> 32768 -> 0 -> 缺省 (-1不会到达)
IE : 1 -> 2 -> 0 -> 32768 -> 缺省 (-1不会到达)
作为开发人员相信在开发中不会用到不符合1 ~ 32767 之位的值,但是如果遇到还是要亲自测试一下。
<a href='https://www.baidu.com' accesskey="u">a标签</a>
tabindex
是一个整数属性,指示该元素是否可以采取输入焦点(可对焦),如果它应该参与顺序键盘导航,如果是,则在什么位置。它可以需要几个值:一个负值意味着元素应该是可聚焦的,但不应该是通过顺序键盘导航可达,也就是table不可到达这个元素;
0 意味着元素应该通过顺序键盘导航来聚焦和可达,但其相对顺序由平台约定定义,也就是在所有正值之后;
一个正值,这意味着应该通过顺序键盘导航来聚焦和达到; 其相对顺序由属性的值定义:顺序遵循增加的tabindex数。如果几个元素共享相同的tabindex,则它们的相对顺序将跟随它们在文档中的相对位置)。
根据msdn上的描述:最大值为tabindex 32767. 如果未指定,则取值为缺省值-1。
但是通过本人的测试,如果tabindex设为32768,仍然可以工作,如果为指定缺省值的效果相当于0.
<form> tabindex 1: <input type="text" tabindex="1"/> <p/> tabindex 2: <input type="text" tabindex="2"/> <p/> tabindex 0:<input type="text" tabindex="0"/><p/> tabindex 32768:<input type="text" tabindex="32768`"/><p/> tabindex -1:<input type="text" tabindex="-1"/><p/> tabindex 缺省:<input type="text" tabindex=""/></form>
chorme : 1 -> 2 -> 32768 -> 0 -> 缺省 (-1不会到达)
firefox: 1 -> 2 -> 32768 -> 0 -> 缺省 (-1不会到达)
IE : 1 -> 2 -> 0 -> 32768 -> 缺省 (-1不会到达)
作为开发人员相信在开发中不会用到不符合1 ~ 32767 之位的值,但是如果遇到还是要亲自测试一下。
3. 元数据
title
为元素提供了一个参考信息。通常的形式是当鼠标悬浮在一个链接、表单输入框或缩写时,展示一个小提示。这里有一个例子:
<element title="value">
lang
指定了元素内文本书写的语言。一些元素可以用它来根据不同的语言脚本渲染文本,比如使用的引号类型。例如,下面的代码片段在页面顶部指定了整个HTML页面是用英语书写的:
<element lang="language_code">具体的language_code 可以参照HTML 语言代码参考手册
contextmenu
HTML5里增加了contextmenu属性,在contextmenu 全局属性是ID的<menu>作为该元素的上下文菜单来使用。一个上下文菜单是出现在用户交互,如右键菜单。HTML5现在允许我们自定义此菜单。以下是一些实现示例,包括嵌套菜单。
当前只有firefox支持,具体的用法可以参照https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu。
4. 唯一标识
id
全局属性定义一个唯一的标识符(ID),其必须在整个文档中是唯一的。其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时识别元素。该属性的值是不透明的字符串:这意味着Web作者不得使用它来传达任何信息。特殊含义,例如语义,不能从字符串派生出来。
此属性的值不能包含空格(空格,制表符等)。浏览器处理包含空格的不一致的ID,就像空格是ID的一部分一样。与类属性(允许空格分隔的值)相反,元素只能有一个单一的ID。
* 注意:使用除ASCII字母,数字之外的字符'_','-'和'.'可能会导致兼容性问题,因为它们不允许在HTML4中。尽管在HTML 5中已经解除了该限制,但ID应以字母开头,以便兼容。
class
类是元素的类的空格分隔的列表。类允许CSS和Javascript通过类选择器或类似DOM方法的函数来选择和访问特定的元素document.getElementsByClassName。虽然规范没有对类的名称提出要求,但鼓励Web开发人员使用描述元素的语义目的的名称,而不是元素的呈现。例如,属性来描述一个属性而不是斜体,虽然这个类的一个元素可以用斜体表示。语义名称保持逻辑,即使页面的呈现发生变化。
* class只有从Firefox 32起才是真正的全局属性。
5. 可编辑性
contenteditable
是指示如果元素应该是可由用户编辑枚举属性。如果是这样,浏览器修改其窗口小部件以允许编辑。属性必须采用以下值之一:
true或空字符串,表示元素必须可编辑;
false,表示该元素不能被编辑。
如果未设置此属性,则其默认值将从其父元素继承。
此属性是枚举的属性,而不是布尔值。这意味着显式使用其中一个值true,false或空字符串是强制性的,
并且<label contenteditable>Example Label</label> 不允许使用简写。
正确的用法是<label contenteditable="true">Example Label</label>。
例如
true或空字符串,表示元素必须可编辑;
false,表示该元素不能被编辑。
如果未设置此属性,则其默认值将从其父元素继承。
此属性是枚举的属性,而不是布尔值。这意味着显式使用其中一个值true,false或空字符串是强制性的,
并且<label contenteditable>Example Label</label> 不允许使用简写。
正确的用法是<label contenteditable="true">Example Label</label>。
例如
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>不能是
<p contenteditable>这是一段可编辑的段落。请试着编辑该文本。</p>
6. 拼写检查
spellcheck
规定是否对元素进行拼写和语法检查。
此属性是枚举的属性,而不是布尔值。这意味着明确使用其中一个值true或是false强制性的,并且<label spellcheck>Example Label</label> 不允许使用速记。正确的用法是<label spellcheck="true">Example Label</label>。
可以对以下内容进行拼写检查:
input 元素中的文本值(非密码)
<textarea> 元素中的文本
可编辑元素中的文本
* Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。
hidden 属性是布尔属性。
如果设置该属性,它规定元素仍未或不再相关。
浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。
* 表单仍然可以提交
此属性是枚举的属性,而不是布尔值。这意味着明确使用其中一个值true或是false强制性的,并且<label spellcheck>Example Label</label> 不允许使用速记。正确的用法是<label spellcheck="true">Example Label</label>。
可以对以下内容进行拼写检查:
input 元素中的文本值(非密码)
<textarea> 元素中的文本
可编辑元素中的文本
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>如果在编辑中输入一个sdf,那么会提示有错误。
* Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。
7. 隐藏元素
hidden
<p hidden>这个段落应该被隐藏。</p>
hidden 属性是布尔属性。
如果设置该属性,它规定元素仍未或不再相关。
浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。
* 表单仍然可以提交
8. 拖拽
draggable
可拖动全局属性是枚举属性指示该元素是否可以拖动
true,表示元素可能被拖动
false,表示元素可能未被拖动。
如果此属性未设置,其默认值为auto,表示行为应为浏览器默认定义的行为。
此属性是枚举的属性,而不是布尔值。这意味着显式使用其中一个值true或false是强制性的,并且<label draggable>Example Label</label> 不允许使用简写。正确的用法是<label draggable="true">Example Label</label>。
*默认情况下,只能拖动文本选择,图像和链接。
true,表示元素可能被拖动
false,表示元素可能未被拖动。
如果此属性未设置,其默认值为auto,表示行为应为浏览器默认定义的行为。
此属性是枚举的属性,而不是布尔值。这意味着显式使用其中一个值true或false是强制性的,并且<label draggable>Example Label</label> 不允许使用简写。正确的用法是<label draggable="true">Example Label</label>。
*默认情况下,只能拖动文本选择,图像和链接。
dropzone
规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。
值 描述
copy 拖动数据会产生被拖动数据的副本。
move 拖动数据会导致被拖动数据被移动到新位置。
link 拖动数据会产生指向原始数据的链接。
具体的内容后面会有单独的章节进行学习,这里了解一下。
ltr,意思是从左到右,用于从左到右的语言(如英文);
rtl,这意味着从右到左,用于从右到左写的语言(如阿拉伯语);
auto,让用户代理决定。它使用基本算法来解析元素内的字符,直到找到具有强方向性的字符,然后将该方向性应用于整个元素。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。(这句话的含义没有搞懂,如果有知道的话可以告知一下)
要data通过dataset对象获取属性,请通过属性名称的一部分获取属性data-(注意,破折号转换为camelCase)。
还可以使用CSS中的属性选择器根据数据更改样式:
* HTML 标签可以添加自定义属性来存储和操作数据。但这样做会导致 HTML 语法上不符合 HTML 规范。
值 描述
copy 拖动数据会产生被拖动数据的副本。
move 拖动数据会导致被拖动数据被移动到新位置。
link 拖动数据会产生指向原始数据的链接。
具体的内容后面会有单独的章节进行学习,这里了解一下。
9. 样式
style
style属性用来直接在元素上应用CSS样式。通过这种方式设置的任何样式会覆盖其他地方设置的样式。虽然这样很快捷,但是最好完全避免使用这个属性,而把所有样式放在外部样式表里。分离CSS和HTML带来组织性和灵活性上的好处,因为当CSS存放在CSS文件里时,查找和禁用CSS规则都比当CSS和HTML代码混杂在一起时容易很多。10. 文字方向
dir
枚举属性指示元素文本的方向性。它可以具有以下值:ltr,意思是从左到右,用于从左到右的语言(如英文);
rtl,这意味着从右到左,用于从右到左写的语言(如阿拉伯语);
auto,让用户代理决定。它使用基本算法来解析元素内的字符,直到找到具有强方向性的字符,然后将该方向性应用于整个元素。
<element dir="ltr|rtl">
11. 自定义数据
data- *
data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。(这句话的含义没有搞懂,如果有知道的话可以告知一下)
HTML语法
语法很简单。属性名称开头的任何元素上的任何属性data-都是数据属性。说你有一篇文章,你想要存储一些没有任何视觉表示的额外信息。只需使用data属性:<article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars">...</article>
JavaScript访问
在JavaScript中读取这些属性的值也很简单。您可以使用getAttribute()其完整的HTML名称来阅读它们,但标准定义了一种更简单的方式:DOMStringMap您可以通过dataset属性读取。要data通过dataset对象获取属性,请通过属性名称的一部分获取属性data-(注意,破折号转换为camelCase)。
var article = document.getElementById('electriccars'); article.dataset.columns // "3"article.dataset.indexNumber // "12314"article.dataset.parent // "cars"每个属性都是一个字符串,可以读写。在上述情况下,设置article.dataset.columns = 5会将该属性更改为"5"。
jquery访问
使用 jQuery 的 .data() 方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的 data 属性。var myid= jQuery("#electriccars").data('columns');
CSS访问
请注意,由于数据属性是纯HTML属性,您甚至可以从CSS访问它们。例如,要显示文章中的父数据,您可以使用CSS中的生成内容,其attr()功能如下:article::before { content: attr(data-parent);}note: 这种实现方式还需要后面css的学习。
还可以使用CSS中的属性选择器根据数据更改样式:
article[data-columns='3'] { width: 400px;}article[data-columns='4'] { width: 600px;}
* HTML 标签可以添加自定义属性来存储和操作数据。但这样做会导致 HTML 语法上不符合 HTML 规范。
* HTML5 规范里增加了一个自定义 data 属性,自定义data属性的用法非常的简单,就可以往 HTML 标签上添加任意以 "data-"开头的属性。
* 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
* 要考虑的主要问题是Internet Explorer的支持和性能。Internet Explorer 11+提供了对标准的支持,但所有早期版本 都不支持dataset。为了支持IE 10和以下,需要访问数据属性getAttribute()
* 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
* 要考虑的主要问题是Internet Explorer的支持和性能。Internet Explorer 11+提供了对标准的支持,但所有早期版本 都不支持dataset。为了支持IE 10和以下,需要访问数据属性getAttribute()
12. translate
translate
规定是否应该翻译元素内容。
空字符串"yes",表示当页面本地化时应该翻译该元素。
"no",表示该元素不能被翻译。
* 不过现在还没有浏览器支持。
* 不过现在还没有浏览器支持。
阅读全文
0 0
- HTML5 全局属性
- HTML5全局属性
- HTML5----全局属性
- HTML5全局属性
- html5 全局属性
- HTML5的全局属性
- HTML5全局属性
- 【HTML5】全局属性
- 【整理】HTML5全局属性
- HTML5全局属性
- HTML5全局属性
- HTML5全局属性
- HTML5部分全局属性
- HTML5之全局属性
- HTML5全局属性
- HTML5中的全局属性
- HTML5之全局属性
- HTML5全局属性
- mac安装mogondb
- java运算符
- 从零基础认识myBatis
- python学习笔记3:转义字符
- 《数据结构》实验二: 线性表综合实验——总结线性表的几种主要存储结果
- HTML5 全局属性
- Java Web开发实战经典学习过程笔记
- Bootstrap页头
- Qt见解:Post 与 Get 的区别(Get将参数直接与网址整合为一个整体,而Post则将其拆为两个部分)
- 构建工具-Maven简介-2
- Hive中列转行函数collect_set详解
- 数组操作
- Java Web开发实战经典学习过程笔记
- sizeof和strlen