HTML5初识

HTML5的标准已经制定完成,在web界掀起了一股热潮,也引发了html5 web app与native app的生死之争。最近学习了解了一下html5的知识,本文是一些个人的总结感想,系统学习还请参考官方教程。

写在之前

目前各大浏览器对html5的支持度不同,同一标签在不同的浏览器中也可能产生不同的效果,访问http://html5test.com,该网站会直接显示当前浏览器对html5的支持情况,以及各功能标签所有浏览器的对比情况等。我的本地的浏览器是Firefox32.0.3Chrome37.0.2062.120,得分分别为474/555492/555
对于form表单的支持就有如下区别(只截取了前面部分)

图片
图片

标签属性更加简单

html5中,标签简洁化、智能化。比如简化的DOCTYPE、简化的字符集声明。增加了像<header></header> <footer></footer>这样之前需要使用<div id = "header"></div> <div id = "footer"></div>可以独立出来方便表示的标签。

属性布尔化也极大的方便了表单的创建,比如之前在checkbox中设置选中需要checked = "checked",这样显得有点多余,html5中直接写明checked就表明设置了checked的bool值为true,未写就表示没有选中。

表单交互更加友好

html5包含了更多了控件类型,如日期、颜色、数值选择等,而在之前则需要通过javascript、CSS写一个日期控件供用户去选择日期。

关于表单的另一个点赞的地方就是,html5中结合了javascript的验证功能,将之前只能由javascript处理的过程交给了浏览器内在的处理机制。比如,表单的必填项验证required属性,设置了该属性的话,用户如果未填写则提交不了表单并且会出现必填项必填的提示语句。

新增的emailurltelnumber类型是从<input type = "text">中扩展而来,提供了一定程度表单的验证。看到浏览器层面上就把邮箱验证的过程给完成了,就想到之前的一篇邮箱验证之我见,测试发现其实浏览器的验证也并不是非常严格的,当然正如那篇文章里提到的,对邮箱做必要的合理性验证也就足够了。

设备平台更加兼容

html5技术跨平台,适配多终端。传统移动端的native app必须依赖不同的操作系统,一款通用的app需要有Android、ios、windowsphone等不同的版本,而html5/javascript/css开发的应用可以通过浏览器进行访问,为了方便的话也可以封装为app。当然,通过移动浏览器访问页面的用户体验没有native app好,毕竟隔了一层浏览器,而不是直接与操作系统进行交互。

那么,为什么说设备更加兼容呢?之前的话,如果需要移动端浏览器访问web站点,就需要在系统中判断User-Agent,然后开发移动端访问的页面。如果不这样做的话,移动端就需要放大屏幕来查看和操作页面,这样的用户体验不是很好。在html5中,响应式设计是一个非常重要的概念,这是一项与css结合的技术,需要在<meta>标签中设置name、content属性,需要注意设备的高宽度、缩放比、分辨率等等。

以上是html5初识阶段的一些总结,其它的诸如CanvasWeb SocketWeb Store等都是较大的模块,还需要花时间拜读。

Just a beginner.<br /><a href='https://github.com/yaoshanliang/about' target='_blank'>profile</a>