用HTML5.0制作网页的教程

HTML,制作网页
根据你们询问的人HTML 5不是迈向创造更语义化的网络的下一 个重要步伐就是用一系列不完整的标签和标记大杂烩让网络陷入困境的灾难。

争论双方的问题在于搜索引擎优化就是用一系列不完整的标签和标记大杂烩让网络陷入困境的灾难。

即便如此我们不难发现下一代网络标记工具的好处和潜在的问题。

内容
1. HTML 5有什么不同？

3. 最基本的语义结构

1. header

2. nav

3. section

1. article

2. aside

3. footer

4. 把他们放在一起

5. 为新元素编写样式

6. 兼容老的浏览器

7. 现在你可以使用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文档类型。你准备好了么？他出现了：

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

这个构想是停止HTML版本化使向后兼容变得更容易。从长远看是否成功是另外的事情但至少 他节省了你输入的平均时间。

最基本语义结构
我们已经将我们的页面定义为HTML 5文档。到现在为止一切都还不错。现在这些我们已经听说的新标签到底是什么？

在我们钻研新标签前想想你一般网页的结构大概像这样：

这对于展示用途很好但如果我们想要知道一些关于页面元素包含什么的问题这又怎么办呢？

上面的例子中我们为我们所有的结构p添加了ID。这在有见识的设计师中是很平常的事。目 的有两个方面首先ID提供了可以能用于给页面的特殊段落应用样式的锚其次ID充当基本的伪语义结构。高明的解析器将会查看标签的ID属性并尝试 去猜测他们的含义但当每个站点的ID名称不同的时候很难。

这就是新结构标签到来的理由。

当认识到这些ID成为了惯例HTML 5的缔造者们更进一步使这些元素中的一部分变成他们独立的标签。这儿有一个HTML 5中生效的新标签的快速概要：

header
头部标签被设计作为关于一个章节或者一整张网页介绍信息的容器。header 标签可以包含从你位于大多数页面顶部的典型标志或者标语到介绍一个章节的标语和开场白的任何东西。如果你还在你的页面里使用p id=header那可以使用header替换

nav
nav元素非常明显这是你的导航元素。当然什么被算为导航是有一些争议的有一个基本的站点 导航但一些情况下还可能有页面导航元素。HTML5的缔造者WHATWG最近在修改nav的解释来表现怎样在同一个页面使用两次。

更多关于nav的信息以及关于HTML5的激烈争论参见Jeffrey Zeldman关于nav元素的文章。

如果你还在使用p id=nav标签来包含你的页面导航你可以使用简洁的nav标签来替换。

section
Section可能是新标签中最模糊的。根据HTML 5定义一个章节是一个内容的主题集合通常在header标签后在footer标签前。但是如果 需要section也可以相互嵌套。

在我们上面的例子里被content标记的p就是一个变为section的很好的选 择。另外在那个section内根据内容我们可以增加section。

标签： HTML我们元素标签