html5基础

1、HTML5 基础基础HTML5 是一种设计来组织 web 内容的语言，其目的是通过创建一种标准的和直观的 UI 标记语言来把 web 设计和开发变得容易起来。HTML5 提供了各种切割和划分页面的手段，其允许你创建的切割组件不仅能用来逻辑地组织站点，而且能够赋予网站聚合的能力。 HTML5 可谓是“信息到网站设计的映射方法”，因为它体现了信息映射的本质，划分信息，并给信息加上标签，使其变得容易使用和理解。这是 HTML5 富于表现力的语义和实用性美学的基础，HTML5 赋予设计者和开发者各种层面的能力来向外发布各式各样的内容，从简单的文本内容到丰富的、交互式的多媒体无不包括在内。HTML5 提供了高效的数据管理、绘制、视频和音频工具，其促进了 web 上的和便携式设备的跨浏览器应用的开发。HTML5 是驱动移动云计算服务方面的发展的技术之一，因为其允许更大的灵活性，支持开发非常精彩的交互式网站。其还引入了新的标签（tag）和增强性的功能，其中包括了一个优雅的结构、表单的控制、API、多媒体、数据库支持和显著提升的处理速度等。HTML5 中的新标签都是能高度关联唤起的，标签封装了它们的作

2、用和用法。HTML 的过去版本更多的是使用非描述性的标签，然而，HTML5 拥有高度描述性的、直观的标签，其提供了丰富的能够立刻让人识别出内容的内容标签。例如，被频繁使用的标签已经有了两个增补进来的和标签。 、和 标签的增加也提供了对特定类型内容的更加精确的描述。HTML5 提供了：1. 确切描述了其旨在要包含的内容的标签2. 增强的网络通信3. 极大改善了的常用存储4. 运行后台进程的 Web Worker5. 在本地应用和服务器之间建立持续连接的 WebSocket 接口6. 更好的存储数据检索方式7. 加快了的页面保存和加载速度8. 对使用 CSS3 来管理 GUI 的支持，这意味着 HTML5 可以是面向内容的9. 改进了的浏览器表单处理10. 基于 SQL 的数据库 API，其允许客户端的本地存储11. 画布和视频，可在无需安装第三方插件的情况下添加图形和视频12. Geolocation API 规范，其通过使用智能手机定位功能来纳入移动云服务和应用13. 增强型的表单，其降低了下载 JavaScript 代码的这种必要性，允许在移动设备和云服务之间进行更多高效的通信。 H

3、TML5 创建了一种更吸引用户的体验：使用 HTML5 设计的页面能够提供类似于桌面应用的体验。HTML5 还通过把 API 功能和无处不在的浏览器结合起来的的方式提供了增强的多平台开发。通过使用 HTML5，开发者能够提供一种顺畅地跨越各个平台的现代应用体验。当你说 HTML5 这个词的时候，你使用了一个简短的词来表达一种持续的创新。新的标记、新的一套方法，以及一个基于 HTML5 和它的两个与之互为补充的同仁：CSS3 和JavaScript 之间的相互作用的通用开发框架，这是以客户为中心的处理现象的应用的核心。除了 HTML5 技术的技巧和方法的许多桌面部署之外，HTML5 还可以在功能丰富的 web移动电话浏览器中实施移动电话浏览器是一个正在增长的市场，Apple iPhone、Google Android 和运行 Palm webOS 的手机的普及以至于无处不在就可以证明这一点。HTML5 的强大功能中很重要的一面是信息的映射或说是内容块化（content blocking）。如果你愿意的话这种做法会产生一种容易理解得多的处理过程。你可以看到，通过日益增加对 web 处理这一

4、领域的控制，这一工具在设计和开发方面已经变得多么的高效。HTML5 预示着这样一些情况的出现，即其在文本层面上有着更高效的语义处理，以及在表单构造和用法上有着更强大的控制。所有的这些特性和 HTML5 创新的其他许多细微之处是这一越来越占统治地位的范式的基础。许多机构实体，商业的和其他的甚至许多根本不把信息的处理和通信作为他们的主要机构活动的组织都不同程度地被这一不断增长的现象的发展所侵袭。HTML5 并不是一盏神灯，不会有精灵出现。然而，它的技术和方法资产使得其成为了一件次好的东西，仅次于擦亮一盏神灯这件事情。规划页面你将要创建一个简单的 web 页面。在这一过程中，我会讨论几个 HTML5 中引入的新标签。为了创建一个高效的并且是有实效的 web 页面，你必须要制定一个计划，考虑一下想要打造的所有组件。你创建的网页将会有如图 1 所示的高层设计，页面的设计包含了一个Header 区、一个 Navigation 区、一个包含了三个 Section 区和一个 Aside 区的 Article区，以及最后的一个 Footer 区。该页面的设计目标是在 Google 的 Chrome 浏览

5、器中工作，其消除了一些视觉上的混乱，这些混乱带来的是浏览器兼容问题的调整，同时也妨碍到了对基础结构的理解。我们的目标是创建出一个清晰地描述了新的 HTML5 标签的用法的页面，展示如何使用它们来创建格式良好的代码和优雅的页面设计。图 1. Acme United 的网页的规划在创建这一页面的过程中，我会涉及 CSS3，我需要用它来正确地渲染 HTML5 网页。CSS3 对于 HTML5 页面的的风格、导航和一般观感来说是必不可少的，它的一些属性组，你可以在 WsSchool 的 CSS3 参考站点（参见参考资料一节）上找到这些属性，其中包括了一些很有用的元素，比如说 background、font、marquee 和 animation 等。不过，在开始构造页面之前，你需要学习一些新的 HTML5 的标签。Header 区Header 区的例子包含了页面标题和副标题，标签被用来创建页面的 Header区的内容。除了网页本身之外，标签还可以包含关于和的公开信息。这里创建的网页有该页面的一个 Header 区，这在高层设计中有给出，以及一个位于 Article 和 Section 区内部的

