HTML5代表着Web发展的未来方向。无论大家身为开发人员还是高级用户,关于这一Web编程新基础的种种态势都值得各位高度关注。

HTML5 Web开发 HTML5教程

如果大家还没有意识到,那我们先要强调一句——Web世界已经彻底改变了。时至今日,网络银行、实时视频聊天以及短视频共享已经成为Web领域的立足根基,而接下来还将有更多极具突破性的趋势及成果不断涌现。正因为如此,这一根基才需要迎接进一步升级。

超文本标记语言(简称HTML)正是浏览器所使用的语言。作为原本立足于面向文档的标准通用标记语言(简称SGML)的衍生产物,HTML在其早期的四个版本中只需要满足最初学术性用户对于Web功能的需求。但随着用户对于各类功能的进一步渴望——从安全加密传输到视频媒体——API、SDK、插件库以及外部应用程序全部被融入到了HTML当中,从而在最大程度上迎合个人及企业用户对Web提出的要求。因此2004年,Web超文本应用技术工作组(简称WHATWG)开始着手构建一套新的HTML版本,这就是HTML 5。

2014年10月28日,万维网联盟(简称W3C)——此前曾联手WHATWG共同开发出相关标准——发布了作为稳定推荐版本的HTML 5方案,换言之这套方案已经“彻底完成”。现在我们已经能够立足于自身系统,充分享受由HTML 5所带来的种种便利。

但这些便利具体包括什么呢?实际效果可能取决于大家到底身为开发人员抑或是普通用户。对于开发人员而言,HTML 5能够显著简化大家的日常工作——相较于HTML 4.1及以下版本而言,这是因为后者包含大量我们早已弃之不用的插件及额外内容。这绝对是件好事,不过从短期角度出发,我们仍然需要考量其它一些后续问题。

对用户来说,日常生活则会得到简化,这是因为由上述插件所带来的安全漏洞及兼容性问题将不复存在,因此我们再也用不着为了正常浏览网络内容而积累丰富的安全经验。此外,浏览器的使用体验也将被拓展到更多设备平台之上,这将使得桌面设备与移动设备拥有更为统一的观看感受。谁不喜欢这样呢,对吧?

值得着重强调的是,HTML 5是一套尚处于早期发展阶段的标准。这意味着其前进道路上还将迎来多次飞跃,并将沿途带来诸多惊喜。正是考虑到这一点,我们认为它能够切实帮助整个业界以新的方式完成Web页面的构建工作。

如果大家本身正是HTML 5编程人员,那么前面提到的内容对您来说肯定属于陈词滥调了——而且大家当然也会希望能从我们这得到点更加新鲜有料的消息。希望各位能在评论栏中阐述您的体会与规划,相信这一切都将成为HTML 5向HTML 5.1进化的重要信息依托(这一升级将从明年正式开始)。好了,闲言少叙,咱们马上进入正题。

HTML5是一种新型语言

HTML5 Is A New LanguageFrom HTML to HTML4.2, every iteration of HTML was based on SGML, a document description language developed by IBM in the 1960s. While the language evolved and grew, it had a consistent basis. That's no longer the case. HTML5 is a whole new language that's not based on SGML. For Web users this will have no impact at all -- most have never heard of SGML and wouldn't know what to do with HTML if it bit them on the hand. For developers, though, it means that a lot of the 'muscle memory' regarding common tags and features will have to be re-learned. That's not necessarily a bad thing, but it is something to keep in mind as you're thinking about schedules and deadlines.The good news is that HTML5 is backward-compatible with earlier versions of HTML, so code developed last year should continue to make pages appear this year. That's great for continuity, but we know from experience that some organizations will use this to be lazy. Don't do that: Move beyond cut-and-paste and develop your new HTML5 code from scratch. You'll be glad you did.(Image: Dreftymac via Wikimedia Commons, CC BY-SA 2.5, modified by Curtis Franklin, Jr., for InformationWeek)

从HTML到HTML 4.2,HTML的每一次迭代都以SGML为基础——也就是由IBM公司在上世纪六十年**发出的这款文档描述语言。尽管HTML一直在不断发展演进,但其最为根本的出发点始终保持不变。然而如今这一情况得到了扭转。HTML 5是一种全新语言,不再立足于SGML。对于Web用户来说,这不会对他们的正常使用产生任何影响——大部分普通用户可能根本没听说过SGML,也不知道以此为基础会对HTML产生怎样的影响。不过对于开发人员而言,这意味着多年来在常用标签以及功能领域建立起的“肌肉记忆”需要再次更新甚至从头学习。这倒并不一定是件坏事,不过请各位记住,我们必须要在最后期限之前完成适应与学习,否则就会被历史的洪流所吞没。

