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. kafka的环境搭建

    kafka是一个高吞吐量的消息系统.隔离消息接收和处理过程(可理解为一个缓存) 1.kafka伪分布的部署 1.1.下载并解压 1.2.启动zk bin/zookeeper-server-start. ...

  2. （转）博弈问题与SG函数

    博弈问题若你想仔细学习博弈论,我强烈推荐加利福尼亚大学的Thomas S. Ferguson教授精心撰写并免费提供的这份教材,它使我受益太多.(如果你的英文水平不足以阅读它,我只能说,恐怕你还没到需要 ...

  3. 函数buf_pool_get

    根据space ,offset 获取 buff pool的实例 下标 /**************************************************************** ...

  4. uva1637Double Patience

    状态压缩,记忆化搜索. 用一个5进制数来表示每堆排到了哪一个位置.和2进制是一样的,不过不能用位运算. #include<cstdio> #include<algorithm> ...

  5. hdu 4674 Trip Advisor（缩点+倍增lca）

    花了一天半的时间,才把这道题ac= = 确实是道好题,好久没敲这么长的code了,尤其是最后的判定,各种销魂啊~ 题目中给出的条件最值得关注的就是:每个点最多只能在一个环内->原图是由一个个边连 ...

  6. [反汇编练习] 160个CrackMe之009

    [反汇编练习] 160个CrackMe之009. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  7. WTL汉化版2013.10.15

    汉化内容: 2013.10.15 版本:当前可下载Trunk最新版,wtl-code-467-trunk.zip 汉化内容: 1.应用向导的部分汉化,考虑到部分词汇的表述问题,只汉化无影响部分 2.资 ...

  8. POJ 2388 Who's in the Middle (快速选择算法：O(N)求数列第K大)

    [题意]求数列中间项. ---这里可以扩展到数列第K项. 第一次做的时候直接排序水过了= =--这一次回头来学O(N)的快速选择算法. 快速选择算法基于快速排序的过程,每个阶段我们选择一个数为基准,并 ...

  9. POJ 3177 Redundant Paths (桥，边双连通分量，有重边)

    题意:给一个无向图,问需要补多少条边才可以让整个图变成[边双连通图],即任意两个点对之间的一条路径全垮掉,这两个点对仍可以通过其他路径而互通. 思路:POJ 3352的升级版,听说这个图会给重边.先看 ...

  10. 02day2

    油滴扩展 [问题描述] 在一个长方形框子里,最多有 N(0≤N≤6)个相异的点.在其中任何-个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能 ...