如何用HTML5制作网页?
记住,你仍然可以给这些标签添加类和ID属性。所以,如果你想要单独为一个导航设置样式,你可以轻易的给这个标签添加一个类或者样式,就象这样:
<nav class="main-menu">
然后你可以应用一个样式:
nav.main-menu {
font-size: 18px;
}
兼容老的浏览器
但等一下,IE怎么办?这些样式完全不能在IE6下工作。如果你仍然需要支持像IE6一类遗产 般的浏览器,这儿有一个解决方法。IE6解析和显示这些标签还好,但你不能对他们设置任何CSS。解决方法是使用一点JavaScript。
我们只需要让IE去给我们使用createElement方法创造的的HTML 5标签设置样式。在HTML 5文件的head标签内添加这点东西。或者,你可以把他保存在一个特定的文件里,并用这种方法包含。
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
我知道你在想什么:“哥,你根本没有为那个脚本标签定义一个MIME类型。”
你根本不需要在HTML 5做这些事情。在HTML 5中,所有的脚本都被假定为type=”text/javascript”,所以没有必要让属性把你的脚本标签搞得乱七八糟(除非你的脚本并不是 JavaScript)。
这解决了IE的问题,但我们并没有摆脱困境。现在被证明Gecko渲染引擎有一个bug,导致了Firefox2和Camino的一些版本在这些标签上卡住。
这儿有两个方法来处理这个bug,没有一个是理想的。更多的细节请查看HTML5doctor的这篇文章。这篇文章同时附有一个让所有HTML 5元素都生效的方便脚本。
记住,尽管Firefox 2的使用率很快在所有网站流量中降到了10%以下,但单纯忽略这个bug可能还是需要根据你网站的访问者来定。
现在你可以使用HTML 5了,但你会用么?
简短的回答是:我们会。
复杂一点的是:那要看站点了。如果你负责重新制作CNN主页,好吧,你可能会有一点抗拒,直到浏览器的支持变好些。但如果你要给你的博客改版,我们支持你。这儿还有一些可以帮助你的Wordpress插件,如果你正在使用这么流行的发布系统。这儿是一个Jeff Starr制作的HTML 5主题。
同时,试试以站点为主的HTML 5美术馆,并且查看源代码,看看他们做了什么。
尽管如此,如果IE的缺点阻止你了,这样考虑吧:就连Google也在他们的主要搜索页面上使 用了HTML 5的文档类型。就算如果你不使用所有新的结构标签,你可以至少利用一下简洁的脚本声明和下次我们会介绍的关于一些非结构的语义标签。
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
- HTML CSS JavaScript Dreamweaver Fireworks 设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
-
CSS酷站
网上购物
设计团队
设计博客
-
- 教程排行榜
- 神奇的HTML5动画效果演示网站
- 十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
- 25个超炫的HTML5+CSS3网页应用案例欣赏
- 十三个网站案例让你提前体验HTML5和CSS3的魅力
- 16个颇具创意的HTML5网站设计
- 15个采用HTML5实现的网站界面设计欣赏
- 体验HTML5 Canvas对象的强大 五款在线绘图应用示例
- 网页设计师必收藏的十五个HTML5资源
- 21款效果惊艳基于HTML5的应用程序欣赏
- HTML的电子邮件链接标签mailto用法详解
- 采用HTML5搭建的多个网站尝鲜试用
- 如何用HTML5制作网页?
