(二)html5中的属性
1、全局属性
所谓全局属性,是指可以对任何元素都使用的属性;
(1)contentEditable属性
contentEditable属性的主要功能是允许用户编辑元素中的内容,所以该元素必须是可以获得鼠标焦点的元素,而且在点击鼠标后要向用户提供一个插入符号,提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性,可以被指定为true或false。
除此之外,该属性还有一个隐藏inherit(继承)状态,属性为true时,元素被指定为允许编辑;属性为false时,元素被指定为不允许编辑;未指定true或false时,则由inherit状态来决定,如果元素的父元素是可编辑的,则该元素就是可编辑的;
另外,除了contentEditable属性外,元素还具有一个isContentEditable属性,当元素可编辑时,该属性为true;当元素不可编辑时,该属性为false;
contentEditable属性示例(加上contentEditable属性之后该元素就变成可编辑的了)
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>contentEditable属性示例</title>
</head>
<h2>可编辑列表</h2>
<ul contentEditable="true"><li>列表元素1</li><li>列表元素2</li><li>列表元素3</li>
</ul>
在编辑完元素中内容之后,如果想要保存其中的内容,只能把该元素的innerHTML发送到服务器端进行保存,因为改变元素内容之后该元素的innerHTML内容也会随之改变,目前还没有特别的API来保存编辑后元素中的内容。
(2)designMode属性
designMode属性用来指定整个页面是否可编辑,当页面可编辑时,页面中任何支持上述的contentEditable属性的元素都变成了了编辑状态。designMode属性只能在javascript脚本里被编辑修改。该属性有两个值on和off。属性被指定为“on”时,页面可编辑;被指定为“off”时,页面不可编辑。使用javascript脚本来指定designMode属性的方法如下
所示:document.designMode=”on”
(3)hidden属性
在html5中所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素,功能是通知浏览器不渲染元素,是该元素处于不可见状态。但是元素中的内容还是浏览器创建的,也就是说页面装载后允许使用javascript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也即时显示出来。hidden属性是一个布尔值,为true元素处于不可见状态;为false元素处于可见状态。
(4)spellcheck属性
spellcheck属性是html5针对input元素(type=text)与textarea这两个文本输入框提供的一个新属性,它的功能为针对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值属性,true或false;在书写时有一个特殊的地方,就是必须明确声明属性值为true或false,书写方法如下:
<textarea spellcheck="true" >
<input type=text spellchech=false >
以下写法错误:
<textarea spelcheck >
需要注意的是,如果元素的readOnly属性或disabled属性设为true,则不执行拼写检查。
(5)tabindex属性
tabindex是开发中的一个基本概念,当不断敲击Tab键让窗口或者页面中的控件或得焦点,对窗口或页面中的所有控件进行遍历的时候,每一个控件的tabindex表示该控件是第几个被访问到的。过去这个属性在编辑网页时是非常有用的,但如今控件的遍历顺序都是由元素在页面上所处的位置决定的,所以就不再需要了。但是tabindex还有另外一个作用,在默认情况下,只有链接元素与表单元素可以通过按键获得焦点。如果对其他元素使用tabindex属性后,也能让该元素获得焦点,那么当脚本中执行focus()语句的时候,就可以让该元素获得焦点了。但这样做会产生一个副作用:该元素也可以通过按Tab键获得焦点,而这有时候可能不是开发者想要的结果。把元素的tabindex值设为负数(通常为-1)后就解决这个问题了。tabindex的值为负数后,仍然可以通过编程的方式让元素获得焦点,但按下Tab键时该元素就不能获得焦点了。这在复杂的页面中或者复杂的web应用程序中是十分有用的。
2、表单相关属性
(1)可以对input(type=text)、select、textarea与button元素制定autofocus属性。它以指定属性的方式让元素在换面打开时自动获得焦点;
(2)可以对input元素(type=text)与textarea元素指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容;
(3)可以对input、output、select、textarea、button与fieldset指定form属性,声明它属于哪个表单,然后将其放置在页面上的任何位置,而不是表单之内;
(4)可以对input(type=text)元素与textarea元素指定required属性。该属性表示在用户提交的时候进行检查,检查该元素内一定要有输入内容;
(5)为input元素增加了几个新的属性:autocomplete、min、max、multiple、pattern与step。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合用。multiple属性允许在上传文件时一次上传多个文件;
(6)为input元素与button元素增加了新的属性formaction、formenctype、formmethod、formnovalidate与formtarget、他们可以重载form元素的action、enctype、method、novalidate与terget属性。为fieldset元素增加了disable属性,可以把它的子元素设为disable(无效)状态;
(7)为input元素、button元素、form元素增加了novalidate属性,该属性可以取消提交时进行的有关检查,表单可以被无条件的提交;
(8)为所有可使用标签(label)元素的表单标签【包括非隐藏的input元素(type属性值不等于hidden)、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素】定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合;
(9)可以在标签(label元素)内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素;
(10)针对input元素与textarea元素在HTML5中增加SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字时,该属性值为“forward”;当用户反向选取文字时,该属性值为“backward”。当用户没有选去任何文字时,该属性值为“forward”;
(11)对复选框(checkbox元素)添加indeterminate属性,以说明复选框处于“尚未明确是否可选状态”;
(12)对类型为image的input元素添加用于指定图片按钮中图片高度的height属性与用于指定图片宽度的width属性;
(13)对textarea元素新增用于限定可输入文字个数的maxlength属性,与用于指定表单提交时是否在文字换行处添加换行符的wrap属性;
(14)对iframe元素新增sandbox属性,其作用是出于安全性方面的原因,对iframe元素内的内容是否允许显示,表单是否允许被提交,以及脚本是否允许被执行等方面进行一些限制;
(15)对script元素新增async属性与defer属性,用于加快页面的加载速度,是脚本代码的读取不妨碍页面上其他元素的加载;
3、链接相关的属性
(1)为a与area元素增加了media属性,该属性规定目标URL是为什么类型的媒介/设备进行优化的,只能在href属性存在时使用;
(2)为area元素增加了hreflang属性与rel属性,以保持与a元素、link元素的一致;
(3)为link元素增加了新属性sizes。该属性可以与icon元素结合使用(通过rel属性),该属性指定关联图标(icon元素)的大小;
(4)为base元素增加了target属性,主要目的是保持与a元素的一致性;
4、其他属性
(1)为ol元素增加属性reversed,它指定列表倒序显示;
(2)为meta元素增加charset属性,因为这个属性已经被广泛支持了,而且为文档的字符编码的制定提供了一种比较良好的方式;
(3)为menu元素添加了两个新的属性—type和label。label属性为菜单定义一个可见的标注,type属性让菜单可以以上下文菜单、工具条和列表菜单三种形式出现;
(4)为style元素增加scoped属性,用来规定样式的作用范围,譬如只对页面上某个树起作用。
(5) 为script元素增加async属性,它定义脚本是否异步执行;
(6)为html元素增加属性manifest,开发离线web应用程序时它与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息;
(7)为iframe元素增加三个属性sandbox,seamless与srcdoc,用来提高页面安全性,防止不信任的web 页面执行某些操作;
5.废除的属性
(二)html5中的属性相关推荐
- [html] 说说你对HTML5中pattern属性的理解
[html] 说说你对HTML5中pattern属性的理解 好像是判断input在输入时按下tab键跳转到下一个input的优先级 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- html5不支持的属性,IE9对HTML5中部分属性不支持的原因分析
这篇文章主要为大家介绍了IE9对HTML5中部分属性不支持的原因分析,对于了解IE9与HTML5的应用有一定帮助作用,需要的朋友可以参考下 本文较为详细的分析了IE9对HTML5中部分属性不支持的原因 ...
- HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
- 详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效 ...
- html prefetch的原理,HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...
- HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
- html5中time属性怎么用,html5中返回TimeRanges对象的属性buffered
实例 获得视频的第一段缓冲范围(部分),以秒计:myVid=document.getElementById("video1"); alert("Start: " ...
- 在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
- html5中display属性,display的属性
在一般的css布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.,display这个属性用于定义建立布局时元素生成的显示框类型.对于 html 等文档类型, ...
最新文章
- mysql绿色版的应用5.7
- 共享经济时代,中小企业该如何逆风翻盘?
- 如何同时GET√5斤网易味央猪肉和正确的APP IM开发姿势?
- VS2013出现“无法找到“xxx.exe”的调试信息,或者调试信息不匹配”错误解决方案
- redis集群3种模式
- 一个逐步“优化”的范例程序(转)
- 计算机wps如何排序,wps怎么排序【解答方案】
- [转载] python中sort()与sorted()
- 三、定义主从实体基类
- 亚信科技java笔试题答案_大神帮忙,亚信面试题目
- jQueru中数据交换格式XML和JSON对比
- 费率转换成利率的计算器_存款利率计算器
- 阵列天线方向图-均匀圆形/圆柱阵列matlab仿真
- 虚拟机搭建测试环境(一)
- 简单好听的id_简单好听的贴吧id名-网名搜索
- Oauth2认证图解
- Java并发 ReentrantLock(重入锁)之非公平锁源码解析 超详细!!
- 苹果计算机做视频教程,Mac版Final Cut Pro x使用技巧及视频教程
- 互联网晚报 | 10月29日 星期五 | 理想汽车第10万辆整车正式下线;微博新增“炸毁评论”功能;《长津湖》续集正式官宣...
- S4 HANA MRP LIVE
热门文章
- I see IC的破冰之旅
- 新课改实践下美术课程的新教学观
- 一个关于HINT中指定索引查询的问题
- 关于Unable to instantiate activity ComponentInfo错误解决方案
- myeclispe快捷键一\(≧▽≦)/终于也收藏了
- android Map集合的遍历
- android关于控件中setTag(key,Object)的设置的相关问题
- 解决‘tf.ResizeNearestNeighbor‘ op is neither a custom op nor a flex op
- EntityFramework进阶(三)- 根据IQueryable获取DbContext
- WPF中的一些常用类型转换