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新特征和窍门的更多相关文章

  1. App开发中甲乙方冲突会闹出啥后果？H5 APP 开发可以改变现状吗

    随着各种应用的全面App化,因App而起的合作纠纷也日益增多,其中不乏最终对簿公堂的情形.WeX5(html5开发工具)为您汇总了三个典型的真实案例,方便您体会甲乙方冲突情景. 在围观别人争吵之余,您 ...

  2. H5 App开发用WeX5垃圾 试用一周,我果断放弃了wex5

    上个月,和朋友一起参加wex5的分享会,因为对cordova有些了解,始终不相信wex5的广告.五一假期,小试一下,果然不出我所料,有不少坑. 想下载IDE,竟然有1.7G,虽然现在网速快但是文件太大 ...

  3. HTML5 Plus移动App(5+App)开发入门指南

    HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...

  4. HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...

  5. 5+ App开发入门指南

    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...

  6. “微信应用号对行业影响”之一,app开发速来围观

    昨天,微信张小龙的一个讲话刷爆朋友圈,除了4大价值观,最后顺便提到:要推出微信应用号! 其实,价值观也就说说听听,最后顺便提到的微信应用号,才是真正的巨型炸弹. 腾讯挟6亿高粘度用户之重,号令天下,阿 ...

  7. 5+ App开发打包指南

    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...

  8. 移动web开发和移动app开发的区分

    1.移动web开发 这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webkit的天下,pc端是IE的天 下.手机网页可以理解成pc网页的缩小版加一些触摸特性. ...

  9. 打通移动App开发的任督二脉、实现移动互联创业的中国梦

    年初的两会上,第一次听到克强总理讲到“互联网+”的计划,当时就让我为之感到无比振奋.我个人的理解是:“互联网+”的本质就是要对传统行业供需双方的重构,通过移动互联技术来推动各个行业上的全民创新,促使中 ...

随机推荐

  1. 使用Unison同步服务器目录

    一.Unison简介Unison是Windows.Linux以及其他Unix平台下都可以使用的文件同步工具,它能使两个文件夹(本地或网络上的)保持内容的一致.Unison拥有与其它一些同步工具或文件系 ...

  2. jQuery Masonry构建pinterest网站布局注意要点(转)

    在愚人码头的博客上看到有关于如何构建pinterest网站的文章,其实就是“图片瀑布流显示”,我试着在本地做了一个,没有什么问题,但是放到公司的网站上就问题多多.一是定位不准确,二是图片显示不完整.但 ...

  3. [013]函数重载--int*和void*的匹配优先级

    同事去面试的时候的问题: 测试一下发现:在同时存在int*和void*的重载函数时,vs2010的环境下,优先匹配void* #include<iostream> using namesp ...

  4. Vi、Vim及Gedit编辑器

    搜索(注意,不需要输入:号.也可以先输入:号再键入命令) /string……………………向后搜索,从光标处向文件尾搜索,按n键继续搜索下一个 ?string……………………向前搜索 注意:搜索时会将所 ...

  5. Models

    Models Models control the data source, they are used for collecting and issuing data, this could be ...

  6. Cummins INSITE locked and ask for verification code

    Some Cummins INSITE users turn to our engineer with a same question: INSITE has detected an invalid ...

  7. Android（java）学习笔记126：Android Studio中build.gradle简介

    1.首先我们直接上代码介绍: // Top-level build file where you can add configuration options common to all sub-pro ...

  8. next nextval

    1 KMP算法中next与nextval值的计算 以上两张图代表了next值的求法,本人总结后做如下叙述: 根据公式可知: next[1]=0 next[2]=1 next[3]的求法根据公式可以直接 ...

  9. iOS之文本属性Attributes的使用

    1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont systemFontOfSize:_fontS ...

  10. opencv中stitching_detail的运行

    这个拼图并非自带的直接使用sources中的代码.而是把必要的内容放到工程中,改造成自己的图像拼接.参考博文:http://www.tuicool.com/articles/fMbUfaF 该篇博文总 ...