您现在的位置:主页 > 网站制作 > HTML/XHTML >

新手学习:用HTML5.0做网页

来源:建站吧 责任编辑:Jzq8 发表时间:2011-01-08 点击:

内容

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版本化,使向后兼容变得更容易。从长远看是否成功是另外的事情,但至少 他节省了你输入的平均时间。

最基本语义结构

我们已经将我们的页面定义为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的激烈争论,参见。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片

推荐图文

  • 论述使用HTML5的利与弊
  • 8个你从未见过的HTML5 Canvas和JavaScript的动画
  • 13个应用HTML5 和 CSS3 实现的Web效果
  • HTML常用格式 建站吧HTML第三节
  • 15 个非常值得收藏的 HTML5 资源
  • HTML基本概念 建站吧HTML第一节
  • HTML基础Tag 建站吧HTML第二节
  • 建站吧:HTML 5入门级技巧
  • 闲聊HTML5:HTML5游戏的现在和将来
Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
冀ICP备09002514号
冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款