HTML属性汇总

青春..荒唐

浏览: 963092 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML

简介：属性赋予元素意义和语境

标准属性

id, class, title, style, dir, lang

如需完整的描述，请访问标准属性。

事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown onkeyup

如需完整的描述，请访问事件属性

全局属性：

全局属性可用于任何HTML元素

①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>
<p><b>注释：</b>请使用Alt + <i>accessKey</i> 
(或者 Shift + Alt + <i>accessKey</i>) 来访问带有指定快捷键的元素。</p>

②class 规定元素的一个或多个类名（引用样式表中的类）

③contenteditable【H5新属性】规定元素内容是否可编辑

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

【兼容性：所有主流浏览器都支持】

④contextmenu【H5新属性】规定元素的上下文菜单，上下文菜单在用户点击元素时显示

<div contextmenu="mymenu">
<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>
</div>

【兼容：目前只有火狐浏览器兼容】

⑤data-*【H5新属性】用于存储页面或应用程序的私有定制数据

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
<h1>物种</h1>
<p>点击某个物种来查看其类别：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>

【兼容：所有主流浏览器都支持】

定义和用法：

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

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用

或服务器端数据库查询）。

data-* 属性包括两部分：

1.属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

2.属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性

⑥dir 规定元素内容的文本方向

<p dir="rtl">Write this text right-to-left!</p>

【兼容：所有主流浏览器都支持】

提示和注释：dir 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>,

【分类】

1.ltr 默认,从左向右的文本方向

2.rtl 从右向左的文本方向

⑦draggable【H5新属性】规定元素是否可拖动

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

【兼容：IE9+（包括IE9）和其他主流浏览器均支持】

提示：1.链接和图像默认是可拖动的；2.draggable 属性常用在拖放操作中

（1）true 规定元素的可拖动的；（2）false 规定元素不可拖动；（3）auto 使用浏览器的默认行为

关于元素拖动，我在后面文章http://570109268.iteye.com/blog/2408954里做出详解

⑧dropzone【H5新属性】规定在拖动被拖动数据时是否进行复制、移动或链接

【兼容：无浏览器兼容】

⑨hidden【H5新属性】规定元素仍未或不再相关

【兼容：除IE外，其他主流浏览器均兼容】

注意：

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

（2）hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。

然后，JavaScript 可以删除 hidden 属性，以使此元素可见

【拓展】：

区别下hidden对象隐藏输入域，type="hidden"仅适用于input输入框，hidden属性适用大多标签

<input type="hidden" id="id1">

1、html采用<input>是为了显示文本数据；

2、应用hidden 是为了显示数据，但又不想让浏览用户看到，该数据只是提供给

设计页面的程序员控制页面使用的；（比如验证码）

3、由于在页面中可能采用多个由程序员控制使用的<input>，因此需要给一个标识，

以备程序员读取其中的数据，id就是<input>的标志，像我们每一个人都有一个唯

一识别的标识（身份证号）一样，id在理论上也是唯一的；

4、其实hidden只是将输入框隐藏了，里面的值可以默认赋值或通过js赋值。

提交form的时候跟其他的都是一样的。

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

可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有

指定 id 的元素改变或添加样式

⑪lang 规定元素内容的语言，用于网页或部分网页的语言，这对搜索引擎和

浏览器是有帮助的，我在后面文章http://570109268.iteye.com/admin/blogs/2409052里做了总结

【注释】：lang 属性在以下标签中无效：

语法：

<element lang="language_code（规定元素内容的语言代码）">

【拓展】：

HTML语言代码

根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明

<html lang="en">
...
</html>

语言代码（或语言编码）是一组用来代表语言的代码。语言代码是由字母或数字组成的短字符串，

用于分类图书馆典藏、计算机程序上的本地化和翻译等用途。

【分类】：ISO 639，ISO 639-1，ISO 639-2，ISO 639-3

【1】ISO 639是国际标准化组织为各语言所订定的语言代码

【2】ISO 639-1是国际标准化组织ISO 639语言代码标准的第一部分。

它含有 184 个两字母的编码，用来标示世界上主要的语言。

这些代码在很多地方都被用作语言的简写，例如：

（1）英语（English）用en表示

（2）德语（Deutsch）用de表示（Deutsch是德语的本名）

（3）日语（Japanese）用ja表示（尽管日语的拼音是Nihongo）

（4）汉语使用zh表示，来自“中文”的汉语拼音：Zhōngwén

【3】ISO 639-2：1998 是国际标准化组织ISO 639语言编码标准的第二部分，

为各语言和语系所订定的 3 字母语言代码，ISO639-2 的注册机构是美国国会图书馆。

有 22 种语言同时在 ISO 639-2 中有两个 3 字母语言代码：

（1）ISO 639-2/B ，书籍目录使用 (bibliographic use)

（2）ISO 639-2/T ，技术专门使用 (terminological use)

这 22 种语言本身都已有ISO 639-1编码

【4】ISO 639-3是个国际语种代号标准，在2007年2月5日出版。

它延伸了ISO 639-2里的 Alpha-3 code（三个字母的代号），目标是涵盖所有的语言

⑫spellcheck【H5新属性】规定是否对元素进行拼写和语法检查，输入完某

个单词后,进行按空格键，就可以看到这是不是错误的单词了

【兼容：IE10+及其他主流浏览器均兼容】

可以对以下内容进行拼写检查：

（1）input 元素中的文本值（非密码）

（2）<textarea> 元素中的文本

（3）可编辑元素中的文本

<element spellcheck="true|false">

true：对元素进行拼写和语法检查；false：不检查元素

例子：【输入完某个单词后,进行按空格键，就可以看到这是不是错误的单词了】

比如这里，输入testK按空格后，spellcheck="true"检测的testK会标红，{相当于动态验证单词}

<p>检测<textarea spellcheck="true" >absolute testK</textarea> </p>
<p>不检测 <textarea spellcheck="false">absolute testK</textarea> </p>

使用场合：

1.类型为text型的input元素，但input类型为text型的input元素，但input="password"不行

(原因：你是密码哎，都是星号还检查个啥玩意,密码本身就是不同字母组合而出的)

2.textarea元素

3.spellcheck属性，html5中的所有元素都可以指定，对于不是输入栏的元素，

须指定contenteditable="true" 编辑属性，才能使用。(如div什么的)

⑬style 规定元素的行内 CSS 样式（inlink style）

⑭tabindex 规定元素的 tab 键次序

【兼容：除了Safari，其他所有浏览器均支持】

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

具体的我在前面文章里已经做了总结

⑮title 规定有关元素的额外信息

这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。

同时它也是 abbr 和 acronym 元素的必需属性。

<abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<p title="Free Web tutorials">W3School.com.cn</p>

⑯translate【H5新标签】规定是否应该翻译元素内容

【兼容：所有浏览器均不支持】

规定不应翻译某些元素：

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

HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。

下面列出了添加到 HTML 元素以定义事件动作的全局事件属性。

我在后面文章里做出详解

。

分享到：

H5的input color系统颜色选择器 | HTML标签汇总

2017-12-23 16:49
浏览 658
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论