HTML 5是什么，无须我在这里赘述了。对于HTML 5的革新，按我的理解，可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的API支持。总之，HTML 5让人机交互，人网交互变得更加舒适，贴合用户。以往对富媒体应用与本存储的支持乏力也不再是浏览器的切肤之痛。将Web从内容平台推向标准化的应用平台，并一统各在平台阵营的标准，才是HTML 5革命的初衷。
本文，我就抛砖引玉，阐述HTML 5的革新之一：语义更明确简洁的结构。
    从”头”说起
一个标准的XHTML头部代码应该是这样：

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> </head>

复制代码

你能记住吗?你会去死记硬背吗?当然不会!我们只需要机械的复制粘贴即可。
    再看看一个标准的HTML 5头部是如何的：

  1. <!doctype html> <meta charset=gb2312>

复制代码

孰繁孰简，就不用我说了。是的，HTML 5的头部可以如此简单，可以轻易的记住!并且，可以忽略大小写，引号以及最后一个尖括号前的反斜线。
    为什么可以如此松散?其实，如果把XHTML当成text/html发送，浏览器一样可以很好的解析，浏览器并不在乎代码的语法。所以，HTML 5是形而上的，它可能会破坏原有的一些标准，但仍可在浏览器中很好的表现。
当然，为了团队协助与后续维护的方便，我们还是应该统一一种你喜欢的风格的写法，比如：

  1. <!doctype html>
  2. <html> <head>
  3. <meta charset=”gb2312″ /> …
  4. </head> <body> …
  5. </body> </html>

复制代码

另外，HTML 5虽然目前并不为所有浏览器所支持，但这个能省去100多字节(对于日PV百万级以上的站点，能省下不少的流量哦)的头部已可以完美的兼容了。如果你对浏览器解析模式有研究的话，你应该知道，页面在没有定义doctype的情况下会触发怪异模式，而只要定义了浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD。
    新的语义化标签体系
语义化编码是一个合格前端Developer必备的技能，但随着网页的日渐丰富化，仅仅用原有的xhtml标签去语义化显然已经力不从心。上帝说：”要有光!”便有了光。于是，HTML 5提供了一系列新的标签及相应属性，以反应现代网站典型语义。实践出真理。还是写一个例子吧：

  1. <div id=”header”>
  2. <div class=”hgroup”>
  3. <h1>网站标题</h1>
  4. <h1>网站副标题</h1>
  5. </div>
  6. <div id=”nav”>
  7. <ul>
  8. <li>HTML 5</li>
  9. <li>CSS</li>
  10. <li>JavaScript</li>
  11. </ul>
  12. </div>
  13. </div>
  14. <!–//header end–>
  15. <div id=”left”>
  16. <div class=”article”>
  17. <p>这是一篇讲述HTML 5新结构标签的文章。</p>
  18. </div>
  19. <div class=”article”>
  20. <p>这还是一篇讲述HTML 5新结构标签的文章。</p>
  21. </div>
  22. </div>
  23. <!–//left end–>
  24. <div id=”aside”> <h1>作者简介</h1> <p>Mr.Think，专注Web前端技术的凡夫俗子。</p></div>
  25. <!–//side end–> <div id=”footer”> 页面的底部 </div>
  26. <!–//footer end–>

复制代码

上面是一个简单的博客页面部分HTML，由头部、文章展示区、右侧栏、底部组成。编码整洁，也符合XHTML的语义化，即便是在HTML 5中也可以很好的表现。但是对浏览器来说，这就是一段没有区分开权重的代码，而不是一个让机器也能读懂语义的标签来定义相应的区块。比如，标准浏览器(比如Firefox、Chrome甚至新版的IE9)都有一个快捷键可以带引客户直接跳转到页面的导航，但问题是所有的区块都是用DIV定义，并且DIV的ID值是同开发者定的，所以，浏览器并不知道哪个应该是导航链接所在区块。HTML 5新标签的出现，正好弥补了这一缺憾。那么，上面的代码，换成HTML 5就可以这样写：

  1. <header>
  2. <hgroup>
  3. <h1>网站标题</h1>
  4. <h1>网站副标题</h1>
  5. </hgroup>
  6. <nav> <ul>
  7. <li>HTML 5</li>
  8. <li>CSS</li>
  9. <li>JavaScript</li>
  10. </ul> </nav>
  11. </header>
  12. <div id=”left”>
  13. <article> <p>这是一篇讲述HTML 5新结构标签的文章。</p> </article>
  14. <article> <p>这还是一篇讲述HTML 5新结构标签的文章。</p> </article>
  15. </div>
  16. <aside> <h1>作者简介</h1> <p>Mr.Think，专注Web前端技术的凡夫俗子。</p> </aside>
  17. <footer> 网页底部 </footer>

复制代码

原来，HTML的页面结构可以如此之美，不用注释也能一目了然。对于浏览器，找到对应的区块也不再会茫然无措。