好消息是,HTML 5仍然能够向下兼容其它早期HTML版本,因此去年才刚刚开始的代码编写工作仍然能够在今年提供正常的页面显示效果。这种延续性确实值得称道,不过根据经验,我们可以想见会有不少企业由于懒得升级而继续停滞不前。千万别这么做:不要再依赖于剪切加粘贴了,请从头开始重新开发新的HTML 5代码。事实最终会证明,这才是最明智的应对之道。

我们需要一款新的浏览器

You'll Need A New BrowserRemember when we said that HTML5 is backward-compatible? That's true. What's not true is that browsers built for HTML4 are forward-compatible with HTML5. If your organization has standardized on an earlier version of a particular browser (and yes, all you groups that insist on an old version of Internet Explorer, we're looking at you), then HTML5 is the clarion call notifying you that it's time to upgrade.The current versions of all major browsers support HTML5. They're also safer and more reliable than the older versions. Start planning now.(Image: geralt via Pixabay)

还记得我们刚刚提到过的HTML 5向下兼容能力吧?这种兼容能力的确存在,但需要注意的是,面向HTML 4以及更早版本打造的浏览器方案将无法与HTML 5顺利对接。如果大家所在的企业一直将某套早期特定浏览器版本作为标准(没错,那些仍然在坚持使用IE浏览器早期版本的朋友,批评的就是你),那么HTML 5已经发出了冲锋的号角——是时候马上动手推动升级工作了。

目前的各大主流浏览器版本都支持HTML 5。它们在安全水平与可靠性方面也要比早期版本好得多。所以马上作出规划,别再坐以待毙啦!

新的浏览器折衷途径

New Browser WorkaroundOK, so if you (or your CIO) are going to be really stubborn about the whole 'new browser' thing, there's a kludgy way to get around the requirement. You can define HTML5 code as block elements in your older HTML code and insert HTML5 elements there. It will work, and might even work well. But you won't feel good about yourself.If there's some legitimate reason that you absolutely cannot upgrade to a current browser then this could work, unless...You're stuck on a version of Internet Explorer prior to IE8. Then you have a problem, because Microsoft didn't allow you to define unknown code in a style. There's a Javascript workaround (search on 'HTML5' and 'the shiv') but you're starting to stack kludge on kludge and we know how well that tends to work out, don't we?(Image: geralt via Pixabay)

好的,如果您(或者您所在企业的CIO)对于采用“全新浏览器”始终保持固执的态度,那么咱们也可以通过折衷的办法加以解决。大家可以在早期HTML代码当中将HTML 5代码定义为块元素,并将HTML 5元素插入其中。这确实能够奏效,甚至效果还相当不错。但我敢肯定,大家自己对此不会太满意。

只要有合理的原因作为依托,大家完全可以通过以上方式暂解燃眉之急——无需升级即可拥抱HTML 5,简直机智!除非……

大家仍然坚持使用IE 8之前的陈旧浏览器版本。在这种情况下,各位一定会遇到麻烦,因为微软公司并不允许我们在样式当中定义未知代码。在这种情况下,JavaScript也能够起到折衷的作用(大家在搜索引擎中输入‘HTML 5’再加上‘the siv’即可),但这无疑会让问题更为复杂,而且我们都知道最终会带来怎样的结果——对吧?

视频播放更加轻松

Video Is A Lot EasierMaking video happen in HTML4 is something of a pain. It's not that no one knows how to do it. It's that there are several possible methods, none of which come from the language itself. It's all about the plug-in. This has worked, most of the time, but all of us have seen the various sad-face computer icons that tell us one plug-in or another has crashed, needs to be updated, or isn't available.HTML5 avoids all of that because video is a media type defined within the language itself. Want to include a video on your page? It's as simple in HTML5 as including a static image is in HTML4. If you've ever spent time wrestling with the inclusion code for a custom video player, you'll likely weep with joy the first time you write a video page in HTML5. And for users, those cute cat videos became much more reliable.Now, there are still a few wrinkles: Not all browsers offer identical support for all video media types. In general, though, if you stick with the new WebM video format you should be fine.(Image: geralt via Pixabay)

在HTML 4上实现视频播放实在令人有些抓狂。这并不是说大家不知道该如何解决,但最糟糕的是仅有的几种可能性解决办法没有一样能够依靠语言本身来完成。换言之,所有工作都得依托于插件。虽然在大多数情况下,我们最终也能得到预期的效果,但相信每位朋友——无论是开发人员还是普通用户——都曾在浏览器上看到由视频引发的沮丧小脸图标,这代表着某款插件出了问题、需要更新或者暂时不可用。

HTML 5能够避免上述所有问题,因为现在视频能够作为媒体类型在语言内部直接加以定义。打算在自己的页面当中引入一段视频?在HTML 5中完成这项工作,其难度跟在HTML 4中插入一幅静态图片差不多。如果大家曾经花过大量时间研究如何向可定制视频播放器里添加代码,那么如今轻松易行的HTML 5视频页面编写方式绝对能让您长出一口恶气。而对于普通用户来说,这些可爱的短视频内容也将拥有更为稳定的播放效果。

现在HTML 5面对的几个主要问题是:并不是所有浏览器都能够为任何视频媒体类型提供支持。不过总体而言,只要大家坚持使用新的WebM视频格式,那么整个开发流程应该不会遇到任何阻碍。

动画已被包含于其中

Animation Is IncludedHow many of you remember having to learn Flash in order to do cool animated effects on your Web page? If you didn't learn Flash, you worked with a designer who inserted blocks of magical mystery code into your otherwise very solid page. Those days are over, and pretty much everyone (including Adobe) seems happy about it.HTML5 includes all the features you need to build animation into your page. You can even do advanced 3D animation without having to resort to any external code. That's very cool. It's also far more secure and reliable than earlier methods, and we all know that we love security and reliability almost as much as we love a dancing carrot that comes to show us which button we should choose next.Another benefit: You no longer have to think about which device your page will display on. Any browser that supports HTML5 on any device will show your nifty animation just fine.(Image: ClkerFreeVectorImages via Pixabay)

不知道还有多少朋友记得自己为了在Web页面当中加入酷炫的动画效果而被迫学习Flash?如果大家没有接触过Flash,那就必须得跟专门的设计人员进行配合——后者会在原本稳定的页面当中加入大段神秘代码,而这有可能引发各类潜在问题。不过痛苦的时光已经过去,如今几乎每个人(包括Adobe公司在内)都对HTML 5的新能力感到振奋。

HTML 5当中包含有我们在页面内创建动画效果时所需要的全部功能。大家甚至可以在无需引入任何外部代码的前提下实现复杂的3D动画,这一点非常值得称道。此外,与早先的实现方式相比,如今的内置功能也把安全性与可靠性水平推向了新的高度。很显然,对于每一位开发人员来说,安全性与可靠性都跟开发成果的自身品质紧密相关。

另一大进步:我们用不着再考虑自己的页面会显示在哪些设备之上了。任何一款支持HTML 5的浏览器都能在全部设备上正常显示各位精心设计出的动画效果。

视频通话全面来临

Video Calling Is ComingAnimation is very cool, but browser-based video calling and collaboration through a protocol called WebRTC (Web Real-Time Communications) could be a serious game changer. While not strictly a part of the HTML5 protocol, HTML5 browsers have the capability to take advantage of WebRTC in a serious way.Imagine building a video-conferencing feature for your Web site with three lines of code. You can do that with WebRTC. It's seriously cool. It's also fairly new, so some issues are still being resolved. One of them has been a security flaw that compromised some VPNs. Another is the fact that WebRTC is a point-to-point system -- the calls don't have to go through a central server. That's great for reducing data center overhead, but the effect on overall network traffic isn't yet known. It could be trivial, or it could blow previous network planning models out of the water.The issues will almost certainly be resolved because WebRTC seems just too darned useful to ignore. Add it to your HTML5 coding repertoire, and collaboration and customer support could both shift into a much higher gear.(Image: PublicDomainPictures via Pixabay)

动画效果当然很酷,不过基于浏览器的视频通话与协作模式如今亦可通过名为WebRTC(即Web实时通信)的协议得到实现——这几乎从根本上改变了游戏规则。尽管并不严格隶属于HTML 5协议范畴,但HTML 5浏览器确实能够发挥WebRTC所带来的功能优势。

想象一下,只需要三行代码即可为自己的网站带来视频会议功能——这是多么令人振奋的目标。不是做梦,现在我们已经可以通过WebRTC实现这一点。不过由于尚处于早期发展阶段,WebRTC仍然存在几个尚未解决的问题。首先就是其中的一项安全漏洞有可能影响到某些VPN。另外就是,WebRTC实际上是一套点到点系统——其调用不一定需要经由中央服务器。虽然这样的设计能够有效降低数据中心的实际负荷,但却有可能给全局网络流量带来难以控制的影响。这要么会带来大量小型数据流,要么会让未考虑到此类状况的网络规划模型面临沉重的传输负担。

但这个问题几乎肯定能够得到解决,因为WebRTC极具现实意义,业界根本不可能忽略其核心价值之上的这一点点瑕疵。将其引入HTML 5代码库,协作与客户支持工作将成为Web开发当中毫不费力即可完成的任务。

古董级语言仍能正常起效

Old Languages Still Work ...... and you'll still need them. From Javascript to Python, there are tools that you'll still need to use for getting into databases, figuring out complex actions and processes, and manipulating devices in the real world. They all still work with HTML5 and you'll be glad they do. Now, you'll want to carefully check the tags around their inclusion because they almost certainly have changed, but you'll be able to make it all work.The same isn't true for a lot of the browser plug-ins and add-ons you've used in the past, especially those that deal with rich media. The odds are good that HTML5 deals with all your media types natively, so you can jettison a lot of the included blocks you've come to know and loathe.(Image: geralt via Pixabay)

