WordPress主题修改之Html5语义化

20110928233215.jpg

刚才用Html5标签把主题给修改了一下,预览地址可以看这里:http://scorpio.sinaapp.com

 

不明白为什么在IE6下面会严重变形。

Html5的魅力

Html5最大的特点在于多媒体和移动互联网方面,小弟不才,对那些了解不多,本次修改仅仅是为了那么一点点语义化。

对已有主题进行Html5语义化升级

对已有的WordPress主题进行Html5语义化标签还是很容易的。

我们平时写CSS的时候,用的大多是id或者class属性,所以,基本上修改Html后,对CSS文件的改动很少。

对于很多现代浏览器,基本上支持Html5的很多属性了,但对于IE9以下的版本,就添加如下两段代码即可:

根据页面优化原则,记得把css文档放在页面头部,把js文档放在页面尾部原来这个js脚本要放在里面,否则IE6下面会严重错位。

Html5常用标签解释

  • <article> 标签定义外部的内容,可以是一篇新的文章。
  • <aside> 标签定义 article 以外的内容,aside 的内容可用作文章的侧栏。
  • <figcaption> 标签定义 figure 元素的标题。
  • <figure> 标签用于对元素进行组合,使用 figcaption 元素为元素组添加标题。
  • <footer> 标签定义 section 或 文档 的页脚。
  • <header> 标签定义 文档 的页眉。
  • <hgroup> 标签用于对 section 或 网页 的标题进行组合,使用 figcaption 元素为元素组添加标题。
  • <nav> 标签定义 导航链接 的部分。
  • <section> 标签定义文档中的节( section、区段 )。比如章节、页眉、页脚或文档中的其他部分。
  • <time> 标签定义日期或时间,或者两者。

在常用布局里面,多用到<section> <article> <aside> <hgroup> <header> <nav> <footer>。

后面三个都比较好理解,意义明确。

前面三个,可以把<article>和<aside>看成是<section>更富语义化后的标签

不过我对里面的<hgruop>搞不懂,不知道该什么时候用,找过搜索引擎,详细的案例解释几乎没有,里面通常包含<h2><h3>等标签,难道就是h标签的集合的意思?

额外疑问

  • 像这篇文章 http://www.vinqon.com/codeblog/?detail/11103 右边有个Content目录,这个是如何实现的?插件?
  • 平常我们做主题,会在header.php里面的<header>标签里面用<h1>来包裹网站标题,那么在single.php等文章页,文章标题就只能用<h2>这种标签了?总感觉在文章页等有具体内容的页面,应该直接使用<h1>作为主要内容的标题。不知道其他人是怎么处理的呢?