整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

每天一道前端面试题系列(2):HTML5有哪些新特性

TML5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

HTML5的新特性:

  • 绘画的 canvas 元素
  • 音频标签:video 和 audio 元素
  • 新增的结构元素:section、article、aside、nav、time、pubdate、header、footer、hgroup、address
  • 新增的状态元素:meter、progress
  • 新增的列表元素:datalist、details、summary
  • 新增的表单元素:calendar、date、time、email、url、search

表单验证

placeholder自动聚焦

  • 对本地离线存储的更好的支持


移除的元素:

  • 纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  • 对可用性产生负面影响的元素:frame,frameset,noframes;


不能识别HTML5新标签而不能使用,解决办法有两种:

  • 方法1:实现标签被识别

通过document.createElement(tagName)方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。

  • 方法2:JavaScript解决方案
    • a)使用html5shim:

在<head>中调用以下代码:

<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

当然也可以直接把这个文件下载到自己的网站上,但这个文件必须在head标签中调用。

    • b)使用kill IE6

在</body>之前调用以下代码:

<!--if lte IE 6]>
	<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
<![endif]-->


区分HTML和HTML5:

  • DOCTYPE声明
  • 新增的元素

要为大家详细介绍了HTML5拖放效果的实现代码,拖放即抓取对象以后拖到另一个位置。感兴趣的小伙伴们可以参考一下:

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。但 Safari 5.1.2不支持拖动。

下面看看实现效果:

拖拽前

拖拽后

代码实现:

把draggable属性设置为true ,才能使元素可拖动。

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:event.preventDefault()

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中

若要实现来回拖动:

若要在两个地方来回拖动,只需将上面代码稍作修改就行了.将body中的代码改成:

然后在style样式中加上#div2就可以了:

个安卓浏览器体积可以小到什么程度?5M?1M?几百K?现在这款H5浏览器给出了惊人的答案——只要20K!没错,这款H5浏览器就是一款体积仅有20K的安卓浏览器,在App普遍臃肿化的安卓生态当中,显得如此鹤立鸡群。如此小的体积里面,蕴藏着怎样的能量?一起来看看H5浏览器的体验如何吧!

软件名称:H5浏览器
软件版本:0.1.15
软件大小:21KB
软件授权:免费
适用平台:Android
下载地址:http://dl.pconline.com.cn/download/365516.html

其实H5这个名字,某些朋友可能会有些耳熟,笔者倒是很陌生,毕竟不玩黄油。H5浏览器和某个黄油论坛,估计也没什么关系,名字应该只是个巧合。这款H5浏览器的体积是最大的亮点,仅有21K左右,安装速度和运行速度都快得惊人。开启后,可以看到它的布局也是非常简单,除了地址栏/搜索框外,基本就没有什么元素了。

H5浏览器的界面,除了地址栏就只有一些简单的导航按钮

带有天气和网页导航

H5浏览器的功能是比较简单的,它开启网页后只能通过菜单键进行刷新、关闭和收藏网页等操作,甚至不能切换多个网页(日后的版本应该会加上)。不过,它的速度倒是不错,排版也没有什么大问题,流畅度也挑不出什么毛病。H5浏览器的原理应该是调用了安卓系统的WebView组件,然后给WebView套个壳,原理类似PC平台的IE加壳浏览器。

H5浏览器开启网页的效果,功能非常简单,地址栏都没有

长按右下角的菜单按钮可以显示网页地址,但不能切换多个网页,下个版本应该就会加入了

H5浏览器的功能目前比较少,但也不是一无所有——对比20K的体积,它的功能还是有点出乎笔者的意料的。在主界面右上方点击“更多”按钮,可以进入到更多功能的界面,在其中,可以找到更新日志、插件中心、高级设置等模块。插件中心目前仍是个雏形,反正笔者是没法下载到相应的功能插件,但从中也可以看到日后会推出屏蔽广告、更换皮肤等插件。而在高级测试中,用户可以切换日间和夜间皮肤,可以自定义搜索引擎,还能够更改手势噩耗隐藏按钮,还是相当不错的。

功能很有潜力,插件中心日后应该会越来越丰富,但目前还不可用

可以对手势、搜索引擎等作一些设置

比较有意思的是,H5浏览器还自带了HTML5(调用HTML5TEST的页面)和UA设置。不同手机的WebView引擎会有差异,所以测出来的结果也不同。在这里,也可以看到H5浏览器的确是调用系统WebView来实现网页浏览的功能的。

自带HTML5测试和UA查阅

总的来说,H5浏览器是一款相当有意思的浏览器。它极小的体积给人留下了深刻的印象,同时插件中心的引入,以及一些未完成的功能,也令人惊叹于它的潜力。在PC平台上,傲游(MyIE)靠套壳受到了极大欢迎,H5浏览器或许也能赢得大量粉丝。