欢迎来到 jackNEss'窝窝
I like simple mind

HTML5 在实际项目中的应用:使标签更具语义化

2011年08月20日

HTML5-在实际项目中的应用:使标签更具语义化

前言:

本文章从页面的 DOCTYPE 说起,一步步解释 如何运用 HTML5 新标签搭建语义化更明确的html页面,并提供新标签如何兼容各个主流浏览器的解决方案。

HTML5,作为 下一代web的开发标准,相信有不少开发者已经垂涎他各种具有革命性的新功能诸如 语义化明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、告别插件的富动画(canvas)、强大的api支持等。本文首先说说如何利用html5的各种更具语义化的标签来构建我们的html页面.

1.关于 DOCTYPE

在没有HTML5来临之前,一个标准的XHTML头部代码是这样的:

<!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>
...

你能记住那么复杂闹心的代码吗?当然,作为一个出色的前端,记住的话也不奇怪,但是,问题是完全没必要去记住!(小弟不才,在没有HTML5之前都是直接打开 DW,里面自动生成的,可先进了…)

再来看看一个标准的 HTML5 头部是如何的

<!DOCTYPE HTML>
<html>
<head>
<meta charset=gb2312>
</head>
...

哪个更简单些就不用我来说了,笨拙如我都能轻易记住了,这HTML5呀,给力呢。

要注意的一点就是:HTML5 虽然目前并没有兼容所有浏览器嘛,主犯当然是 IE6、IE7、IE8 ,共犯就是一些非主流浏览器 和一些 依附在以上 IE版本的各色 IE内核浏览器,咳,那不是重点喇,关键是话虽如此,但这个能省去100多字节(对于PV是百万级以上的站点,能省下不少的流量的)的头部已经可以完美兼容了。如果你对浏览器解析模式有研究的话,或者在日常的各种调试、debug中度过的话,你应该知道,在页面没有定义 DOCTYPE 的情况下 或者 因为一些字符使得 DOCTYPE 失效的情况下 会触发各种灵异现象诸如 盒模型不正确,js捕获数据怪异等,而只要定义了浏览器就可以在标准模式下解析页面,而不需要指定某个类型的DTD了。

更丰富的语义化标签体系

语义化编码是作为一个合格的前端开发者一个必备的技能,但随着 web技术的发展 和各种新技术、新思想的产生,原有的 XHTML 那具语义化的标签已经难以有点力不从心了。而HTML5就为我们提供了一系列新的标签和属性,让我们在维护and 编译的时候不会 再让 页面上布满 令人心烦的 div~,下面举个例子说明下:

...
<body>
<!-- 头部 -->
<div class="header">
  <h1>网站标题</h1>
  <h2>网站副标题</h2>
</div>
<!--//头部-->

<!-- 主体 -->
<div class ="bodyArea">

  <!-- 左侧 -->
  <div class="nav">
    <div class = "nav_list_section">
      <h3 class="tl">文章导航</h3>
      <ul class="list">
        <li><a href = "#">文章标题一</a></li>
        <li><a href = "#">文章标题二</a></li>
        <li><a href = "#">文章标题三</a></li>
      </ul>
    </div>
  </div>
  <!--//左侧-->

  <!-- 主栏 -->
  <div class="main">
    <!-- 文章 -->
    <div class="article">
      <h1>jackness 口中的 HTML5</h1>
      <p>这是一篇讲述 HTML5 各种新特性的文章</p>
    </div>
    <!--//文章-->
  </div>
  <!--//主栏-->
</div>
<!--//主体-->

<!-- 页脚 -->
<div class="footer"></div>
<!--//页脚-->
</body>
...

上面是我某个项目的文章页面布局,由头部、左侧栏、文章展示区 and 底部 组成。编码简洁也符合XHTML的语义化,即便是在HTML5中也能很好的表现。但是对浏览器来说,这就算一段没有区分权重的代码,而不是一个让机器能读懂语义化的标签来定义相应的区块。比如,标准浏览器如 firefox、chrome 都有一个快捷键可以带引客户直接跳转到页面的导航,但是问题是所有的区块都是用div来定义的,并且 div的 id 值是由开发者定的,所以,浏览器不知道哪个应该是导航链接的所在区块。HTML5新标签的出现,正好弥补了这一缺憾。上述的代码,换成HTML5就可以这样写:

