网页制作学习:用HTML5.0制作网页


为了帮助了解当今HTML 5的一些新玩意儿,我们现在就进入正题,开始使用一些新的结构元素。我们创建HTML 5文档第一件需要做的事情就是使用新的文档类型。

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

争论双方的问题在于,很少的站点在自然环境下使用HTML 5,所以现在所认识到的问题的理论解决方案仍然在很大程度上未经考验。

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

内容

1.     HTML 5有什么不同?

2.     最终,一个任何人都可以记住的文档类型

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文档类型。你准备好了么?他出现了:

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是完美的!

<footer>

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

把他们放在一起

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

HTML5doctor的这篇文章。这篇文章同时附有一个让所有HTML 5元素都生效的方便脚本。

记住,尽管Firefox 2的使用率很快在所有网站流量中降到了10%以下,但单纯忽略这个bug可能还是需要根据你网站的访问者来定。

现在你可以使用HTML 5了,但你会用么?

简短的回答是:我们会。

复杂一点的是:那要看站点了。如果你指责重新制作CNN主页,好吧,你可能会有一点抗拒,直到 浏览器的支持变好些。但如果你要给你的博客改版,我们支持你。这儿还有一些可以帮助你的Wordpress插 件,如果你正在使用这么流行的发布系统。这儿是一个Jeff Starr制作的HTML 5主题。

同时,试试以站点为主的HTML 5美术馆,并且查看源代码,看看他们做了什么。

尽管如此,如果IE的缺点阻止你了,这样考虑吧:就连Google也在他们的主要搜索页面上使 用了HTML 5的文档类型。就算如果你不使用所有新的结构标签,你可以至少利用一下简洁的脚本声明和下次我们会介绍的关于一些非结构的语义标签。

为了帮助了解当今HTML 5的一些新玩意儿,我们现在就进入正题,开始使用一些新的结构元素。我们创建HTML 5文档第一件需要做的事情就是使用新的文档类型。

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

争论双方的问题在于,很少的站点在自然环境下使用HTML 5,所以现在所认识到的问题的理论解决方案仍然在很大程度上未经考验。

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

内容

1.     HTML 5有什么不同?

2.     最终,一个任何人都可以记住的文档类型

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文档类型。你准备好了么?他出现了:

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是完美的!

<footer>

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

把他们放在一起

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

HTML5doctor的这篇文章。这篇文章同时附有一个让所有HTML 5元素都生效的方便脚本。

记住,尽管Firefox 2的使用率很快在所有网站流量中降到了10%以下,但单纯忽略这个bug可能还是需要根据你网站的访问者来定。

现在你可以使用HTML 5了,但你会用么?

简短的回答是:我们会。

复杂一点的是:那要看站点了。如果你指责重新制作CNN主页,好吧,你可能会有一点抗拒,直到 浏览器的支持变好些。但如果你要给你的博客改版,我们支持你。这儿还有一些可以帮助你的Wordpress插 件,如果你正在使用这么流行的发布系统。这儿是一个Jeff Starr制作的HTML 5主题。

同时,试试以站点为主的HTML 5美术馆,并且查看源代码,看看他们做了什么。

尽管如此,如果IE的缺点阻止你了,这样考虑吧:就连Google也在他们的主要搜索页面上使 用了HTML 5的文档类型。就算如果你不使用所有新的结构标签,你可以至少利用一下简洁的脚本声明和下次我们会介绍的关于一些非结构的语义标签。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3