游客

标题:[分享]必须知道的七个HTML5新特性
正文:
本文介绍几个HTML5的重要特性，能够帮助你提高整个web应用的使用体验和开发效率，相信大家会感兴趣的！友情提示： 如果你想测试本文中的例子，请保证你的浏览器支持HTML5，具体你可以查看：检查是否支持HTML5（偶的浏览器Chrome测试得分：463）特性一：Drag&DropHTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽， 如果draggable="true"，则元素可被拖拽，否则只能选择元素的文本。如下代码： <p draggable="true" ondragstart="alert('dragstart')">Drag me!Drag me!!</p> <p draggable="false">Don’t drag me!!</p> 如果拖动“Drag me!Drag me!!”这个，会弹出alert消息框。 同样的定义其他拖拽事件如ondragenter、ondragover、ondragover、ondrop等的动作函数就可以完成一个完整的拖拽动作，实现想要实现的目的例子：把本地文件（例如一张图片）直接拖拽上传特性二：正则表达式相信大家都会非常喜欢这个特性，无须服务器端的检测，使用浏览器的本地功能就可以帮助你判断电子邮件的格式，URL，或者是电话格式，防止用户输入错误的信息，通过使用HTML5的pattern属性，我们可以很方便的整合这个功能，代码如下：<input type="email" pattern="[^ @]*@[^ @]*" value="" />如果在Firefox浏览器中运行，并且输入错误的email地址，会看到红框提示的效果。特性三：数据列表元素在没有HTML5的日子里，我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能，而在HTML5中，我们可以直接使用datalist元素，如下： <form action="www.camnpr.com/" method="post">&nbsp
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页