鲨鱼网
HTML 5的革新：结构之美
创始人
2024-07-25 14:01:16
0次

HTML 5如同一场革命，正在Web2.0后时代轰轰烈烈的进行着。

51CTO推荐专题：HTML 5 下一代Web开发标准详解

HTML 5是什么，无须我在这里赘述了。对于HTML 5的革新，按我的理解，可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的API支持。总之，HTML 5让人机交互，人网交互变得更加舒适，贴合用户。以往对富媒体应用与本存储的支持乏力也不再是浏览器的切肤之痛。将Web从内容平台推向标准化的应用平台，并一统各在平台阵营的标准，才是HTML 5革命的初衷。

本文，我就抛砖引玉，阐述HTML 5的革新之一：语义更明确简洁的结构。

从”头”说起

一个标准的XHTML头部代码应该是这样：

  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
  3.  
  4.  
  5.  
  6.  

你能记住吗?你会去死记硬背吗?当然不会!我们只需要机械的复制粘贴即可。

再看看一个标准的HTML 5头部是如何的：

  1.  
  2.  

孰繁孰简，就不用我说了。是的，HTML 5的头部可以如此简单，可以轻易的记住!并且，可以忽略大小写，引号以及最后一个尖括号前的反斜线。

为什么可以如此松散?其实，如果把XHTML当成text/html发送，浏览器一样可以很好的解析，浏览器并不在乎代码的语法。所以，HTML 5是形而上的，它可能会破坏原有的一些标准，但仍可在浏览器中很好的表现。

当然，为了团队协助与后续维护的方便，我们还是应该统一一种你喜欢的风格的写法，比如：

  1.  
  2.  
  3.  
  4.  
  5. …  
  6.  
  7.  
  8. …  
  9.  
  10.  

另外，HTML 5虽然目前并不为所有浏览器所支持，但这个能省去100多字节(对于日PV百万级以上的站点，能省下不少的流量哦)的头部已可以完美的兼容了。如果你对浏览器解析模式有研究的话，你应该知道，页面在没有定义doctype的情况下会触发怪异模式，而只要定义了浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD。

新的语义化标签体系

