资讯频道 → Web前端
阅读更多

7顶
1踩

Web前端

原创新闻 前端开发者不可忽视的 5 个 HTML5 新特性

2013-07-03 12:24 by 见习编辑 tyygming 评论(3) 有11761人浏览
html5 特性 正则表达式 前端开发

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

HTML5已经火了一段时间了，相信作为web相关开发工程师，肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标，HTML5绝对不容忽视。

在今天这篇技术分享文章中，我们将介绍几个HTML5的重要特性，能够帮助你提高整个web应用的使用体验和开发效率，相信大家会感兴趣的！



特性一：正则表达式

相信大家都会非常喜欢这个特性，无须服务器端的检测，使用浏览器的本地功能就可以帮助你判断电子邮件的格式，URL，或者是电话格式，防止用户输入错误的信息，通过使用HTML5的pattern属性，我们可以很方便的整合这个功能，代码如下： 

<input type="email" pattern="[^ @]*@[^ @]*" value="">


在线调试：http://www.gbin1.com/gb/debug/3465707b-8071-40fa-a159-4356a0a17a52.htm

如果在Firefox浏览器中运行，并且输入错误的email地址，会看到输入框边框为红色，表示输入错误。

特性二：数据列表元素

在没有HTML5的日子里，我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能，而在HTML5中，我们可以直接使用datalist元素，如下： 

<form action="/server" method="post">
    <input list="jslib" name="jslib" >
    <datalist id="jslib">
        <option value="jQuery">
        <option value="Dojo">
        <option value="Prototype">
        <option value="Augular">
    </datalist>
    <input type="submit" value="完成" />
</form>


在线调试：http://www.gbin1.com/gb/debug/0c8a7fea-4a30-4cc4-9282-1921e1251726.htm

如果你输入字母“j"，可以看到自动补齐效果。

特性三：下载属性

HTML5的下载属性可以允许开发者强制下载一个页面，而非加载那个页面，这样的话，你不需要实现服务器端的一些功能来达到同样的效果，是不是非常贴心？ 

<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a>


特性四：DNS的预先加载处理

要知道DNS的的解析成本很高滴，往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式，它将域名缓存后，当用户点击其它页面地址后自动的获取。

如果你希望预先获取NDS，你可以控制你的浏览器来解析域名，例如： 

<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">


特性五：链接网页的预先加载处理

要知道链接能够在也页面中帮助用户导航，但是页面加载的速度快慢决定了用户体验的好与坏，使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源，这样用户点击的时候，会发现页面加载速度提高了。 

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />


或者可以使用prerender属性，这个属性能够帮助你提前加载整个页面，如下： 

<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />


通过设置这个属性，登录某个网站后，设定的预加载页面已经加载了，这样如果你需要，页面会立刻加载，相信你的用户肯定喜欢访问这样的网站！

以上就是我们今天分享的五个实用的HTML5特性，希望大家喜欢，如果你也有其它的好的技巧和特性分享，请发布到我们的极客标签社区。感谢阅读！