...
<body>
<!-- 头部 -->
<header>
  <h1>网站标题</h1>
  <h2>网站副标题</h2>
</header>
<!--//头部-->

<!-- 主体 -->
<div class ="bodyArea">

  <!-- 左侧 -->
  <nav>
    <section class = "nav_list_section">
      <h3 class="tl">文章导航</h3>
      <ul class="list">
        <li><a href = "#">文章标题一</a></li>
        <li><a href = "#">文章标题二</a></li>
        <li><a href = "#">文章标题三</a></li>
      </ul>
    </section>
  </nav>
  <!--//左侧-->

  <!-- 主栏 -->
  <div class="main">
    <!-- 文章 -->
    <article>
      <h1>jackness 口中的 HTML5</h1>
      <p>这是一篇讲述 HTML5 各种新特性的文章</p>
    </article>
    <!--//文章-->
  </div>
  <!--//主栏-->
</div>
<!--//主体-->

<!-- 页脚 -->
<footer></footer>
<!--//页脚-->
</body>
...

当然,其实实际开发项目中呢,那些头部页脚 侧栏那些,还是要给个class给他的,例如: header、 footer 不单只是运用在 页面的 头部和页脚,也广泛地应用在各个模块的 主标题、副标题之中,下面顺带说一下:

一篇文章最终页,结构大概是这样子:

<div class="article">
  <div class="header">
    <h1>我是乖乖的文章标题</h1>
    <div class="tool">
      <a class="javascript:;">功能键一</a>
      <a class="javascript:;">功能键二</a>
    </div>
  </div>
  <div class="guidance">我是文章导读</div>
  <div class="main">
    <p>我是文章正文</p>
  </div>
</div>

在这里,运用HTML5 可以这样来写:

<section class="article">
  <header class="header">
    <h1>我是乖乖的文章标题</h1>
    <section class="tool">
      <a class="javascript:;">功能键一</a>
      <a class="javascript:;">功能键二</a>
    </section>
  </header>
  <footer class="guidance">我是文章导读</footer>
  <article class="main">
    <p>我是文章正文</p>
  </article>
</section>

或许有人会疑问 footer 标签根据 英文意思 是 底部的意思吗,怎么可以用作副标题呢?答案是,其实,根据html5的开发者文档,footer的语义化是 文章、模块的副标题才对,所以储君,莫激动。

关于各个标签的运用,适用场合呢,我在这里就不一一列举了,有兴趣的童鞋可以 点击这里,上面对于html各个标签的讲解还是蛮到位的。

HTML5的向前兼容

有很多人在运用 HTML5标签搭建新页面的时候发现一个问题, 就是 这些 看起来 很好,用起来蛮爽的标签 在IE8以及以下版本的浏览器都不生效,加了样式也是白加的,全部整齐地 属于 inline行内元素,于是乎,有人就觉得,在IE8还没被淘汰之前,HTML5 在web应用上只是一个空想。不过,事实告诉我们,别看小我们前端工程师呢,IE酱…

想让HTML5向前兼容我们需要一段小小的 JS函数来协助:

<script type="javascript">
  document.createElement("article");
  document.createElement("aside");
  document.createElement("footer");
  document.createElement("header");
  document.createElement("nav");
  document.createElement("section");
  document.createElement("details");
  document.createElement("dialog");
  document.createElement("output");
  document.createElement("time");
  ...
</script>

上面代码的作用就是创建标签,使IE8及以下的浏览器能识别。

然后就是给这些标签一个 css 初始化了,由于IE8及以下浏览器系统对这些新标签没有默认样式,所以都是统一地 属于inline属性,所以需要在我们的css 初始化文件里面添加以下代码:

article,aside,footer,header,nav,section,hgroup{ display:block;}
details,dialog,output,time{ display:inline;}

这样的话我们在实际开发项目中就能运用HTML5了,不过在实际项目中我们一般会将 js部分的那段初始化代码封装到一个 js文件如resetHTML5_forIE.js,然后在header部分针对ie进行调用:

<!--[if IE]>
<script type="text/javascript" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="js/resetHTML5_forIE.js"></script>
<![endif]-->

也许有人会问 为什么不写 if lte IE8 针对 ie8及以下浏览器 而是 全部IE浏览器呢,我刚开始也是这样写的,但是发现…IE9的测试人员工具,不是能让IE更改成 各个版本嘛,通过那方法更改ie版本, 这个

  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS