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                                  规定元素的一个或多个类名(引用样式表中的类)

 

扫描二维码关注公众号,回复: 224656 查看本文章

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

<hr>, <iframe>, <param> 以及 <script>

【分类】

        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 属性在以下标签中无效:

<base>, <br>, <frame>, <frameset>,<hr>, <iframe>, <param> 以及 <script>

语法:

<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 元素以定义事件动作的全局事件属性。

我在后面文章里做出详解

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

猜你喜欢

转载自570109268.iteye.com/blog/2405543
今日推荐