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优化杂烩

    讲 PHP 优化的文章往往都是教大家如何编写高效的代码,本文打算从另一个角度来讨论问题,教大家如何配置高效的环境,如此同样能够达到优化的目的. pool 一个让人沮丧的消息是绝大多数 PHP 程序员都 ...

  2. maven小项目注册服务(三)--web模块

    java的web应用打包方式一般为war它和jar的区别就是包含了更多的资源和文件,如JSP文件,静态资源文件,servlet等等.war包的核心就WEB-INF文件夹下必须有一个web.xml 的配 ...

  3. 撤销 git reset --hard HEAD~1

    方法一: 1.先通过git reflog找到上一次的历史提交记录id,git如果没有特意设置,是会保存记录一段时间的(a few days or a month) 2.git reset --hard ...

  4. php扩展函数调用扩展中的标准函数

    这几天在写php的扩展函数,在网上学习步骤什么的都有,一般问题也都能查到,所以就不再此啰嗦,写这篇博客的原因是因为遇到的一个问题,百度谷歌都没找到,对于初学者,这个或许有用,对于过来人,我想他们肯定也 ...

  5. [HIHO1184]连通性二·边的双连通分量（双连通分量）

    题目链接:http://hihocoder.com/problemset/problem/1184 题意裸,写个博客记下输出姿势. /* ━━━━━┒ギリギリ♂ eye! ┓┏┓┏┓┃キリキリ♂ mi ...

  6. Oracle数据泵导入导出数据，建立表空

    Oracle11g 数据导入到oracle10g 中:1.在oracle11g 服务器命令行中用expdp 导出数据expdp ts/ts@orcl directory=expdp_dir dumpf ...

  7. 2014年百度之星程序设计大赛 - 资格赛 1004 Labyrinth（Dp）

    题目链接 题目: Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. bzoj2878

    又是环套树dp,这次不是我擅长的类型 首先考虑树上的暴力,肯定是穷举起点然后以起点为根dp 我们用g[i]表示以点i为期望走的路径总长,答案就是1/n*Σ(g[i]/d[i]) (d[i]表示点度数) ...

  9. java 错误:找不到或无法加载主类的解决办法

    此类错误的常见解决办法: 1.是因为.java文件不在项目的src路径内,也就是说源代码未被eclipse编译,字节码不存在无法运行了在项目名上右键 -> Builder Path -> ...

  10. crtmpserver流媒体服务器的介绍与搭建

    crtmpserver流媒体服务器的介绍与搭建 (2012-02-29 11:28) 标签:  crtmpserver  C++ RTMP Server  rtmp  Adobe FMS(Flash ...