语义化编码是一个合格前端Developer必备的技能，但随着网页的日渐丰富化，仅仅用原有的xhtml标签去语义化显然已经力不从心。上帝说：”要有光!”便有了光。于是，HTML 5提供了一系列新的标签及相应属性，以反应现代网站典型语义。实践出真理。还是写一个例子吧：

  1.  
  2.  
  3. 网站标题
     
  4. 网站副标题
     
 
  •  
    •  
    • HTML 5
      •  
    • CSS
      •  
    • JavaScript
      •  
     
  •  
  •  
  •  
  •  
  •  

  • 这是一篇讲述HTML 5新结构标签的文章。

     
  •  
  •  

  • 这还是一篇讲述HTML 5新结构标签的文章。

     
  •  
  •  
  •  
  •  

  • 作者简介

     

  • Mr.Think，专注Web前端技术的凡夫俗子。

     
  •  
  •  
  •  
  • 页面的底部  
  •  
  •  

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

    1.  
    2.  
    3. 网站标题
       
    4. 网站副标题
       
    5.  
      7.  
      • HTML 5
        •  
      • CSS
        •  
      • JavaScript
        •  
       
    8.  
    9.  
    10.  
    11.  
    12. 这是一篇讲述HTML 5新结构标签的文章。
       
    13.  
    14.  
    15. 这还是一篇讲述HTML 5新结构标签的文章。
       
    16.  
     

  • 作者简介

     

  • Mr.Think，专注Web前端技术的凡夫俗子。

     
  •  
  •  
  • 网页底部  
  •  

    • 原来，HTML的页面结构可以如此之美，不用注释也能一目了然。对于浏览器，找到对应的区块也不再会茫然无措。

    #p#

    如何用HTML 5新标签结构化元素

    通过上面的示例，我们了解到HTML 5的新标签对结构化的革新，但切换到实际使用中，该如何恰当的使用它们呢?我想这也是很多HTML 5学习者想问一个问题。如同XHTML语义化一样，HTML 5语义化标签的使用也应该遵循：每个标签都有它特定的意义，而语义化，就是让我们在适当的位置用适当的标签，以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。比如header标签一般是页面的第一个区块元素(header标签也可用于类型的头部元素中，比如文章区块的标题)，包含的了页面的主题信息;nav标签一般用于包裹导航信息;footer一般用来包裹页面底部信息;等等。

    下面是我参考HTML 5手册列出的结构类常用新标签的语义解释及使用指引：

    标签

    手册释义：定义 section 或 document 的页眉。

    使用指引：一般用来包含页面头部，也可用于其他区域头部，比如article头部：

    1.  
    2.  
    3. 网站标题
       
    4. 网站副标题
       
    5.  
     

    标签

    手册释义：用于对网页或区段(section)的标题进行组合。

    使用指引：用于标题类的组合，比如文章的标题与副标题：

    1.  
    2. 这是一篇介绍HTML 5结构标签的文章
       
    3. HTML 5的革新
       
     

     

     

    标签

    手册释义：定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。

    使用指引：用于成节的内容，会在文档流中开始一个新的节：

    1.  
    2. section是什么？
       
    3. 一个新的章节
       
    4.  
    5. 关于section
       
    6. section的介绍
       
    7. …  
    8.  
     

    标签

    手册释义：定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

    使用指引：一般用来包裹整个页面通用底部，也可用于其他区域底部，比如article底部：

    1.  
    2. COPYRIGHT@ieFans.Net  
     

    标签

    手册释义：定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文

    本。亦或是来自其他外部源内容。

    使用指引：顾名思义，一般用于文章区块：

    1.  
    2.  
    3.  
    4. 这是一篇介绍HTML 5结构标签的文章
       
    5. HTML 5的革新
       
    6.  
    7. 2011.03.20 
    8.  
    9. 文章内容详情
       
     

    标签

    手册释义：用于对元素进行组合。

    使用指引：多用于图片与图片描述组合：

    1.  
    2.  
    3. 这儿是图片的描述信息
       
     

    标签

    手册释义：定义菜单列表。当希望列出表单控件时使用该标签。

    使用指引：使用于菜单类区块，用来定义菜单列表或菜单选项:

    1.  
    3. HTML 5
      4.  
    5. CSS
      6.  
    7. JavaScript
      8.  
     

    HTML 5的其他新标签，就不此一一解释了，请自行查询一下手册。

    其实，这些东西，如同XHTML的div、h1、inpu等标签一样，只要平时多加实践，运用自如也是轻而易举的。

    关于兼容性

    如果你是一个喜欢研究关注前端的人，你应该知道淘宝的页面结构中已大量用到了HTML 5新标签。所以，我想说的是只要敢于尝试，兼容性不是问题，兼容的方法，网上有很多(本文是讲结构的，哈~)。

    后话

    任何一门新技术，都需要一个适应的过程。如果你准备好了做一名优秀的Web前端开发人员，那你就得不断的尝试并接受最新的前端技术。

    孙文曾说，欲经文明这幸福，不得不经文明之痛苦。人类的革命如此，HTML 5的革命亦是如此。IE的日渐没落，让各大浏览器厂商以一次进入了战国时代，群雄逐鹿。而对于开发者，我们只奢求各大浏览器厂商尽可能的遵循同一个标准，而不是群雄逐鹿后的四分五裂。因为，高效完美的呈现给各类用户同样的应用才是我们的终极目标。

    如此，本文从页面的doctype说起，到用HTML 5新标签搭建语义化更明确的页面的结构，再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知，如果你有兴趣，那就打开你的IDE，写上一段由HTML 5新标签搭建的代码，然后用CSS去描绘你的宏伟蓝图吧!
     

    原文链接：http://www.iefans.net/html5-jiegou-zhimei/

    【编辑推荐】

    1. 九个令人惊叹的HTML 5和JavaScript实验
    2. HTML 5标准学习入门之文档结构
    3. HTML 5标准学习入门之DOCTYPE
    4. 学习HTML 5十佳站点推荐
    5. 10个超棒的HTML 5素描及绘画设计工具

    上一篇：Camera 销量突破200万 创始人分享成功经验

    下一篇：解析C 和C的区别

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说，“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...