html5中新增的标签

1.在不支持html5新标签的浏览器里,会将这些新标签解析成行内元素

解决方式:1)ie9 ~ ie11 解析h5新标签  解析错误  处理方式: 加display:block:进行转换   

                 2)ie9以下  不能解析h5新标签   不解析   

      处理方案:   1)    通过document.createElement('tagName')创建的自定义标签

                          2)  通过引入  <!–[if lt IE9]> <script src="../js/html5shiv.min.js"></script>   <![endif]–>  

  表单新增的属性:placeholder :占位符       autofocus:获取焦点     multiple:文件上传多选     autocomplete :自动完成内容的输入      form:指定表单项属于哪个form,出路复杂表单时会需要    novalidate :关闭验证 可用于form标签    require 验证必填项   pattern:正则表达式 验证表单         autocomplete使用条件:1)必须成功提交过 ,提交过才有记录  2)当前添加autocomplete的元素必须要有name属性

表单的输入类型:email :输入email格式         tel :手机号     url:输入url格式      number:只能输入数字        search:搜索框(更人性化的搜索体验)       range:范围,可以拖动,通过value进行取值   color:  拾色器 通过value进行取值         time:时间       date: 日期    datetime:时间日期

month:月份     week:星期                                                                  

 表单事件:oninput:用户输入内容时触发      oninvalid  验证不通过时触发                   

fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。 legend元素为fieldset元素定义标题(caption)

多媒体:1)音频播放:audio标签   a)属性:autoplay   controls   loop   preload    src="url"

              2)视频播放:video标签的使用  a)属性  utoplay   controls   loop   preload    src="url"   height    width 

DOM扩展:1)document.getElementsByClassName ('class') 通过类名获取元素,以类数组形式存在。

                   2)document.querySelector('selector') 通过CSS选择器获取元素,符合匹配条件的第1个元素。

                   3)document.querySelectorAll('selector') 通过CSS选择器获取元素,以类数组形式存在。

类名操作:Node.classList.add('class') 添加class            Node.classList.remove('class') 移除class

                 Node.classList.toggle('class') 切换class,有则移除,无则添加

                 Node.classList.contains('class') 检测是否存在class

  1. 自定义属性:1)在HTML5中我们可以自定义属性,其格式如下data-*="",例如:data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。                                                                                                                             2)当我们如下格式设置时,则需要以驼峰格式才能正确获取:data-my-name="itcast",获取Node.dataset['myName']

 

猜你喜欢

转载自blog.csdn.net/weixin_42663701/article/details/81542409