WordPress主题修改之Html5语义化

刚才用Html5标签把主题给修改了一下,预览地址可以

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

Html5的魅力

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

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

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

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

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

/* html5 Tags */ header,nav,article,section,aside,footer,figure{display:block}

12

/* html5 Tags */header,nav,article,section,aside,footer,figure{display:block}

<!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

123

<!--[if lt IE 9]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

根据页面优化原则,记得把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>作为主要内容的标题。不知道其他人是怎么处理的呢?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 列表 顶

它构成了选择和菜单组件的基础。 MaterialListComponent类充当提供样式和收集项事件的能力的列表的根节点。

1162
来自专栏Taylor技术日志

Laravel-Excel导出功能文档

可以在闭包中修改一些属性,很多属性可在配置文件中设置默认值 config/excel.php

1.7K50
来自专栏前端知识分享

第140天:前端开发中浏览器兼容性问题总结(一)

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本...

1.5K3
来自专栏BestSDK

年薪30万的前端面试题,你能答对几道?|附答案

HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元...

4216
来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

2216
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

5105
来自专栏分享达人秀

日历视图CalendarView和定时器Chronometer

上一期学习了AnalogClock、DigitalClock和TextClock时钟组件,本期继续来学习日历视图CalendarView和定时器Chro...

2246
来自专栏V站

Note丨记41条Web程序员日常使用的代码!

2178
来自专栏跟着阿笨一起玩NET

WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色

本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html

1901
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

2808

扫码关注云+社区

领取腾讯云代金券