Via 极客社区
来自: www.gbin1.com
7
顶
1
踩
评论 共 3 条 请登录后发表评论
3 楼 wade200 2014-03-25 09:14
自动补全学习了
2 楼 chaletli 2013-07-05 10:37
不同浏览器不同版本的兼容问题，一直是个大问题
1 楼 avidmouse 2013-07-03 18:07
下载属性不错，我们文件系统选用了fastdfs，下载时文件名是不可读的，终于有解决方案了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • dmd2.065_D语言2.065发布_396处修正和改进_

    D语言编译器DMD 2.065已经发布了，D语言经过近年来的努力终于取得不错的成绩！这个版本包含了大量问题修复和改进，真是值得敬佩

  • 软件项目如何做需求确定？

    1.做好需求确定的意义？ 需求确定是关于社会、沟通和管理的技能。它是系统开发中需要技术最少的一个阶段，但如果该阶段没有充分完成，其结果将会比不能完成其它阶段来的更糟。由于不理解、忽略或者曲解客户的需求而付出的代价在软件过程的以后阶段是不可承受的。 2.区别功能性需求和非功能性需求 2.1 系统需求 需求确定的目标是在实现和部署的系统中，提供满足利益相关者期望的功能性需求和其它需求的叙述性定义。如果对需求进行分类的话，将这些需求分成能够通过软件实现的和需要人工处理或者其它人工干涉的不同类需求。 功能性需求可

  • 拒绝不靠谱的需求：怎样确定需求才是正确的？

    我是一个从传统行业5年需求分析师转型做产品经理的同行，很多人都说需求分析师就是产品经理，产品经理就是需求分析师。对于这个理解我个人觉得是狭义的，在某些方面或者某些公司，需求分析师和产品经理的工作是有重合的，但这并不代表两者就是一致；产品经理负责调查并根据用户的需求，确定开发何种产品，选择何种技术、商业模式等。并推动相应产品的开发组织，他还要根据产品的生命周期，协调研发、营销、运营等，确定和组织实施

  • 需求的确定

    当用户提出一个需求时，应该以最快的速度想清晰该功能实现后是怎么样的，也就是表现形式是怎么样的，也就是我作为使用着想看到一个什么东西。确定好需求，才好做事。 如果想不清楚，就一定要跟用户沟通，了解该需求。可以这么说：“你提的功能很...

  • 我们应当怎样做需求确认：需求列表

    需求分析是一个我们与客户不断沟通的过程，这个过程就如同我们与老板的一次对话。老板把你叫去，给你交待了一大堆任务。我们首先是仔细聆听任务的内容，然后整理个一二三四。然后我们复述一遍老板的意思：“老板，我复述一遍，您看看我理解得对不对。首先，您要求我×××，然后×××，最后×××。”老板：“恩，就是这意思，你照着办吧。”之后，我们开始了我们的工作。这个复述的步骤相当重要，因为人与人的沟通最大的问题就是...

  • 需求分析——确定需求细节（规则与约束）

    之前写过一篇关于需求分析描述细节需要注意的规则和约束，今天在看徐峰的软件最佳实践时，看到了更为总结的描述，下面摘录进来： 规则是在实现时应该考虑的东西，约束是对技术手段选择起到限制作用的各种条件。 规则分类：行为（或成为功能、业务）规则、结构（或数据）规则、界面规则。 行为规则：是指和业务逻辑、业务流程相关的规则。 结构规则：是指和业务实体、属性、派生属性相关的规则，

  • DFL for DMD2.031

    NULL 博文链接：https://godspeedhu.iteye.com/blog/423419

  • 使用dmd2.071.1版本编译DGUI

    打在DGUI工程文件，在工程属性页的命令行中添加一个-d选项，如... 其它部分和dmd2.066.1 版本相同： http://www.cnblogs.com/wanhongnan/p/5702140.html 转载于:https://www.cnblogs.com/wanhongnan/p/5731224.html...

  • D语言dmd2.071中的range

    在这range在dmd2.071.1，也就是最新版本里已经重做了。分成了三个部： std.range.interfaces; std.range.primitives; std.range.package; 使用时还是使用import std.range;会自动导入三个文件。 该版本中...

  • Hi3798CV2DMD.zip

    Hi3798CV200硬件HDK 海思网络机顶盒方案硬件开发资料 硬件版本号：CV2DMD 包含原理图和PCB(PCB包含PADS和ALLEGRO两个版本)

  • （二）需求确定（持续更新）

    文章目录2.1 从业务过程到解决方案2.1.1 过程层次建模2.1.2 业务过程建模2.1.3 解决方案构想2.2 需求引导2.2.1 系统需求2.2.1.1 功能性需求2.2.1.2 非功能性需求2.2.2 需求引导的传统方法2.2.3 需求引导的现代方法1、原型法2、头脑风暴3、联合应用开发4、快速应用开发2.3 需求协商和确认2.3.1 超出范围的需求2.3.2 需求依赖矩阵2.3.3 需求风险和优先级2.4 需求管理2.4.1 需求标识和分类2.4.2 需求层次2.4.3 变更管理2.4.4 需求可

  • black_white_dmd.m

    用于控制sim显微镜中的dmd部分。 此代码可以控制dmd产生规则的图形。以控制显微镜光源形状

  • Dynamic Mode Decomposition (DMD).zip

    Dynamic Mode Decomposition (DMD).zip

  • dmd.rar_DMD

    Arduino dmd library for matrix display

  • d语言，dmd.2.042

    D语言是结合了C#、Java和 C++以及PHP、Python等动态语言的特性于一身，且不依赖于虚拟机， 而是作为可执行程序单独来运行的，这样它的效率非常高。

  • DMD2-master_DMD_源码.zip

    DMD2-master_DMD_源码.zip

  • 编译器源代码之：DMD（D语言）dmd.2.026

    编译器源代码之：DMD（D语言）dmd.2.026。vc6编译通过

  • DMD.zip_DMD_DMD时间积分_dmd 编程_dmd编程

    数字微镜DMD编程,包括设置帧频、画面大小和积分时间等参数

  • DMD.rar_DMD 代码_dmd matlab程序_dmd分解_matlab dmd_分解

    动态模式分解的matlab 代码，有注释

  • DLP-0.45-WXGA-数字微镜器件-(DMD).pdf

    用于了解DMD的文档。 dmd可以用于结构光超分辨显微镜。

Global site tag (gtag.js) - Google Analytics