Skip to content

Latest commit

 

History

History
234 lines (130 loc) · 4.45 KB

2.1.0 HTML 全局属性.md

File metadata and controls

234 lines (130 loc) · 4.45 KB

HTML 全局属性

1、accesskey

规定激活元素的快捷键

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

alt+或者alt+shift+ 除了Opera几乎都支持

只有<a>,<area>,<button>,<input>,<label>,<legend>以及<textarea>

2、class

规定元素的类名。

class 属性大多数用于指向样式表中的类,不过,也可以利用他通过 JavaScript 来改变带有指定 class 的 HTML 元素。

class 不能在以下HTML元素中使用:base,head,html,meta,param,script,style以及title

可以给 class 赋予多个 class,例如

<span class="left_menu important">

3、contenteditable 5

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

规定元素内容是否可编辑。 所有浏览器都支持

4、contextmenu 5

contextmenu当右键点击元素时,会出现上下文菜单。

contextmenu属性的值是要打开的<menu>元素的 id。

只有FireFox支持

语法

<element contextmenu="menu_id">

5、data-* 5

使用data-*属性来嵌入自定义数据

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

所有浏览器都支持 data-*用来存储页面或者应用程序的私有自定义数据。

data-*属性赋予我们所在 HTML 元素上嵌入自定义 data 属性的能力。

存储的(自定义)数据可以被页面的 javascript 所使用,以创建更好的用户体验(不进行 Ajax 调用或者服务端进行查询)。

data-*属性包括两部分:

属性名不应该包含任何的大写部分,并且在前缀 data- 之后必须有一个字符

属性值可以是任意字符串

所有浏览器都支持

6、dir

规定文本的方向

<p dir="rtl">Write this text right-to-left!</p>
``
在`<base>,<br>,<frame>,<frameset>,<hr>,<iframe>,<param>`以及`<script>`无效
左到右 右到左
```

7、draggable 5

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

IE8以前不支持

规定元素是否可以被拖动

链接和图像是默认可拖动的

值:

true、flase、auto浏览器默认

8、dropzone 5

拖动数据会产生被拖动数据的副本

所有浏览器都不支持

值:

copy:产生副本

move:拖动数据会导致被拖动数据被移动到新位置

link:拖动数据会产生指向原始数据的链接

9、hidden 5

隐藏控件

hidden 是个 boolean,如果设置该属性,他规定元素仍为或者不再相关

浏览器不应显示已规定 hidden 属性的元素

hidden 属性也可以用于防止用户查看元素,直到匹配某些条件,然后 javascript 可以删除复选框,使得元素可见

除了IE都支持

10、id

id属性规定HTML元素的唯一id。

id在HTML文档中必须是唯一的。

id属性可以作为链接锚,通过javascript或通过css为带有指定id的元素改变或者添加样式

11、lang

规定元素内部的语言

<p lang="fr">Ceci est un paragraphe.</p>

所有浏览器都支持

12、spellcheck 5

进行拼写检查的可编辑段落

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

IE10,FireFox,Opera,chrome以及safari支持

对元素进行拼写和语法检查,可以对以下内容进行检查

input 的文本值 非密码

<textarea> 元素中的文本

可编辑元素中的文本

值:true false

13、style

style规定元素的行内样式

style将覆盖任何全局的样式设定

14、tabindex

带有指定 tab 键顺序的链接

tabindex 属性规定元素的 tab 键控制次序。

除了 safari 都支持

以下元素支持 tabindex 属性,<a>,<area>,<button>,<input>,<object>以及textarea

语法

<element tabindex="number">

15、title

title 属性规定元素的基本信息。

这些信息会在鼠标移到元素上显示一段工具提示文本

title 经常与 form 以及 a 元素一起使用,已提供关于输入格式和链接目标的信息。

16、translate 5

是否翻译元素内容

规定不应翻译某些内容

<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>

所有主流浏览器都无法支持 提示:请使用 class=notranslate 替代

值:yes,no

参考