HTML5基础Word文件下载.docx

HTML5基础Word文件下载.docx

《HTML5基础Word文件下载.docx》由会员分享，可在线阅读，更多相关《HTML5基础Word文件下载.docx（56页珍藏版）》请在冰豆网上搜索。

6.更好的存储数据检索方式

7.加快了的页面保存和加载速度

8.对使用CSS3来管理GUI的支持，这意味着HTML5可以是面向内容的

9.改进了的浏览器表单处理

10.基于SQL的数据库API，其允许客户端的本地存储

11.画布和视频，可在无需安装第三方插件的情况下添加图形和视频

12.GeolocationAPI规范，其通过使用智能手机定位功能来纳入移动云服务和应用

13.增强型的表单，其降低了下载JavaScript代码的这种必要性，允许在移动设备和云服务之间进行更多高效的通信。

HTML5创建了一种更吸引用户的体验：

使用HTML5设计的页面能够提供类似于桌面应用的体验。

HTML5还通过把API功能和无处不在的浏览器结合起来的的方式提供了增强的多平台开发。

通过使用HTML5，开发者能够提供一种顺畅地跨越各个平台的现代应用体验。

当你说HTML5这个词的时候，你使用了一个简短的词来表达一种持续的创新。

新的标记、新的一套方法，以及一个基于HTML5和它的两个与之互为补充的同仁：

CSS3和JavaScript之间的相互作用的通用开发框架，这是以客户为中心的处理现象的应用的核心。

除了HTML5技术的技巧和方法的许多桌面部署之外，HTML5还可以在功能丰富的web移动电话浏览器中实施——移动电话浏览器是一个正在增长的市场，AppleiPhone、GoogleAndroid和运行PalmwebOS的手机的普及以至于无处不在就可以证明这一点。

HTML5的强大功能中很重要的一面是信息的映射——或说是内容块化（contentblocking）。

如果你愿意的话——这种做法会产生一种容易理解得多的处理过程。

你可以看到，通过日益增加对web处理这一领域的控制，这一工具在设计和开发方面已经变得多么的高效。

HTML5预示着这样一些情况的出现，即其在文本层面上有着更高效的语义处理，以及在表单构造和用法上有着更强大的控制。

所有的这些特性和HTML5创新的其他许多细微之处是这一越来越占统治地位的范式的基础。

许多机构实体，商业的和其他的——甚至许多根本不把信息的处理和通信作为他们的主要机构活动的组织——都不同程度地被这一不断增长的现象的发展所侵袭。

HTML5并不是一盏神灯，不会有精灵出现。

然而，它的技术和方法资产使得其成为了一件次好的东西，仅次于擦亮一盏神灯这件事情。

规划页面

你将要创建一个简单的web页面。

在这一过程中，我会讨论几个HTML5中引入的新标签。

为了创建一个高效的并且是有实效的web页面，你必须要制定一个计划，考虑一下想要打造的所有组件。

你创建的网页将会有如图1所示的高层设计，页面的设计包含了一个Header区、一个Navigation区、一个包含了三个Section区和一个Aside区的Article区，以及最后的一个Footer区。

该页面的设计目标是在Google的Chrome浏览器中工作，其消除了一些视觉上的混乱，这些混乱带来的是浏览器兼容问题的调整，同时也妨碍到了对基础结构的理解。

我们的目标是创建出一个清晰地描述了新的HTML5标签的用法的页面，展示如何使用它们来创建格式良好的代码和优雅的页面设计。

图1.AcmeUnited的网页的规划

在创建这一页面的过程中，我会涉及CSS3，我需要用它来正确地渲染HTML5网页。

CSS3对于HTML5页面的的风格、导航和一般观感来说是必不可少的，它的一些属性组，你可以在WsSchool的CSS3参考站点（参见参考资料一节）上找到这些属性，其中包括了一些很有用的元素，比如说background、font、marquee和animation等。

不过，在开始构造页面之前，你需要学习一些新的HTML5的标签。

Header区

Header区的例子包含了页面标题和副标题，<

header>

标签被用来创建页面的Header区的内容。

除了网页本身之外，<

标签还可以包含关于<

的公开信息。

这里创建的网页有该页面的一个Header区，这在高层设计中有给出，以及一个位于Article和Section区内部的Header区。

清单1提供了一个<

标签标记的例子。

清单1.<

标签的例子

<

h1>

标题文字<

/h1>

p>

文本或是图像可放在这里<

/p>

Logo通常也放在这个地方<

/header>

标签还可以包含一个<

hgroup>

标签，如清单2所示。

标签把标题分组放在一起，使用<

到<

h6>

