HTML5新特性

1.声明方式修改

html5:

2.更多的语义化标签

  • header (网页头部)
  • footer  (网页尾部)
  • aside  (侧边栏)
  • section  (内容区域块)
    
    

    HTML5新特性_第1张图片3.新的input表单输入类型与属性

类型
  • 邮箱
            
            
  • 数值输入

        
        
        
  • 文件导入

上传本地文件,需js代码配合。如果需要上传多个文件,给表单添加mulitiple属性。如果上传图片,给表单添加enctype属性。

        

    
photo
  • 图片按钮

  • 颜色选择,日期展示,搜索框,手机号码输入框,网址输入框等
属性
  • placeholder

这个属性是文本的占位符,相当于一种提示信息,显示在输入域,描述期待user输入的值


  • required

这个属性的值为Bool,默认为true,意思是在输入域不能为空


  • autofocus

auto是自动的意思,focus是聚焦的意思,这个属性描述的就是自动聚焦到需要填写的textarea。


  • autocomplete

这个属性有两个值,一个是on,另一个是off。默认是on,与email相反,email默认是off。功能是提示写过的信息。

attention:这个属性一定要和name一起使用,不然是不合法不生效的。


  • minlength和maxlength

这个属性限定输入的最少字数和最多字数,以字符个数计数。


4.视频和音频

video:

video的方法,属性,事件可以使用js来控制。

方法:play(),pause(),load(),分别是播放,停止,加载方法。

属性:width,height,controls。width和height属性值为像素或者百分比,功能是设置播放窗口的宽度和高度。controls属性值为boolean,功能是控制播放条。

   

audio:

audio可以实现与flash相同的功能,比如回放,跳转缓冲等等。与video用法相似。

属性:autoplay:自动播放,值的类型为bool,默认为true。

​ controls:进度条控制,值的类型为bool。

​ loop:循环播放,值的类型为bool。

​ muted:静音播放,值的类型为bool。

​ poster:预加载图片在播放视频之前,值为图片路径URL。就是我们通常理解的视频封面

   

5.canvas绘图与SVG绘图

6.地理位置APi

7.拖放APi

8.Web Worker

web worker 是运行在后台的 JavaScript。
Q1:JS是怎么执行的?
A1:JS是单线程执行模式。

Q2:什么是单线程模式?
A2:所有任务只能在一个线程上执行,一次只做一件事情。前面的没有执行完,后面的只能等待。

Q3:有什么不好的地方吗?
A3:1 现在的CPU大多数是多核的,计算能力牛逼到不行。单线程无法发挥出CPU计算的价值。
2 页面上JS在执行的时候会阻塞浏览器的响应,影响用户体验。毕竟页面是为用户服务的。

Q4:Web Worker解决了什么问题?
A4:为js创建多线程环境。js在主线程执行,new一个子线程在后台执行。worker完成计算的任务返回给主线程,UI交互流畅,不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞,而子线程代码执行不会。主线程和子线程两者互补干扰,独立执行。

9.Web Storage

10.Web Socket

你可能感兴趣的:(HTMl,html,前端)