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. PHP程序员的40点陋习,我几乎全部中枪

    1.不写注释 2.不使用可以提高生产效率的IDE工具 3.不使用版本控制 4.不按照编程规范写代码 5.不使用统一的方法 6.编码前不去思考和计划 7.在执行sql前不执行编码和安全检测 8.不使用测 ...

  2. LingPipe-TextClassification(文本分类)

    What is Text Classification? Text classification typically involves assigning a document to a catego ...

  3. 【POJ】3523 The Morning after Halloween

    1. 题目描述$m \times n$的迷宫(最大为$16 \times 16$)包含最多3个点,这些点可以同时向相邻方向移动或保持停止,使用小写字母表示起始位置,使用大写字母表示中止位置.求最少经过 ...

  4. oracle Instance status: READY–lsnrctl status|start|stop

    监听器启动,并不一定会认识数据库实例,启动监听器,请判别相关实例是否 READY [oracle@redhat4 ~]$ lsnrctl status LSNRCTL for Linux: Versi ...

  5. WEBBROWSER中模拟鼠标点击(SendMessage/PostMessage)

    好久没有写文章,发一篇顶顶博客访问量.别人建议转一些比较好的代码也贴过来,但是我打算这里主要发自己原创的代码,所以么..流量该多少就多少吧... 回到主题,在webbrowser中点击某链接网上几乎都 ...

  6. 418. Sentence Screen Fitting

    首先想到的是直接做,然后TLE. public class Solution { public int wordsTyping(String[] sentence, int rows, int col ...

  7. 函数lock_rec_get_first

    /*********************************************************************//** Gets the first explicit l ...

  8. poj3683 Priest John's Busiest Day

    2-SAT. 读入用了黄学长的快速读入,在此膜拜感谢. 把每对时间当作俩个点.如果有交叉代表相互矛盾. 然后tarjan缩点,这样就能得出当前的2-SAT问题是否有解. 如果有解,跑拓扑排序就能找出一 ...

  9. IOS cocos2d笔记1

    结点添加.删除.获取1.结点:CCNode * childNode = [CCNode node]; 2.加入结点[myNode addChild:childNode z:0 tag:123];//z ...

  10. CentOS SVN服务器安装配置小记

    SVN的安装 安装很简单,尤其对于CentOS这种,直接: # yum install subversion# yum install mod_dav_svn 不同发行版的Package安装方法参见h ...