HTML5语义化标签
2012-02-01 06:13
316 查看
======================================================
注：本文源代码点此下载
======================================================
语义化的作用
语义化是最近几年经常被讨论的一个话题,在提倡web标准化的今天,语义化越来越受到大家的重视,并且已经成为web标准的一部分了。
为什么要语义化?初次接触这个概念的人一定会这么问。css森林和愚人码头都对此讲述了自己的观点。综合两者,我的看法是:语义化的的直接作用大多是让机器可以更好地理解我们的网页。我说的机器,可以是屏幕阅读器,可以是移动设备,可以是爬虫程序甚至是我们自己写的程序。
屏幕阅读器这个没有得到很多人重视,所以也没有很大说服力。但是后者几个应该没有人会不重视吧,许多手机web浏览器都是把网页在服务器中解析,提取,压缩再返回手机客户端的,语义化的标签相当于一个公共的协议,可以让服务器更有效准确地提取目标内容。另外,语义化的网页还可以让爬虫程序更好地理解网页,对seo有直接帮助。
其实,我认为上面的都是浮云,语义化网页真正伟大之处是促进信息的共享和传播。rss的应用就是一个例子,rss本身就是一个高度语义化的xml文档,同时它也是一个协议,大家都按照这个协议来提供网站的信息内容,这样,我们便可以按照同样的协议编写程序,使用这个程序来获取我们各自需要的信息,大大地促进了信息的共享和传播。
当然,语义化的作用不仅仅是这些,在《语义化的html结构到底有什么好处?》中还提到了,它对网页丢失样式呈现清晰结构,对于团队开发和维护也有重要作用。
html5中的语义化标签
扯了这么久,还没有说到重点。其实大家都应该知道了,在html5规范中提出了一系列语义化的标签元素,并且修改了部分已有的标签元素。在这篇文章中,我不会把所有的标签都逐一讨论,要详细了解的话,这里推荐两个链接:《html5 differences from html4》还有《what
does it all mean?》.
html5中主要的新元素有:article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section(当然,除了这些,html5的新元素还有video和audio以及一些表单元素,这些标签因为太有内涵了,我后面会再另写文章独立讨论。),其实它们都是普普通通的标签,普通得跟div没什么两样,确实如此,但在我看来,在当今div泛滥的年代,这些语义化标签会让我们的网页显得血肉丰满。它们的使命,就是来秒杀div的。
接着,我们应该怎么使用这些新元素呢?对于已经支持html5的浏览器,直接尽情的使用。对于那些压根不认识html5的浏览器....就有些蛋疼了。不同浏览器对此反应不一。所有浏览器都会把未知元素当作行内元素来渲染。能渲染出来问题应该都不大了,但是html5的新标签并不是所有都是行内元素,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section就应该以块元素来渲染,所以,我们应该在css中把它们重置为块元素。
关于ie们对未知元素解析的问题
这里,问题就出来了,ie9以下版本的浏览器对未知元素的某些操作会失效。我们举一个例子吧:
this is the content
上面的代码在ie9之前的浏览器中,“不能应用样式”,假如说我们加上这样的css规则:article{color:red},里面的文本依然没有变化。
另外,如果我们也“不能获取和写入innerhtml”:alert(document.getelementbyid("a").inerhtml);输出一个空字符串。
这类型的问题很多人都知道,也有很多人给出了相应的解释,“浏览器不能获取未知元素节点”,"所有未知元素所应用的样式都会被忽略"....诸如此类的解释。但是,我认为很多解释都是不全面的,甚至错误的。比较靠谱的是《what does it all mean?》一文的解释,但是我依然觉得不太严谨,下面我会阐述一下我的看法。
为了看清楚ie们是如何解释未知元素的,我继续使用上面的demo,然后使用ie8的开发者工具查看dom结构,源文件是这样的:
http://code.google.com/p/html5shiv/了解详细情况。所以,我们只要在ie9以下的浏览器的标签内插入这段代码,便可以使用这些语义化标签了。
参考资料
http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linktypes
http://www.diveintohtml5.com/semantics.html
http://www.w3.org/tr/html5-diff/#doctype
http://www.w3.org/tr/html5/
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
注：本文源代码点此下载
======================================================
语义化的作用
语义化是最近几年经常被讨论的一个话题,在提倡web标准化的今天,语义化越来越受到大家的重视,并且已经成为web标准的一部分了。
为什么要语义化?初次接触这个概念的人一定会这么问。css森林和愚人码头都对此讲述了自己的观点。综合两者,我的看法是:语义化的的直接作用大多是让机器可以更好地理解我们的网页。我说的机器,可以是屏幕阅读器,可以是移动设备,可以是爬虫程序甚至是我们自己写的程序。
屏幕阅读器这个没有得到很多人重视,所以也没有很大说服力。但是后者几个应该没有人会不重视吧,许多手机web浏览器都是把网页在服务器中解析,提取,压缩再返回手机客户端的,语义化的标签相当于一个公共的协议,可以让服务器更有效准确地提取目标内容。另外,语义化的网页还可以让爬虫程序更好地理解网页,对seo有直接帮助。
其实,我认为上面的都是浮云,语义化网页真正伟大之处是促进信息的共享和传播。rss的应用就是一个例子,rss本身就是一个高度语义化的xml文档,同时它也是一个协议,大家都按照这个协议来提供网站的信息内容,这样,我们便可以按照同样的协议编写程序,使用这个程序来获取我们各自需要的信息,大大地促进了信息的共享和传播。
当然,语义化的作用不仅仅是这些,在《语义化的html结构到底有什么好处?》中还提到了,它对网页丢失样式呈现清晰结构,对于团队开发和维护也有重要作用。
html5中的语义化标签
扯了这么久,还没有说到重点。其实大家都应该知道了,在html5规范中提出了一系列语义化的标签元素,并且修改了部分已有的标签元素。在这篇文章中,我不会把所有的标签都逐一讨论,要详细了解的话,这里推荐两个链接:《html5 differences from html4》还有《what
does it all mean?》.
html5中主要的新元素有:article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section(当然,除了这些,html5的新元素还有video和audio以及一些表单元素,这些标签因为太有内涵了,我后面会再另写文章独立讨论。),其实它们都是普普通通的标签,普通得跟div没什么两样,确实如此,但在我看来,在当今div泛滥的年代,这些语义化标签会让我们的网页显得血肉丰满。它们的使命,就是来秒杀div的。
接着,我们应该怎么使用这些新元素呢?对于已经支持html5的浏览器,直接尽情的使用。对于那些压根不认识html5的浏览器....就有些蛋疼了。不同浏览器对此反应不一。所有浏览器都会把未知元素当作行内元素来渲染。能渲染出来问题应该都不大了,但是html5的新标签并不是所有都是行内元素,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section就应该以块元素来渲染,所以,我们应该在css中把它们重置为块元素。
关于ie们对未知元素解析的问题
这里,问题就出来了,ie9以下版本的浏览器对未知元素的某些操作会失效。我们举一个例子吧:
this is the content
上面的代码在ie9之前的浏览器中,“不能应用样式”,假如说我们加上这样的css规则:article{color:red},里面的文本依然没有变化。
另外,如果我们也“不能获取和写入innerhtml”:alert(document.getelementbyid("a").inerhtml);输出一个空字符串。
这类型的问题很多人都知道,也有很多人给出了相应的解释,“浏览器不能获取未知元素节点”,"所有未知元素所应用的样式都会被忽略"....诸如此类的解释。但是,我认为很多解释都是不全面的,甚至错误的。比较靠谱的是《what does it all mean?》一文的解释,但是我依然觉得不太严谨,下面我会阐述一下我的看法。
为了看清楚ie们是如何解释未知元素的,我继续使用上面的demo,然后使用ie8的开发者工具查看dom结构,源文件是这样的:
http://code.google.com/p/html5shiv/了解详细情况。所以,我们只要在ie9以下的浏览器的标签内插入这段代码,便可以使用这些语义化标签了。
参考资料
http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linktypes
http://www.diveintohtml5.com/semantics.html
http://www.w3.org/tr/html5-diff/#doctype
http://www.w3.org/tr/html5/
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 