• HTML 5的革新：结构之美

     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是形而上的，它可能会破坏原有的一些标准，但仍可在浏览器中很好的表现。
    当然，为了团队协助与后续维护的方便，我们还是应该统一一种你喜欢的风格的写法，比如：

    2. <!doctype html> 
    3. <html> <head>
    4. <meta charset=”gb2312″ /> …
    5. </head> <body> … 
    6. </body> </html>
    复制代码

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

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


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

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


    原来，HTML的页面结构可以如此之美，不用注释也能一目了然。对于浏览器，找到对应的区块也不再会茫然无措。
  • 相关阅读:
    Redis源代码分析（十三）--- redis-benchmark性能測试
    kvm中运行kvm
    umount.nfs device busy day virsh extend diskSpace, attachDisk
    ultravnc
    openNebula dubug
    maintenance ShellScripts
    virsh VMI deploy data serial xml
    cloud computing platform,virtual authentication encryption
    基于C 的libvirt 接口调用
    storage theory
  • 原文地址：https://www.cnblogs.com/liweitao/p/3850958.html
Copyright © 2020-2023  润新知