H5 APP开发必读,20个你不知道的Html5新特征和窍门
Jeffrey Way曾发表过一篇博文《28 HTML5 Features, Tips, and Techniques you Must Know 》讲述了28个HTML5特征、窍门和技术，张鑫旭将本文进行了翻译，并做了适当编辑整理，本楼楼现转载于此，并附上一个H5实际演示案例，大家直接点击即可体验H5的强大效果。H5 App已势不可挡，希望本文帮助大家更了解移动应用开发。全文如下：
前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。
一、新的Doctype
”doctype”中文意思指“文档类型”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
使用新的HTML5文档类型代替吧。你会活得更久<!DOCTYPE html> 您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今这是可行的，只有老的浏览器需要一个特定的doctype（文档类型）。浏览器如果不知道doctype，就会很简单的以标准模式对包含的标签进行渲染。
二、图形元素(The Figure Element )
看看下面给图片添加的标示：
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。
HTML5通过采用<figure>元素对此进行了改正。当合<figcaption>元素组合使用时，我们就可以语义化地联想到
这就是图片相对应的标题
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
三、<small>重新定义
还在不久前，<small>元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素，但是，现在，这种用法可能就不正确了。<small>元素已经被重新定义了，指小字，因而更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<small>可以正确地包裹这些信息。
四、脚本(scripts)和链接(links)无需type
您可能现在仍在给link和script标签增加type属性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把type属性一起干掉。
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
五、引号还是不要引号
…这确实是个问题。记住，HTML5不是XHTML，要是你不愿意，你没有必要非得用引号标记包裹你的属性，没有必要非得闭合元素。换句话说，只要你自己觉得舒服，就没有什么对错之分。对于我自己来说就是如此。
<p class="myClass" id=someId> Start the reactor.
对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。
六、内容可编辑
最新的浏览器有个很赞的新属性可以应用到元素上，叫做contenteditable。顾名思义，就是允许用户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序，可大大利用其本地存储的优势。
<ul contenteditable="true">
<li>反手摸到肚脐身材好</li>
<li>最帅售票员</li>
<li>带着婚纱去蜜月</li>
</ul>
或者，根据前面所学到的一些技巧，我们可以把它写成：
<ul contenteditable=true>
七、Email输入(Inputs)
如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。
<form action="" method="get">
<label for="email">邮箱:</label><input id="email" name="email" type="email" />
<button type="submit">确定</button>
</form>
还应当指出，当谈到哪些元素和属性支持和不支持时，当前所有的浏览器都有点靠不住的。例如Opera似乎支持电子邮件验证，但仅在name属性被指定的时候。而且，它不支持占位符属性，这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它！
八、占位符(Placeholders)
Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失；失去焦点时如果内容为空，提示文字又出现。
这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法，我们需要使用一点JavaScript代码实现占位符效果，
当然，你需要设定一个初始的默认的value值，然后根据输入内容进行判断，从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性，一切就轻松了。
<label for="email">邮箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
根据我的测试，目前至少webkit核心的浏览器是支持placeholders属性的，像Chrome，Safari.
九、本地存储(Local Storage)
多亏了本地存储，我们可以让高级浏览器记住我们的编辑后的内容，即使浏览器被关掉或是页面刷新。关于本地存储（离线存储）可以参见WEX5微信中提到的文章“吓哭原生App的HTML5离线存储技术，却出乎意料的容易！”。
十、语义的Header和Footer
那些过往的日子：
<div id="header">
...
</div>
<div id="footer">
...
</div>
div嘛，很自然的，没有语义化的结构——即使在应用了id后。现在，通过HTML5，我们可以使用<header>和<footer>元素。以上的代码可以替换成：
<header>
...
</header>
<footer>
...
</footer>
它完全适合您有多个页眉和页脚的项目。
尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。这同样也适用于header。
十一、IE和HTML5(Internet Explorer and HTML5)
不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。
所有元素，默认的，都有个inline的display
为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为HTML5 shiv。该脚本同样修复了些显示问题。
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
十二、文档某一部分的信息(hgroup)
想象一下，在我的网站的标题，我有我的站点的名称，随后立即由一个副标题。虽然我们可以使用一个<h1>和<h2>标签，为其分别创造标记，但是依旧没有（因为HTML4）一个简单的方法来语义上说明了两者之间的关系。此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素，我们可以将这些标题组合在一起。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
十三、必要的属性(Required Attribute )
表单允许新的必要属性，用来指定是否需要特殊的input。这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。
<input type="text" name="someInput" required>
或者，使用更结构化的方法：
<input type="text" name="someInput" required="required">
两种方法都行。
下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。
<form action="" method="get">
<label for="name">姓名:</label>
<input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />
<button type="submit">提交</button>
</form>
十四、Autofocus属性
同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。
<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>
有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。
十五、Audio支持
我们无需再依赖第三方插件区渲染音频。HTML5提供了<audio>元素，嗯，至少，最终，我们将不必担心这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
十六、Video支持
与<audio>元素很类似，在新的浏览器中也存在Video！事实上，就在最近，YouTube宣告了新的HTML5视频嵌入，当然，是为支持此功能浏览器。
因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频（其中Flash播放器可以播放），Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E,mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
无论是”ogg”格式还是”mp4″格式的视频Chrome浏览器都能正确编码
还有一个值得注意的一些事情：
我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。
十七、视频预载(Preload Videos)
预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。<video preload>
十八、显示控制条
如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。<video preload controls>请注意，不同浏览器渲染出来的进度条的模样都是不一样的。
十九、正则表达式
你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。
<form action="" method="get">
<label for="username">姓名:</label>
<input id="username" name="username" type="text" placeholder="4-10个英文字母"
pattern="[A-Za-z]{4,10}" required="required" autofocus />
<button type="submit">提交</button>
</form>
如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。
二十、属性支持检测
如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的Modernizr库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：
alert( 'pattern' in document.createElement('input') );
事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。
<script>
if (!'pattern' in document.createElement('input') ) { }
</script>
谨记此方法依赖于JavaScript。
尾声、实际体验HTML5 App的效果
直接点击无需下载即可进行体验：H5 App的效果演示（本案例是基于WeX5开源框架开发，框架及案例的全部源代码都完全开源、完全免费，有需求的可以在WeX5的下载包里获取。）
H5 APP开发必读,20个你不知道的Html5新特征和窍门的更多相关文章
- App开发中甲乙方冲突会闹出啥后果？H5 APP 开发可以改变现状吗
随着各种应用的全面App化,因App而起的合作纠纷也日益增多,其中不乏最终对簿公堂的情形.WeX5(html5开发工具)为您汇总了三个典型的真实案例,方便您体会甲乙方冲突情景. 在围观别人争吵之余,您 ...
- H5 App开发用WeX5垃圾 试用一周,我果断放弃了wex5
上个月,和朋友一起参加wex5的分享会,因为对cordova有些了解,始终不相信wex5的广告.五一假期,小试一下,果然不出我所料,有不少坑. 想下载IDE,竟然有1.7G,虽然现在网速快但是文件太大 ...
- HTML5 Plus移动App(5+App)开发入门指南
HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...
- HTML5手机APP开发入(5)
HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...
- 5+ App开发入门指南
HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...
- “微信应用号对行业影响”之一,app开发速来围观
昨天,微信张小龙的一个讲话刷爆朋友圈,除了4大价值观,最后顺便提到:要推出微信应用号! 其实,价值观也就说说听听,最后顺便提到的微信应用号,才是真正的巨型炸弹. 腾讯挟6亿高粘度用户之重,号令天下,阿 ...
- 5+ App开发打包指南
HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...
- 移动web开发和移动app开发的区分
1.移动web开发 这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webkit的天下,pc端是IE的天 下.手机网页可以理解成pc网页的缩小版加一些触摸特性. ...
- 打通移动App开发的任督二脉、实现移动互联创业的中国梦
年初的两会上,第一次听到克强总理讲到“互联网+”的计划,当时就让我为之感到无比振奋.我个人的理解是:“互联网+”的本质就是要对传统行业供需双方的重构,通过移动互联技术来推动各个行业上的全民创新,促使中 ...
随机推荐
- POJ 3692 最大独立集
题意:有G个女生,B个男生,所有的女生都互相认识,所有的男生都互相认识,还有N对男女,他们互相认识. 问从中选出最多的人数,是的他们全部互相认识. 思路:这道题的构图很巧妙,对于他的补图构图,对于所有 ...
- sql server R2 下载地址收藏
SQL Server 2008 R2 下载地址 32位: http://care.dlservice.microsoft.com/dl/download/1/e/6/1e626796-588a-495 ...
- dd,实现系统备份
一.dd的使用 dd命令的解释dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾则乘以相应的数字:b=512:c=1:k=1024:w=2 参数: ...
- Dubbo架构设计详解--转载
原文地址:http://shiyanjun.cn/archives/325.html Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解 ...
- NAT技术基本原理与应用
转载自:http://www.cnblogs.com/derrick/p/4052401.html?utm_source=tuicool&utm_medium=referral#undefin ...
- 我的开发框架(WinForm)3
今天继续给大家介绍核心库的IOC的使用,在我的框架里,IOC使用的比较简单,主要是用于解除模块间的耦合和实例化接口. 1.接口说明,IocContainer接口比较简单只有3个方法,但是是系统中用的最 ...
- [转]ASP.NET MVC Select List Example
本文转自:http://www.aspnetmvcninja.com/views/asp-net-mvc-select-list-example Select lists are a great wa ...
- CMD/AMD
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues ...
- asp.net网页中上传并且浏览pdf文件的实现
本文主要讲解在asp.net中的gridview中浏览pdf文件.下面来看一下具体的实现: 第一步,使用sqlserver 创建一个数据库表. 第二步,新建一个webform,命名为uploadpdf ...
- 第六篇、git常用的命令
1.oscine git服务器地址 https://git.oschina.net/ 2.帐号:18775134221@163.com 密码:562011 3.创建私有的仓库 4.使用命令 4.1 配 ...