当前位置:天才代写 > tutorial > 网页教程 > html5教程_从零开始构建HTML 5 Web页面

html5教程_从零开始构建HTML 5 Web页面

2018-05-18 08:00 星期五 所属: 网页教程 浏览:315

语言中的HTML 5教程是时下Web开发领域炒得火热的一个术语,没有错,我们或其他人都非常看好它,也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站,如YouTube开始使用HTML 5视频,Google 已经弃用自家的Gears,开始全面拥抱HTML 5实现离线解决方案,各大浏览器厂家也纷纷开始支持HTML 5,连被人诟病的微软也声称要在IE 9中增加对HTML 5的支持。本文打算为大家详细介绍一下如何构建一个完整的HTML 5 Web页面,以加深对HTML 5的理解。

HTML 5有何不同?

首先我们要明白HTML 5是新的语义结构标记,包括画布,离线存储规范和一些新的内联语义标记,但由于客观原因(主要是浏览器支持的原因),我们不得不限制标记的讨论范围,如画布,离线存储,原生视频或地理定位API等,还不是所有的浏览器都支持。

由于新的HTML 5标记大都是结构性的,它们的行为与块元素有些类似,为了帮助大家加深对HTML 5的理解,我将在下面的内容使用一些新的结构元素。

每个人都应该记住的doctype(文档类型)

要创建HTML 5 Web页面的第一件事情是使用新的doctype,你一定记住了HTML 4或XHTML 1.x的doctype,当我们要从旧的文档通过复制粘贴到新的文档中,必须要修改doctype,请记住,下面就是HTML 5的doctype:


还是很容易记住吧,而且也不区分大小写,与现在广泛使用的版本要简单得多了,而且保持了向后兼容。

语义结构

在深入标记前,我们先初略看一下一个Web页面的大致结构吧。



…stuff…

My Site

  • Home
  • About
  • Contact
  • My Article



    在上面的例子中,我为所有DIV标记增加了ID,相信大多数Web设计师都很熟悉这种做法了,这么做有两个目的,首先,ID提供了一个钩子,通过它可以对页面的特定部分应用样式,其次,ID作为一种原始的,伪语义结构,智能解析器将查找标签上的ID属性,并尝试猜测其含义,但这是一件很困难的事情,因为每个网站的ID可能都不一样。

    于是就有了增加新标签的想法,HTML 5的创造者们就设计了一些新的元素,下面我们就来看看HTML 5中新增的一些关键的结构性标记。

    这个标记计划用来描述一节或一个完整Web页面的介绍性信息,

    标记可以包括所有的通常放在页面头部的标志,如果你在页面中使用了,它将被

    取代。


    是不是更干净,更易于理解呢?我们可以把

    My Article

    打包到header标记中。另外请注意,我们可以在article元素下再增加一个footer元素,用来容纳如翻页导航,相关文章或其它内容。

    新标记的样式

    在大多数浏览器中,你只需要如往常一样对元素使用样式,但是请一定要对每个元素加上display:block;规则,随着时间的推移,浏览器对HTML 5新元素的支持越来越标准后,就可以不使用了。

    下面我们队header应用一些样式:

    header {
    display: block;
    font-size: 36px;
    font-weight: bold;
    }

    记住,你现在仍然可以在这些元素上添加class和ID属性,因此,如果你想对导航小节单独使用一个样式,你可以向下面这样增加一个class或ID属性:

     

    天才代写-代写联系方式