6、 Header 区。清单 1 提供了一个标签标记的例子。清单 1. 标签的例子标题文字文本或是图像可放在这里Logo 通常也放在这个地方标签还可以包含一个标签，如清单 2 所示。标签把标题分组放在一起，使用到这些标题分级来在此处显示主标题和子标题。清单 2. 标签的例子主标题子标题 文本或是图像可放在这里Navigation 区你可以使用标签来创建页面的 Navigation 区。元素定义了一个专门用于导航的区域，标签应该用做主站点的导航，而不是用来放置被包含在页面的其他区域中的链接。Navigation 区可以包含诸如清单 3 所示的代码。清单 3. 标签的例子HomeAbout UsOur ProductsContact UsArticle 和 Section 区你设计的页面包含了一个 Article 区，该区域存放了页面的实际内容。你使用标签来创建这一区域，该标签定义的内容可独立于页面中的其他内容使用。例如，如果想创建一个 RSS 源（RSS feed）的话，那么你可以使用来唯一标识该内容。标签标识了可被删除、可被放置在另一上下文中，并且是可被完全理解的内容。Acme Unite

7、d 规划中的 Article 区包含了三个 Section 区，可使用标签来创建这几个区域。包含了 web 内容的相关组件区域，标签以及标签可以包含页眉、页脚，或是其他需要用来完成该部分内容的组件。标签用于分组的内容，标签和标签通常以一个为开始并以一个结束，标签的内容则放在这两者之间。标签也可以包含标签，就像标签可以包含标签一样。标签应该用来分组相类似的信息，而标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。和标签的用法例子请参见清单 4。清单 4. 标签和标签的例子ContentContentContentContent图像元素和标签这两者，以及和标签都可以包含标签，你使用该标签来加入图像、图表和照片。标签可以包含，该标签相应的包含了包含在标签中的图形的标题，其允许你输入描述，把图形和内容更加紧密的关联起来。清单 5 提供了一个和标签结构的例子。清

8、单 5. 和标签的例子Caption for the figure媒体元素和标签还可以包含各种媒体元素，HTML5 提供的标签立刻就传达了其内容的意思。媒体元素，比如说音乐和视频，以前只能嵌入，但现在能够被更精准地标识出来。标签标识了声音内容，比如说音乐或是任何的其他音频流。标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况，这些属性分别是：src、preload、control、loop 和 autoplay。在清单 6 给出的例子中，只要页面一加载音频就开会播放，其会持续播放，所提供的控制可以让用户停止或是重新开始播放音频。清单 6. 标签的例子Your browser does not support the audio tag.标签允许你播放视频片段或是流化视觉媒体。其拥有标签所有的属性，另外再加上三个：poster、width 和 height。当视频正在加载或是视频处于完全没有加载的糟糕情况中时，poster 属性可让你找出一张图像来应付着先。清单 7 提供了一个标签结构的例子清单 7. 标签的例子Your browser does not support th

9、e video tag和标签可以包含标签，该标签定义了和标签的多媒体资源。使用这一元素，你可以指定替代的视频或是音频文件，然后浏览器就可以基于它的媒体类型或是所支持的编解码器来从中进行选择。清单 8 中有两种选择，如果文件的 WMA 版本不能在所使用的浏览器中播放的话，就再尝试 MP3 版本。否则的话就显示信息，这样用户就知道为什么音频不可用了。清单 8. 标签的例子Your browser does not support the HTML audio element.标签定义了可带入到页面中的嵌入式内容例如， 一个 Adobe Flash SWF文件的插件。清单 9 包含了 type 属性，标明嵌入的资源为 Flash 文件。清单 9. 标签的例子除了 src 和 type 属性之外，标签还拥有 height 和 width 属性。Aside 区Acme United 规划中的 Aside 区可通过使用标签来创建。这一标签被看作是用来存放补充内容的地方，这些内容不是其所补充的一篇连续文章的组成部分。在杂志上，插入语（aside）通常被用来突出文章本身所制造的一个观点。标签包含的内容可被删除，而这不会影响到包含了该内容的文章、章节或是页面所要传达的信息。清单 10 提供了标签用法的一个例子。清单 10. 标签的例子My family and I visited Euro Disney last year.Disney in FranceBesides Euro Disney, there is a Disneyland in California.Footer 区元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或是其他重要的法律信息，如清单 11 所示。清单 11. 标签的例子Copyright 2011 Acme United. All rights reserved.构建页面现在你已经了解了需要用来创建一个 HTML5 页面的基本标签，让我们开始构建你的页面。你会为 Acme United 构建一个网页，完成后的页面如图 2 所示，该页面可以下载供你使用（参见下载一节）。图 2. Acme United 的网页那么，让我们把页面装配起来吧。首先要处理的是这个，在 H

《html5基础》由会员m****分享，可在线阅读，更多相关《html5基础》请在金锄头文库上搜索。