HTML 5的革新：结构之美的更多相关文章

  1. 结构之美——优先队列基本结构（四）——二叉堆、d堆、左式堆、斜堆

    实现优先队列结构主要是通过堆完成,主要有:二叉堆.d堆.左式堆.斜堆.二项堆.斐波那契堆.pairing 堆等. 1. 二叉堆 1.1. 定义 完全二叉树,根最小. 存储时使用层序. 1.2. 操作 ...

  2. Java的结构之美【2】——销毁对象

    先来看一段代码: import java.util.Arrays; import java.util.EmptyStackException; /** * 2014年6月28日09:31:59 * @ ...

  3. Java的结构之美【1】——构造对象

    当我们遇到多个构造器參数的时候可能会想到用构件器,代码例如以下: /** * 构建器 * @author 阳光小强 * */ public class Lunch { private String c ...

  4. js实现简单的滑动门和tab选项卡

    思想:首先定义三个选项卡,可以用任何标签,只要如下图, 一共有三个ul,第一个ul给一个class,因为默认第一个选项卡的内容显示出来, 其他两个ul  display:none: 当我鼠标移到第二个 ...

  5. 高级智能研究计划（IARPA）：大脑皮层建模

    哈哈,看到了一篇我最感兴趣的领域的新闻报导,可以深挖里面的各种细节. Quanta Magazine: Illuminating Science - 原文出处 卡内基·梅隆大学 - Tai Sing ...

  6. 字典树(Trie树)的实现及应用

    >>字典树的概念 Trie树,又称字典树,单词查找树或者前缀树,是一种用于快速检索的多叉树结构,如英文字母的字典树是一个26叉树,数字的字典树是一个10叉树.与二叉查找树不同,Trie树的 ...

  7. 2012高校GIS论坛

    江苏省会议中心 南京·钟山宾馆(2012年4月21-22日) 以"突破与提升"为主题的"2012高校GIS论坛"将于4月在南京举行,由南京大学和工程中心共同承办 ...

  8. 采访 Lua 发明人的一篇文章

    采访 Lua 发明人的一篇文章 来源 https://blog.codingnow.com/2010/06/masterminds_of_programming_7_lua.html <Mast ...

  9. 【转载】 DeepMind用ReinforcementLearning玩游戏

    原文地址: https://blog.csdn.net/wishchin/article/details/42425145 原文 :  http://dataunion.org/?p=639 1.引言 ...

随机推荐

  1. [Codeforces673A]Bear and Game（水题，思路）

    题目链接:http://codeforces.com/contest/673/problem/A 题意:一个人看一个90分钟的节目,然后告诉你一些有趣的时刻.这个人假如在15分钟内还没有看到有趣的时刻 ...

  2. hdu4576 概率dp n^2的矩阵

    这个题目看网上好多题解都是直接O(n*m)卡过.我是这么做的. 对于m次操作,统计每个w的次数.然后对每个w做矩阵乘法. 这样直接做矩阵乘法是会TLE的. 又由于这里的矩阵很特殊,一次乘法可以降维成O ...

  3. bzoj4025

    首先我们要知道,怎么去维护一个是否是二分图 二分图的充要条件:点数>=2且无奇环 重点就是不存在奇环,怎么做呢 考虑随便维护一个图的生成树,不难发现,如果一条边加入后,形成奇环的话就不是二分图 ...

  4. UVa 1475 (二分+半平面交) Jungle Outpost

    题意: 有n个瞭望塔构成一个凸n边形,敌人会炸毁一些瞭望台,剩下的瞭望台构成新的凸包.在凸多边形内部选择一个点作为总部,使得敌人需要炸毁的瞭望塔最多才能使总部暴露出来.输出敌人需要炸毁的数目. 分析: ...

  5. [转]SQL、LINQ、Lambda

    原文链接:http://www.cnblogs.com/mr-hero/p/3532631.html SQL   LinqToSql   Lambda 1. 查询Student表中的所有记录的Snam ...

  6. error while loading shared libraries: libevent-2.0.so.5解决办法

    安装memcache时,需要建立文件索引或者说文件连接(link),类似windows下的快捷方式 启动服务时出现 error while loading shared libraries: libe ...

  7. HDU 2063 过山车 （最大匹配，匈牙利算法）

    题意:中文题目 思路:匈牙利算法解决二分图最大匹配问题. #include <bits/stdc++.h> using namespace std; ; int mapp[N][N]; / ...

  8. git - 搭建git仓库

    1. 更新git版本: http://codelife.me/blog/2013/06/25/upgrade-git-on-centos-6-4/ 2. 建立git仓库: git init --bar ...

  9. vim变ide

    如果你稍微写过一点代码,就能知道“集成开发环境”(IDE)是多么的便利.不管是Java.C还是Python,当IDE会帮你检查语法.后台编译,或者自动导入你需要的库时,写代码就变得容易许多.另外,如果 ...

  10. [转]Android调用so文件（C代码库）方法详解

    一.为什么调用c的dll要用源码编译成so库 Android系统是基于linux内核的移动终端系统,而dll是在windows环境下生成和调用的c库,所以不可以直接为android系统调用. 二.安装 ...