用HTML5.0制作网页的教程

2019-01-28 20:30:41王振洲

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

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

最基本语义结构

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

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

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

上面的例子中,我们为我们所有的结构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元素可以包含“组成文档或站点独立部分的一段内容;例 如,杂志或者新闻的文章,或者博客条目。”