使用HTML5制作网页1

mse*** · 发表于 2012-3-6 12:59:00

根据你们询问的人，HTML 5不是迈向创造更语义化的网络的下一个重要步伐，就是用一系列不完整的标签和标记大杂烩让网络陷入困境的灾难。
争论双方的问题在于，很少的站点在自然环境下使用HTML 5，所以现在所认识到的问题的理论解决方案仍然在很大程度上未经考验。
即便如此，我们不难发现下一代网络标记工具的好处和潜在的问题。
内容

HTML 5有什么不同？
最终，一个任何人都可以记住的文档类型
最基本的语义结构
- <header>
- <nav>
- <section>
  - <article>
  - <aside>
  - <footer>
- 把他们放在一起
- 为新元素编写样式
- 兼容老的浏览器
- 现在你可以使用HTML 5了，但你会用么？

HTML 5有什么不同？
首先，我们通过HTML 5表达什么？First off, what do we mean by HTML 5?理论上，我们表达所有的事——新的语义结构标签，例如canvas或者离线储存等API规范，以及新的内联语义标签。尽管如此，我们把实际的原因（PS：浏览器支持问题）仅仅局限于结构标签。canvas，离线储存，本地视频或者地理定位API都很绝妙，然而他们还不能被所有浏览器一致的支持。
“但是等等”你说，“大多数浏览器也都不支持新的结构元素！”这是真的，但他们中的绝大多数将会很乐意去接受你想要创建的任何标签。甚至连IE6也可以处理新标签，尽管如果你想要使用CSS设置样式，你需要一点JavaScript的帮助。
当你对新标签设置样式时，你需要记住一件事，那就是未知标签在大部分浏览器中没有默认样式。他们同时被认为是行级元素。尽管如此，由于大部分HTML 5的新标签可以构造，我们将让他们拥有块级元素的行为。解决方法是确认你在CSS样式中包含了display:block;。
为了帮助了解当今HTML 5的一些新玩意儿，我们现在就进入正题，开始使用一些新的结构元素。
最终，一个任何人都可以记住的文档类型
我们创建HTML 5文档第一件需要做的事情就是使用新的文档类型。现在，如果你还清楚的记得HTML 4或者XHTML 1.x的文档类型，你真是一个比我们更强的淘气鬼。每当我们新建一个页面，我们必须打开一个旧的文件，剪切并粘贴文档类型定义。

这真是痛苦，也是为什么我们喜欢新的HTML 5文档类型。你准备好了么？他出现了：

<!DOCTYPE html>

复制代码

不会太难记。简单并且容易理解。不区分大小写。

这个构想是停止HTML版本化，使向后兼容变得更容易。从长远看是否成功是另外的事情，但至少他节省了你输入的平均时间。
最基本语义结构
我们已经将我们的页面定义为HTML 5文档。到现在为止，一切都还不错。现在，这些我们已经听说的新标签到底是什么？
在我们钻研新标签前，想想你一般网页的结构，大概像这样：

<html>
<head>
...stuff...
</head>
<body>
<div id="header">
<h1>My Site</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id=content>
<h1>My Article</h1>
<p>...</p>
</div>
<div id="footer">
<p>...</p>
</div>
</body>
</html>

复制代码

这对于展示用途很好，但如果我们想要知道一些关于页面元素包含什么的问题，这又怎么办呢？
上面的例子中，我们为我们所有的结构div添加了ID。这在有见识的设计师中是很平常的事。目的有两个方面，首先，ID提供了可以能用于给页面的特殊段落应用样式的锚，其次，ID充当基本的伪语义结构。高明的解析器将会查看标签的ID属性，并尝试去猜测他们的含义，但当每个站点的ID名称不同的时候很难。
这就是新结构标签到来的理由。
当认识到这些ID成为了惯例，HTML 5的缔造者们更进一步，使这些元素中的一部分变成他们独立的标签。这儿有一个HTML 5中生效的新标签的快速概要：
<header>
头部标签被设计作为关于一个章节或者一整张网页介绍信息的容器。<header> 标签可以包含从你位于大多数页面顶部的典型标志或者标语，到介绍一个章节的标语和开场白的任何东西。如果你还在你的页面里使用<div id=”header”>，那可以使用<header>替换
<nav>
nav元素非常明显，这是你的导航元素。当然什么被算为导航是有一些争议的，有一个基本的站点导航，但一些情况下还可能有页面导航元素。HTML5的缔造者WHATWG最近在修改<nav>的解释，来表现怎样在同一个页面使用两次。
更多关于nav的信息以及关于HTML5的激烈争论，参见Jeffrey Zeldman关于nav元素的文章。
如果你还在使用<div id=”nav”>标签来包含你的页面导航，你可以使用简洁的<nav>标签来替换。
<section>
Section可能是新标签中最模糊的。根据HTML 5定义，一个章节是一个内容的主题集合，通常在header标签后，在footer标签前。但是如果需要，section也可以相互嵌套。
在我们上面的例子里，被“content”标记的div就是一个变为section的很好的选择。另外在那个section内，根据内容，我们可以增加section。
<article>
根绝WHATWG的注释，article元素可以包含“组成文档或站点独立部分的一段内容；例如，杂志或者新闻的文章，或者博客条目。”
记住一个页面里可以有多个article标签；例如一个博客首页可能有最新的十篇文章，每一篇包含在一个article标签内。Article也可以通过使用section标签分为多个段落，然而当你计划你的结构时需要稍微仔细一些，否则你容易引起以一些难看的标签大杂烩结尾的情况。
<aside>
另一个相当模糊的标签，aside元素用于“与组成文档主要的正文流内容无关的”内容。那表示一条附加的评论，内联的脚注，引用，注解或者像你看到的在这篇文章右边的更多典型的边栏内容。
根据WHATWG的注释，看起来<aside>可以用于所有的这些情况，尽管你边栏里的引用和标签云有着很大的不同。
没人说HTML 5是完美的！

王*** · 发表于 2012-3-6 14:11:35

顶一个！！

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

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

评分

浏览过的版块

站长推荐 /1