使用HTML5制作网页2

mseed · 发表于 2012-3-6 13:01:49

<footer>
Footer的用处也应该是很明显的，除了可能你不清楚可以拥有多个脚标。换句话说，除了通常在大多数页面底部看到的主脚标，段落也可以含有脚标。

把他们放在一起

让我们使用新标签重新编写我们原来的例子：

<!DOCTYPE html>
<html>
<head>
...stuff...
</head>
<body>
<header>
<h1>My Site</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h1>My Article</h1>
<article>
<p>...</p>
</article>
</section>
<footer>
<p>...</p>
</footer>
</body>
</html>

复制代码

非常清楚，并且容易理解，不是么？一些注释：我们可以在header标签中包含我们的<h1>My Article</h1>标题。我没有这样做，因为h1元素已经表达了标题的含义，但如果你还有发布日期，署名或者其他数据在你文章的顶部，为标签集添加一个header容器标签是一个很好的选择。

同时注意我们可以在article元素下添加第二个footer元素来包含诸如翻页导航，相关文章或者其他内容。
为新标签编写样式
在大多数浏览器中，所有你需要做的就是像你通常做的那样，为在新标签上应用样式表，简单的定义你的样式。但请确认为每一个元素添加了display:block;规则，无论如何，从现在开始。经过一段时间后，当浏览器开始标准化，并支持新元素后，那就不必要了。
例如，让我们在我们的header里应用一些样式：

header {
display: block;
font-size: 36px;
font-weight: bold;
}

复制代码

<footer>
Footer的用处也应该是很明显的，除了可能你不清楚可以拥有多个脚标。换句话说，除了通常在大多数页面底部看到的主脚标，段落也可以含有脚标。

把他们放在一起

让我们使用新标签重新编写我们原来的例子：

<!DOCTYPE html>
<html>
<head>
...stuff...
</head>
<body>
<header>
<h1>My Site</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h1>My Article</h1>
<article>
<p>...</p>
</article>
</section>
<footer>
<p>...</p>
</footer>
</body>
</html>

复制代码

非常清楚，并且容易理解，不是么？一些注释：我们可以在header标签中包含我们的<h1>My Article</h1>标题。我没有这样做，因为h1元素已经表达了标题的含义，但如果你还有发布日期，署名或者其他数据在你文章的顶部，为标签集添加一个header容器标签是一个很好的选择。

同时注意我们可以在article元素下添加第二个footer元素来包含诸如翻页导航，相关文章或者其他内容。
为新标签编写样式
在大多数浏览器中，所有你需要做的就是像你通常做的那样，为在新标签上应用样式表，简单的定义你的样式。但请确认为每一个元素添加了display:block;规则，无论如何，从现在开始。经过一段时间后，当浏览器开始标准化，并支持新元素后，那就不必要了。
例如，让我们在我们的header里应用一些样式：

header {
display:block;
font-size: 36px;
font-weight: bold;
}

复制代码

记住，你仍然可以给这些标签添加类和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的文档类型。就算如果你不使用所有新的结构标签，你可以至少利用一下简洁的脚本声明和下次我们会介绍的关于一些非结构的语义标签。

王磊 · 发表于 2012-3-6 16:24:09

给力一顶！！

		自动登录	找回密码
密码			立即注册

[教程] 使用HTML5制作网页2

评分

站长推荐 /1