首页风格
门户
博客

HTML5介绍 - HTML5的特长,特性及其相关资源

日期:2013-3-29  来源:GBin1.com

HTML5介绍 - HTML5的特长,特性及其相关资源

什么是HTML5?

HTML5 是万维网联盟(W3C)推出的最新的超文本标记语言。第一稿出版于2008年,但是直到2011年才真正的发展起来。在2011年的时候,HTML5开始发布,人们逐渐开始使用它,但是相关的浏览器对它的支持仍很贫乏。直到今日,几乎所有主流浏览器(Chrome,Safari,Firefox,Opera,IE)都提供了对 HTML5的支持,现在才是HTML5真正发挥它特性的时候。

HTML5和CSS3目前仍在开发中。W3C计划明年发布一个稳定版本,但是看起来这仍是一个胆大的冒险。从HTML5发布至今,它一直在持续发展中,W3C添加了越来越多令人印象深刻的特性,因此看起来HTML5的开发远远不会结束,当然这并不是一件坏事。

HTML5是1999年首次发布的HTML4.01的继任者。从1999年开发网络开发有了翻天覆地的变化,HTML5的出现是必然的。新出的标记语言建立在预留标准上:

  • 新特性基于HTML,CSS,DOM和JavaScript
  • 对外部的插件(如Flash)的需求需要减少
  • 错误处理要比过去的版本更加简单
  • 脚本被更多的标记所替代
  • HTML5特性必须与设备无关
  • 开发过程必须对大众是可视的

HTML5的新特性?

HTML5 的创建是为了使编码过程更加简单并具有逻辑性。再过不久,你会看到许多已过时的语法会很快被提出后门。伴随HTML5而来的是在多媒体方面的,独特而又令 人印象深刻的特性。考虑到让用户可以在低功率的设备上运行繁重的内容,许多特性伴随HTML5衍生而来。语法特色上包 括<video>,<audio>和<canvas>元素,而且还集成了矢量图形内容(例如我们之前就知道的<object>标签)。这意味着网络上的多媒体和图形内容可以被更快捷的执行,不需要插件或者API。

这里有一组新添加的语法,但是以下我列出了较为重要的一部分。其余的可以在W3C的HTML5部分找到。

  • <article> - 这个标签定义了文章,用户留言或是帖子,作为内容的独立项目。
  • <aside> - aside标签标记了除了页面内容的内容,例如一个横向的侧边栏。
  • <header>,<footer> - 你不再需要手动为页首与页尾命名ID,现在你有为他们而生的预定义标签。
  • <nav> - nav标签用于标记导航,可以自动使你的列表像个导航。
  • <section> - 这是另一个重要的新语法,它在可以你的文档里定义任何类型的段落。它像div一样划分了不同的段落。
  • <audio>,<video> - 这两个标签明显标记了语音和视频内容,使音频与视频更容易得在设备上运行。
  • <embed> - 这个新标签为交互内容(如插件)或外部应用定义了一个容器。
  • <canvas> - canvas标签叫人尤为兴奋,它允许通过脚本实现画图(大多是JavaScript,当然其他的脚本语言也可以)。

阅读相关教程:

HTML5基本标签使用header,nav和footer

HTML5中的Article和Section元素

需要记住的重要的一点是,新的HTML5标签和以前的标签不太一样。例如,<header>和<footer>标签不仅仅是用于标 记页面的开始和截止,还用于标示每一个段落的开始和结束。这意味着这两个标签比以前应用的更多。你可以通过下面的代码明白我所说的。

<!DOCTYPE html><!--The new DOCTYPE declaration, such easier than before-->
<head> <!--Like before, this is where the style declaration goes-->
</head>
<body>
<header> <!--This marks the header of the page and includes the navigation-->
<nav>
</nav>
</header>
<section> <!--This starts the content section -->
<header>
<!--This time the header tag marks the beginning of the content section -->
</header>
<article>
</article>
<footer>
<!--As with the header tag, this time the footer marks the end of the content section -->
</footer>
</section> <!--This ends the content section -->
<aside>
<!--Here comes the sidebar content -->
</aside>
<footer>
<!--The footer, which marks the end of the page, is here -->
</footer>
</body>
</html>

