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. i386 和amd64 的意思

    首先可以简化一个概念,i386=Intel 80386.其实i386通常被用来作为对Intel(英特尔)32位微处理器的统称. Windows NT类系统的安装盘上,通常i386是其根上的一个文件夹, ...

  2. C#中控件的CheckState和Checked属性区别？

    Checked 和CheckState都是检查控件选中状态,都能判断是否选中控件. 只是Checked 通过布尔判断(true & false): CheckState 通过枚举判断. che ...

  3. github的large file storeage

    https://git-lfs.github.com/ 1.从这个网址下载git-lfs-windows-amd64-1.1.0.exe,运行这个安装包 2.然后打开git bash 输入git lf ...

  4. codeforces 235 div2 C　Team

    题目:http://codeforces.com/contest/401/problem/C 题意:n个0,m个1,求没有00或111的情况. 这么简单的题..... 做题的时候脑残了...,今天,贴 ...

  5. 禁止ie缓存

    nocache.jsp:(后台配置)<%response.setHeader("Cache-Control","no-cache"); //HTTP 1. ...

  6. hMailserver设置外部反病毒扫描程序

    刚在5dmail上发现有人提出一个问题,他在hmailserver的外部病毒扫描程序中使用了瑞星那个娱乐货,结果呢,说瑞星太勇猛了,所有附件都认为病毒了,这是怎么个情况呢? 先从hmailadmin里 ...

  7. 64位SqlServer通过链接服务器与32位oracle通讯

    在SQL SERVER里只安装了32位的oracle客户端的情况下,添加链接服务器然后执行查询会报如下信息: 原因:在64位的SQL Engine中已经不提供MSDAORA  的驱动了,可以使用Ora ...

  8. operator.itemgetter的用法【转】

    operator.itemgetter函数 operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),下面看例子. a = [,, ...

  9. TS数据结构分析

    1.TS包得数据结构 2. // Transport packet headertypedef struct TS_packet_header{    unsigned sync_byte       ...

  10. 关于web中的自适应布局

    一.”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)--这个名词,指可以自动识别屏幕宽度.并做出相应调整的网页设 ...