这些标题分级来在此处显示主标题和子标题。

清单2.<

主标题<

h2>

子标题<

/h2>

/hgroup>

Navigation区

你可以使用<

nav>

标签来创建页面的Navigation区。

元素定义了一个专门用于导航的区域，<

标签应该用做主站点的导航，而不是用来放置被包含在页面的其他区域中的链接。

Navigation区可以包含诸如清单3所示的代码。

清单3.<

ul>

li>

ahref="

#"

kesrc="

>

Home<

/a>

/li>

AboutUs<

a>

OurProducts<

ContactUs<

/ul>

/nav>

Article和Section区

你设计的页面包含了一个Article区，该区域存放了页面的实际内容。

你使用<

标签来创建这一区域，该标签定义的内容可独立于页面中的其他内容使用。

例如，如果想创建一个RSS源（RSSfeed）的话，那么你可以使用<

来唯一标识该内容。

标签标识了可被删除、可被放置在另一上下文中，并且是可被完全理解的内容。

AcmeUnited规划中的Article区包含了三个Section区，可使用<

setction>

标签来创建这几个区域。

包含了web内容的相关组件区域，<

标签——以及<

标签——可以包含页眉、页脚，或是其他需要用来完成该部分内容的组件。

标签用于分组的内容，<

标签和<

标签通常以一个<

为开始并以一个<

footer>

结束，标签的内容则放在这两者之间。

标签也可以包含<

标签，就像<

标签可以包含<

标签一样。

标签应该用来分组相类似的信息，而<

标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。

标签，正如它的名称所暗示的那样，提供了一个完整的信息包。

相比之下，<

标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。

标签的用法例子请参见清单4。

清单4.<

Content

/section>

/article>

图像元素

标签这两者，以及<

标签都可以包含<

标签，你使用该标签来加入图像、图表和照片。

figcaption>

，该标签相应的包含了包含在<

标签中的图形的标题，其允许你输入描述，把图形和内容更加紧密的关联起来。

清单5提供了一个<

标签结构的例子。

清单5.<

imgsrc="

/figure.jpg"

width="

304"

height="

228"

alt="

Picture"

Captionforthefigure<

/figcaption>

/figure>

媒体元素

标签还可以包含各种媒体元素，HTML5提供的标签立刻就传达了其内容的意思。

媒体元素，比如说音乐和视频，以前只能嵌入，但现在能够被更精准地标识出来。

标签标识了声音内容，比如说音乐或是任何的其他音频流。

标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：

src、preload、control、loop和autoplay。

在清单6给出的例子中，只要页面一加载音频就开会播放，其会持续播放，所提供的控制可以让用户停止或是重新开始播放音频。

清单6.<

audiosrc="

MyFirstMusic.ogg"

controlsautoplayloop>

Yourbrowserdoesnotsupporttheaudiotag.

/audio>

标签允许你播放视频片段或是流化视觉媒体。

其拥有<

标签所有的属性，另外再加上三个：

poster、width和height。

当视频正在加载或是视频处于完全没有加载的糟糕情况中时，poster属性可让你找出一张图像来应付着先。

清单7提供了一个<

标签结构的例子

清单7.标签的例子

videosrc="

MyFirstMovie.ogg"

controls="

controls"

Yourbrowserdoesnotsupportthevideotag

/video>

source>

标签，该标签定义了<

标签的多媒体资源。

使用这一元素，你可以指定替代的视频或是音频文件，然后浏览器就可以基于它的媒体类型或是所支持的编解码器来从中进行选择。

清单8中有两种选择，如果文件的WMA版本不能在所使用的浏览器中播放的话，就再尝试MP3版本。

否则的话就显示信息，这样用户就知道为什么音频不可用了。

清单8.<

sourcesrc="

/music/good_enough.wma"

type="

audio/x-ms-wma"

/music/good_enough.mp3"

audio/mpeg"

YourbrowserdoesnotsupporttheHTML'

audio'

element.<

embed>

标签定义了可带入到页面中的嵌入式内容——例如，一个AdobeFlashSWF文件的插件。

清单9包含了type属性，标明嵌入的资源为Flash文件。

清单9.<

embedsrc="

MyFirstVideo.swf"

application/x-shockwave-flash"

/>

除了src和type属性之外，<

标签还拥有height和width属性。

Aside区

AcmeUnited规划中的Aside区可通过使用<

aside>

标签来创建。

这一标签被看作是用来存放补充内容的地方，这些内容不是其所补充的一篇连续文章的组成部分。

在杂志上，插入语（aside）通常被用来突出文章本身所制造的一个观点。

标签包含的内容可被删除，而这不会影响到包含了该内容的文章、章节或是页面所要传达的信息。

