详细解析HTML5开发移动项目经验谈

详细解析HTML5开发移动项目经验谈,PS教程,

这样,字体的大小就有我们自己设置,是可控的。

(3)、字级单位。

我们常用的有px、pt、百分比、em等,很惭愧,我最近才知道有rem,而且是个相当不错的朋友。前面的几个单位大家都比较熟悉,不知道有没有和我一样小白的才知道rem的呢,我们就介绍一下这个新朋友,它是随着css3来到这个世界。

我们之前用em、百分比的时候遇到的问题就是计算,而且当嵌套的层级太多时就会非常难以把控,而用px则被固定死了,现在我们用rem完全不用担心这个问题,因为rem的参照对象只有根节点。我们只需设置根节点的大小,所有子节点都只需参照它来设计就可以,下面是px、em、百分比和pt的对比

详细解析HTML5开发移动项目经验谈,PS教程,

根据上面的图表(红色部分为默认,当然不同的浏览器渲染默认值不一样,具体还需各位实测)可以看出,我们只需设置html根元素字体大小为75%,对应的px值就是12,这样我们可以很方便的设置页面的宽高和字体大小,当然单位是rem,这样参考对象才会永远是html而不是父元素,当需要变化的时候,只需改变html的大小其他的元素都会相应变化,方便极了。

3、HTML5新增标签。

在html5中新增量很多标签,加强连html标签的语义化,如

详细解析HTML5开发移动项目经验谈,PS教程,

等等,这些标签都各自有自己大意义,不再仅仅是span和div,虽然html4中也有很多语义化的标签,但是不如html5丰富。除了这些新增的标签,还有一些此前就有的标签,但是类别新增,最具代表性的就是表单form,而本文要介绍的就是form。

详细解析HTML5开发移动项目经验谈,PS教程,

以上除了type=text外,其他的都是新增的,如果浏览器支持这些属性的话,就会自动调用相应组件,如在移动设备中type=number/email/text时,浏览器会调用不同版面的键盘,这样加快用户的输入,体验也更美好,如下

详细解析HTML5开发移动项目经验谈,PS教程,

如果是type=range则会出现这样的组件,供选择范围

详细解析HTML5开发移动项目经验谈,PS教程,

如果是type=color则会出现颜色选择器

详细解析HTML5开发移动项目经验谈,PS教程,

如果是type=date则出现日期选择器

详细解析HTML5开发移动项目经验谈,PS教程,

如果是type=search,则在输入时候出现一个一键清除的按钮,点击输入的文字全部清除

详细解析HTML5开发移动项目经验谈,PS教程,

另外,除了input的type新增量类别,还增加一些很实用的属性,如placeholder,我们知道,input中我们常常会默认一些文案,当用户输入的时候会自动清除,html5之前我们是靠javascript实现的,但是有了html5,我们可以轻松实现,只需要placeholder=”默认文案” 如下

当然新增的不只有placeholder,还有譬如可以关闭默认大小写的autocapitalize=”off”,有兴趣的童鞋可以研究研究。