首页 > 技术文章 > [HTML5]学习笔记

flyingMonkey 2015-12-26 22:05 原文

新增结构元素
     1.section
          1.1.对内容进行分块
          1.2.不推荐被定义样式
          1.3.没有标题不推荐使用section元素
          1.4.如果article元素、aside元素、 nav元素更符合使用条件,那不用使用section元素
     2.article
          2.1.可以嵌套适用
          2.2.可以用来表示插件
     3.aside
          3.1.应用场景
               3.1.1.文章附属信息部分
               3.1.2.相关引用
               3.1.3.侧边栏
               3.1.4.广告
               3.1.5.导航条
               3.1.6.区别于主要内容的部分
     4.header
     5.hgroup
     6.footer
     7.nav
          7.1.应用场景
               7.1.1.传统导航栏
               7.1.2.内侧栏导航
               7.1.3.页内导航
               7.1.4翻页操作
          7.2.不要使用menu元素代替nav元素
     8.figure
新增的其它元素
     1.video
     2.audio
     3.embed
          3.1.内嵌元素,类似iframe
     4.mark
     5.progress
     6.meter
     7.time
     8.ruby
     9.rt
     10.rp
     11.wbr
     12.canvs
     13.command
     14.details
     15.datalist
     16.datagrid
     17.keygen
     18.output
     19.source
     20.pubdate
新增的input元素的类型
     1.email
     2.url
     3.number
     4.range
     5.Date Pickers
废除的元素
     1.能使用CSS代替的元素
          1.basefont
          2.big
          3.center
          4.font
          5.s
          6.tt
          7.u …..
     2.不能在使用frame框架
     3.只有部分浏览器支持的元素
     4.其它废除的元素
全局属性:
     1.contenteditable
     2.hidden
     3.spellcheck
     4.designMode
     5.tabindex
新增属性:
     1.form表单属性
          1.formaction 
          2.formmethod
          3.formenctype
          4.formtarget
          5.autofocus
          6.required
          7.lable
          text
          8.control
          9.placeholder
          10.list
          11.autocomplete 
          12.pattern 正则
          13.selectionDirection 选择方向
          checkbox
          14.indeterminate 选中状态(JS使用)
          15.image image提交按钮
HTML改良的Input的元素
     1.url
     2.email
     3.date
     4.time
     5.datetime
     6.detetime-local
     7.month
     8.week
     9.number
     10.range
     11.search
     12.tel
     13.color
     14.output 追加
     from验证
     15.novalidate  不使用email input 本身的验证
增强的页面元素
     1.figure
     2.figcaption
     3.details
     4.summary
     5.maker
     6.progress:需要和span配合使用
     7.meter
     8.ol
     9.dl
     10.cite
     11.small
HTML5 音频视频
     1.audio
     2.video
编解码工具
     1.工具 FFmpeg
 HTML canvas使用路径
     1.canvas
     2.EaseJS 插件
HTML5 File API的应用进阶
     1.可选择列表
          1.1事件冒泡
          1.2footello
     2.操作模式更换
     3.操作栏切换特效
          3.1transition
HTML5服务器推送
     1.HTML5服务器推送
     2.WebSocket
     3.HTTP轮询
HTML5在移动开发中的准则
     1.浏览器消耗最小的CSS属性
          1.1 位置-transform:translate(x,y,z)
          1.2 大小- transform:rotate(ndeg)
          1.3透明度- opaccity:0.1
          属性 变化时硬件需要进行的操作查询
          http://csstriggers.com
     2.尽量使用单页面开发(SPA)
     3.慎重选择前端UI框架
     4.动画、特效使用准则(60fps)
     5.长度单位使用rem
HTML5页面基本布局构成
     1.流式布局-适合内容型应用
     2.绝对定位布局-适合交互类应用
     3.Flexbox-适合局部使用(Android4.1+IOS7+)
     4.CSS grid Layout(20153月WD chorme)
     浏览器支持/兼容性查询
          http://www.caniuse.com
     5.实现手机点击事件
          1.touchstart
          2.touchend
          3.touchmove
          例子 这个还可以扩展(是否适用的是触碰设备)
          
 

推荐阅读