清单10提供了<

标签用法的一个例子。

清单10.<

MyfamilyandIvisitedEuroDisneylastyear.<

h4>

DisneyinFrance<

/h4>

BesidesEuroDisney,thereisaDisneylandinCalifornia.<

/aside>

Footer区

元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期。

作为页面的页脚，其有可能包含了版权或是其他重要的法律信息，如清单11所示。

清单11.<

标签的例子

Copyright2011AcmeUnited.Allrightsreserved.<

/footer>

构建页面

现在你已经了解了需要用来创建一个HTML5页面的基本标签，让我们开始构建你的页面。

你会为AcmeUnited构建一个网页，完成后的页面如图2所示，该页面可以下载供你使用（参见下载一节）。

图2.AcmeUnited的网页

那么，让我们把页面装配起来吧。

首先要处理的是这个<

!

doctype>

，在HTML5中，<

被简化了：

所有你需要记住就是html。

这不仅是简化了这一标签的条目，而还把它变得更适应未来的发展。

需要注意的是，它不是被称为html5，就只是html。

不管来来去去的有多少个HTML版本，<

可以一直都是html。

html>

标签包含了所有除了<

标签之外的其他HTML元素，其他的每一个元素都必须嵌套在<

/html>

标签之间，参见清单12。

清单12.<

doctypehtml>

htmllang="

en"

在指出了html和语言为英语之后，你就可以使用<

head>

元素，该元素可以包含脚本、浏览器支持信息、样式表链接、meta信息和其他的初始化函数。

你可以在head这一区域中使用这些标签：

1.<

base>

2.<

link>

3.<

meta>

4.<

script>

5.<

style>

6.<

title>

标签存放文档的实际标题，这是一个必需的<

区元素，它的内容就是你在浏览该页面时会在浏览器的顶端看到的标题。

清单13中的<

标签标识了会被用来渲染HTML5页面的CSS3样式表，样式表的文件名为main-stylesheet.css。

清单13.<

HTML5FundamentalsExample<

/title>

linkrel="

stylesheet"

href="

main-stylesheet.css"

/head>

接下来你会用到<

body>

标签，后面跟着<

标签，这已经在前面介绍过。

本例中的<

区域包含了虚构公司的名称：

AcmeUnited，<

区域包含了让你知晓副标题是“ASimpleHTML5Example”的信息，清单14显示了这一标记。

清单14.<

body>

AcmeUnited<

ASimpleHTML5Example<

到目前为止，被用来设置页面的CSS3如清单15所示。

首先，你建立页面的字体，然后量身定做页面的主体，明确主体的维度，然后设计header段结构的第一级和第二级标题标签，这些是你要给页面使用的header。

清单15.CSS3例子1

*{

font-family:

LucidaSans,Arial,Helvetica,sans-serif;

}

body{

width:

800px;

margin:

0emauto;

headerh1{

font-size:

50px;

0px;

color:

#006;

headerh2{

15px;

#99f;

font-style:

italic;

}

清单16展示了<

标签，其目的是处理主站点的导航。

清单16.<

例子

HTML5还有一个<

menu>

标签——一个给一些设计者和开发者带来混乱的标签。

这一混乱源于导航条通常被称为“导航菜单”。

标签在HTML的4.01版本中被弃用，但在HTML5中又死里复生，目的是用来增强交互性。

它不应该用来做主导航。

唯一应该用来做主导航的标签是<

标签，你迟一些就会在本例中用到<

导航的格式化问题由CSS3来处理。

清单17中给出的每个<

标签的定义都代表了<

标签内的<

元素的一个特定状态。

清单17.CSS3例子2

navul{

list-style:

none;

padding:

display:

block;

clear:

right;

background-color:

padding-left:

4px;

height:

24px;

navulli{

inline;

0px20px5px10px;

border-right:

1pxsolid#ccc;

navullia{

text-decoration:

13px;

font-weight:

bold;

navullia:

hover{

#fff;

接下来是Article区，这一区域由<

标签来定义，其中包括了其自己的<

信息。

包含在<

中的<

也包含了一个自己的的<

标签，参见清单18。

清单18.<

的例子

title="

Linktothispost"

rel="

bookmark"

ArticleHeading<

PrimumnonnocereadvitamParamus...<

Thisisthefirstsectionheading<

Scientiapotentiaestquanocentdocentp...<

清单19展示了渲染这一格式的CSS3标记，可以注意到，段落、header和section区的定义都定义在包含了它们的<

标签上。

这里定义的<

标签和页面级别定义的<

标签有着不同的格式。

清单19.CSS3例子3

article>

heade