[前端] H5新增属性

转载 2015年07月07日 17:00:10

contenteditable属性

任何元素使用contenteditable属性的话,代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。例如:

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

 

该属于有3种值可选:true, false和空字符,空字符代表true。

而对<iframe id="editor"></iframe>框架页面可以通过JS程序代码来实现:editor.document.designMode="on" 。

 

contextmenu属性

contextmenu属性用来指向一个作者提供的上下文目录,例如:

<form name="npc" action="">
 <label>Character name: <input type=text contextmenu=namemenu  required></label>
 <menu type=context id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

 

data-*属性

开发人员可以在任何元素上定义他们想要的任何属性,只要他们在其之前加上 data- 的前缀,以此避免与未来的HTML版本的冲突,asp.net MVC下的jQuery验证就是采用这种方式,例如:data-val=”true”。

 

draggable和dropzone属性

draggable 和 dropzone 属性可以与新的拖放API一起使用,draggable为是否允许拖放,dropzone代表可以拖放到哪个区域。

<p draggable="true" dropzone="div1">test</p>

 

hidden属性

不显示定义了hidden属性的元素。但与表现层的比如tab切换隐藏图层不同,hidden后的元素针对所有的显示,比如屏幕阅读器。与form里的hidden域相似。

 

role和aria-*属性

HTML5把WAI-ARIA当作是合法的语言增加,用来做辅助作用。

 

spellcheck属性

spellcheck 属性规定是否对元素内容进行拼写检查。例如:

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

HTML5中新增的input类型及其属性

HTML5中新增的input类型及其属性HTML4.01中,input的类型只有text、button、password、submit、radio、checkbox和hidden(隐藏域)。H5中新增...
  • rishonyou
  • rishonyou
  • 2017年02月22日 11:48
  • 2926

23、H5新增js属性之本地存储

H5新增js方法之本地存储 Storage     sessionStorage         session临时回话,从页面打开到页面关闭的时间段                       窗口...
  • chuipaopao163
  • chuipaopao163
  • 2016年08月23日 17:05
  • 502

h5新增标签及css3新增属性

面试中经常被问,支支吾吾的老是答不全!!血泪教训,决定记下来!- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canv...
  • qq_37811211
  • qq_37811211
  • 2017年03月08日 19:43
  • 5327

h5 form表单新增属性

前端向后台提交数据时经常需要使用到form表单,在JavaScript面试之前,判断form表单的信息正确与否只能直接将原始数据交到后台,让后台判断。这样的实现方式效率极其的低下,增大了服务器和带宽的...
  • zhangwx6
  • zhangwx6
  • 2017年03月03日 16:31
  • 811

HTML5新增的标签和属性归纳

收集总结的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法 不同之处:开头的 字符编码变得简洁, 不区分大小写...
  • garvisjack
  • garvisjack
  • 2017年01月27日 11:21
  • 6171

h5新增表单控件及其相关属性

新的输入型控件email : 电子邮箱文本框,跟普通的没什么区别当输入不是邮箱的时候,验证通不过移动端的键盘会有变化 tel : 电话号码 url : 网页的URL sear...
  • aiyoquickly
  • aiyoquickly
  • 2016年06月05日 16:12
  • 613

h5新增标签及css3新增属性

新增标签 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi...
  • haihiaandtongtong
  • haihiaandtongtong
  • 2018年01月10日 17:17
  • 21

web前端开发jqeury之checkbox选中与取消

全选/取消 $('button').click(function(){ /*第一次有效果,后面再点击就没效果了 if($(this).hasClass('check-all')){ ...
  • u013224660
  • u013224660
  • 2015年08月31日 19:51
  • 1446

H5的新特性及部分API详解

h5新特性总览移除的元素**纯表现的元素:**basefont、big、center、font等 **对可用性产生负面影响的元素:**frame、frameset、noframes新增的API语义:...
  • charlene0824
  • charlene0824
  • 2016年08月09日 19:19
  • 28036

H5 - HTML5新增标签

13年那时候 H5还未火起来 自学的是Html 4.0 如今回首起来 虽然都是标签 但是H5相较于Html4.0还是精简了不少 尤其是一些新增了一些更加直观的标签 删去了不常用的标签 两年...
  • boring_cat
  • boring_cat
  • 2016年03月21日 21:22
  • 16471
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[前端] H5新增属性
举报原因:
原因补充:

(最多只允许输入30个字)