新的语义化标签体系
语义化编码是一个合格前端Developer必备的技能,但随着网页的日渐丰富化,仅仅用原有的xhtml标签去语义化显然已经力不从心。上帝说:”要有光!”便有了光。于是,HTML 5提供了一系列新的标签及相应属性,以反应现代网站典型语义。实践出真理。还是写一个例子吧:
<div id=”header”> <div class=”hgroup”> <h1>网站标题</h1> <h1>网站副标题</h1> </div> <div id=”nav”> <ul> <li>HTML 5</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> </div> <!–//header end–> <div id=”left”> <div class=”article”> <p>这是一篇讲述HTML 5新结构标签的文章。</p> </div> <div class=”article”> <p>这还是一篇讲述HTML 5新结构标签的文章。</p> </div> </div> <!–//left end–> <div id=”aside”> <h1>作者简介</h1> <p>Mr.Think,专注Web前端技术的凡夫俗子。</p> </div> <!–//side end–> <div id=”footer”> 页面的底部 </div> <!–//footer end–>
上面是一个简单的博客页面部分HTML,由头部、文章展示区、右侧栏、底部组成。编码整洁,也符合XHTML的语义化,即便是在HTML 5中也可以很好的表现。但是对浏览器来说,这就是一段没有区分开权重的代码,而不是一个让机器也能读懂语义的标签来定义相应的区块。比如,标准浏览器(比如Firefox、Chrome甚至新版的IE9)都有一个快捷键可以带引客户直接跳转到页面的导航,但问题是所有的区块都是用DIV定义,并且DIV的ID值是同开发者定的,所以,浏览器并不知道哪个应该是导航链接所在区块。HTML 5新标签的出现,正好弥补了这一缺憾。那么,上面的代码,换成HTML 5就可以这样写:
<header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> <nav> <ul> <li>HTML 5</li> <li>CSS</li> <li>JavaScript</li> </ul> </nav> </header> <div id=”left”> <article> <p>这是一篇讲述HTML 5新结构标签的文章。</p> </article> <article> <p>这还是一篇讲述HTML 5新结构标签的文章。</p> </article> </div> <aside> <h1>作者简介</h1> <p>Mr.Think,专注Web前端技术的凡夫俗子。</p> </aside> <footer> 网页底部 </footer>
原来,HTML的页面结构可以如此之美,不用注释也能一目了然。对于浏览器,找到对应的区块也不再会茫然无措。
出处:Mr.Think
责任编辑:bluehearts
上一页 HTML5的革新:结构之美 [1] 下一页 HTML5的革新:结构之美 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|