您的位置：首页 > Web前端 > HTML5

HTML5语义化标签的应用

2013-10-03 16:07 507 查看
前言

最近在读HTML5秘籍(the missing manual)，书中对HTML5的定义和理解是：HTML5实际上是一组独立标准的集合。有些标准已经得到了支持，而另外一些标准几年内(甚至永远)不会得到支持，即HTML5在某些浏览器的某些版本中能够运行。HTML5作为新一代web的开发标准，相信有不少开发者已经垂涎它各种具有革命性的新功能，诸如：语义化的标签和元素、新增表单控件、化繁为简的富媒体支持、神奇的本地数据存储技术、强大的绘图技术(canvas)以及离线、地理定位等。本文讨论的只是如何利用html5的各种明确的语义化标签来构建我们的页面。

关于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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
......


这么复杂的一大推代码相信很少人会去手写，也没有必要去记住。（小弟不才，在HTML5没来到之前都是直接打开 DW，现在是用sublime
text2自动生成的，O(∩_∩)O~）

而一个标准的HTML5头部是这样的：



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
.......





哪个更简单些就不用我来说了，笨拙的我都能轻易记住了，这HTML5呀，果然是好东西啊。但是好使的东西总是需要付出点代价的(╯﹏╰），显然是浏览器的兼容性问题，主要是微软的 IE6、IE7、IE8 ，还有可能就是一些非主流浏览器和一些基于IE内核的浏览器。综合考虑多方面因素，我们还是选择HTML5，因为这个能省去100多字节（对于PV是百万级以上的站点，能省下不少的流量呢）的头部已经可以完美兼容了。大家都可能知道，在页面没有定义DOCTYPE的情况下或者因为一些字符使得DOCTYPE失效的情况下，会触发各种怪异现象诸如盒模型不正确，js捕获数据怪异等，而只要定义了浏览器就可以在标准模式下解析页面，而不需要指定某个类型的DTD了。

丰富明确的语义化标签

语义化编码是每个从事前端开发人员都需具备的技能，但随着web技术的发展和各种新技术、新思想的产生，原有的XHTML那具有语义化的标签已经有点力不从心了。而HTML5就为我们提供了一系列新的标签和属性，让我们在维护和修改页面时不需面对嵌套N层、令人烦心的div了，并且使用这些新元素能让任何人无障碍地访问网页，更利于搜索引擎，下面举个例子说明下：



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





而运用HTML5可以这样写：



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





另外语义化标签如：aside、figure、figcaption、hgroup、nav的运用，适用场合呢，我在这里就不一一列举了，有兴趣的童鞋可以 点击这里，上面对于html各个标签的讲解还是蛮到位的。

HTML5标签的向前兼容

有很多人在运用 HTML5标签搭建新页面的时候发现一个问题， 就是这些用起来感觉很好很爽的标签在IE8以及以下版本的浏览器都不生效，加了样式也是徒劳无益的，全部整齐地属于inline行内元素，于是乎，有人就觉得，在IE8还没被淘汰之前，HTML5在web应用上只是一个空想(include
me)。不过，事实告诉我们，成功有时候需要借助外力，呵呵，又开始文绉绉了~

想让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及以下浏览器对这些新标签没有提供默认样式，所以他们都被解析为行内元素，因此我们需要在css初始化文件里添加以下代码来使其变成块级元素：

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


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

<!--[if lte IE8]>
<script type="text/javascript" src="js/resetHTML5_forIE.js"></script>
<![endif]-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航