是的,DOCTYPE声明有一定道理。或者至少,这一次它比以前要简单的多,它很容易让我记住,我们不需要在网络上搜索它,并且从一个站点复制到另一个站点。<!DOCTYPE html>起始,以</html>结束一个页面让我们等了很长一段时间,现在它终于出现在了这里。

另外,我们以往常用的复杂的XHTML声明现在被<html lang="en">取代,冗长的编码声明可以写成:<meta charset="utf-8">。它还可以再怎么简单?当然它不能再简单了。

以下标签是HTML4.01中的,现在已经从HMTL5中移除了,因此浏览器不在提供任何对他们的支持。这意味着在你的HTML页面中,你需要做一下检查,这些标签在最新的浏览器中可能使你的设计出现瑕疵。

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <nofremse>
  • <strike>
  • <tt>

关于HTML5你需要知道的

需要记住的一点是HTML5是在以前的版本HTML4.01的成功上建立起来的,这无疑是最好的版本。为了更好的应用HTML5,你不需要忘记先前的版本。你并不是从头学习一门新语言。继续你喜欢的语法和格式你的代码,只需要记住现在你可以在你已有的编码技巧上继往开来。

如果你不懂HTML,现在从头开始,我建议你从HTML4.01开始,当你掌握了它在移到HTML5。从最新的版本开始就好像是没学会走,先学了跑 - 据我所知这是不可能实现的。HTML4.01包含了HTML5的基本,因此我建议你在掌握HTML5之前要先掌握正规的HTML。

现在学 习HTML的优势是新的标记语言可以立刻生效。今天你可以用它做任何你想做的 - 并且所有主流浏览器都支持它。从视频到地理定位,本地存储和微数据注释,HTML5是我们需要开始使用的。如果你从事设计,坚持使用HTML4.01就是个错误,因为所有人都开始前进,而你滞留原地注定落后。

HTML5必定在此。维持今时的必需品,特别是因为它仍在不断开发中,它将持续改变,并且这种改变在行业内会持续一段时间。这么多的时间来开发HTML5背后的原因之一是因为W3C对很多因素进行了分析并且考虑了未来。他们花费了时间,最终提交了高质量的产品出来。

实例

为了向你展示HTML5发展到了什么地步,我会展示一些由新的标记语言开发的网站,因此你可以看看你用HTML5可以做些什么。

Read是WordPress的一个HTML5相应主题。它很简单,易于了解和使用,比任何都加载迅速并且并不昂贵。

SmartStart是另一个令人难以置信的简单使用HTML5模板的网站。


BIZfolio也是用HTML5开发的,但是它并不是一个简单模样,或者WorkPress主题。BIZfolio可以与Drupal一起使用

通过HTML5开发的应用,简单的Pocker Blind Timer


Coolendar是一个用HTML5开发的,非常出彩的日历应用,它可以同时应用在电脑和便携式设备上(Android和iOS)

Scribd是一个用HTML5开发的,它允许用户迅捷的访问其他用户上传的不同的文件和文档。

除了网站和应用,开发基于HMTL5还可以开发游戏,代替以前的Flash。这里有一些令人上瘾的HTML5游戏。来看看,这里有些游戏真的很有意思。

如何开始HTML5?

HTML5 不可能通过一个简单介绍就可以学会。在我看来有两条路可以学它。找一本好的HTML5的的书,或者是走出去真正实践一下。我推荐这两种方法。我从网上学习 HTML和CSS,但是有一些有价值的信息需要你从书上学来,有一些需要你从实践中学到。如果你对HTML4.01有个坚实的基础,那么你从书上学会必要的HTML5技能,不会超过一到两个星期。然后整个世界都是你的,你可以走出去并且开始实践一下。

我搜集了一些很好的书和教程,对你会有帮助。以下所列将是你的开始:

相关书籍

相关教程

HTML5入门教程

Semantics of HTML5

37个绝对不容错过的HTML5教程和资源

高效HTML5代码开发最佳实践

via Nelly@极客标签

来源:HTML5介绍 - HTML5的特长,特性及其相关资源

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