.……而且我们也需要这样的结果。从JavaScript到Python,我们仍然需要使用这些工具来接入数据库、完成复杂的操作与处理流程、并对现实世界中的设备进行操控。它们也依旧能与HTML 5顺畅协作,从而继续为广大开发人员及普通用户效力。现在,我们需要对与这些语言相关的标签进行认真核对——因为大部分标签都在HTML 5当中经过了修改。但归根结底,它们仍然有效。

不过大部分浏览器插件以及我们过去已经习惯的外部工具就没那么好运了,特别是那些负责处理富媒体对象的方案。好消息是,HTML 5如今单靠自身就能实现全部媒体类型的原生处理,因此大家也将因此节约下可观的时间与精力。

设备平台差异仍然不容忽视

HTML5 Web开发 HTML5教程

如果能够宣布HTML 5已然解决了由不同屏幕尺寸以及功能差异所带来的各类问题,我们当然会为之振奋——但遗憾的是,实际情况并非如此。虽然我们已经能够以前所未有的方式在不同设备之间顺畅往来,但开发人员仍然无法保证自己在台式机屏幕上设计出的页面成果同样能在智能手机上拥有良好表现。不同浏览器与设备平台之间存在着巨大差异,特别是在HTML 5兼容水平方面。页面将依旧需要查询浏览器及设备类型,而后再载入对应的方案及版本。对不起,现实就是这么残酷……

HTML5全面针对移动设备

HTML5 Is All About MobileWith everything said about the fact that you still have to care about which device is used to view a page, HTML5 is a language that acknowledges the fact that the world is moving to mobile. With HTML5, you don't treat mobile devices as strange second-class citizens -- you write dynamic code that assumes that some sort of mobile screen is where your page will display.The good news is that everything you build into the page, from video to animation, to dynamically sized elements, should display well, even if there are occasional oddities in how sizes display on some devices.The takeaway? Don't discard your fleet of test devices just yet, but don't assume that your big 27-inch monitor is representative of how everyone will be viewing your page. As Steve Martin famously said, 'Let's get small.'(Image: YS-Park via Pixabay)

前面刚刚提到,我们仍然需要认真思考用户在查看页面时实际使用的设备类型。而作为老牌语言家族的新成员,HTML 5当然也很清楚如今世界正逐步向移动平台倾斜。有了HTML 5,大家用不着再将移动设备当成是被全面阉割过的二等公民——我们完全可以编写动态代码,并使其在相当一部分移动设备的屏幕之上得到正常显示。

好消息是,我们向页面当中添加的全部要素,从视频到动画再到动态尺寸元素,在理论上都能够得到良好显示——即使某些设备上的显示尺寸偶尔有些奇怪。

那么最终结论是什么?别忙着抛弃自己的设备测试流程,也别想当然地认为每个人都会像咱们自己一样,在27寸显示器上查看Web页面。正如Steve Martin的经典语录,“让我们从小处着手。”

HTML5相当复杂,但这是件好事

HTML5 Is Complicated And That's GoodCompared to HTML4, or even Flash, HTML5 can be complicated and seem non-intuitive. That's good, because it means HTML5 has the power and functions to be the sort of page-description language your organization needs for complex, powerful browser-based applications. That's really the right way to think about it -- as an application language rather than merely a page-description language.There are hundreds of facilities available online to help you learn HTML5, and plenty of professional education organizations ready to help. Start now -- HTML5 defines the future of the Web as thoroughly as it defines the pages of your site.Are you already using HTML5? Have you begun to learn the language? We'd love to hear about your experiences. Tell us what you think, and share thoughts on its strengths and weaknesses, in the comments section below.(Image: geralt via Pixabay)

相较于HTML 4甚至是Flash,HTML 5都显得有些复杂甚至不易亲近。但这是件好事,因为这意味着HTML 5拥有充足的力量与功能,足以成为企业客户在构建基于浏览器的复杂而强大的应用程序时所需依靠的页面描述语言。这才是看待HTML 5的正确方式——它更像是一种应用程序语言,而非单纯的页面描述语言。

目前网络上有成百上千个相关站点,能够帮助大家学习HTML 5的对应知识,另有大量专业培训机构也为我们准备了理想的教程方案。从现在开始,HTML 5开始定义Web的未来发展方向,正如HTML当初定义网站页面之时一样。

大家是否已经准备好迎接HTML 5的降临了?您是否已经开始学习这一新型语言?希望各位能在评论栏中谈谈自己的情况。您的所见所想,包括您对于HTML 5的评价——无论好坏——都将极具参考价值。