18新利最新登入HTML5是如何工作的

本身HTML侧重于提供静态文件,意义的文本、链接和其他小。通过HTML 4, HTML标准是在相同的HTML语法用来实现这一目标。HTML5标准有更广泛的目标描述的内容、样式和应用程序接口背后的web页面在浏览器中加载的时候。更具体地说,HTML5建立一个单一的语法与网页的所有元素的相互作用,已经加载到您的计算机的内存。

有一个潜在的混乱我们应该澄清术语“HTML5”之前,我们继续。有一个新版本的标记语言本身称为HTML5。18新利最新登入然而,语言只是一个更广泛的标准的一部分,HTML5的名称。本文涵盖的所有组件的HTML5标准,HTML5的语言是核心。

带着这样的区别,如何根据新的HTML5浏览器加载一个页面写的标18新利最新登入准,而不是长期的HTML 4语言吗?毕竟,我们通常只依靠浏览器加载web页面,而不必担心他们背后的HTML。答案很简单:只要浏览器本身可以支持HTML5,它可以处理任何你扔它,而不需要区分HTML版本。

这个神奇的发生,HTML5标准集成多种技术合作的新版本向共同的目标。这些目标包括以下:

现在你知道了HTML5是比HTML标记本身,让我们检查基础技术标准。

一种标记语言使用一系列的标签标记元素在一个文件中。标记依赖于某种形式的模型,定义了这些元素是什么以及如何使用它们。18新利最新登入HTML一直以来对编码文档,它依赖于一个叫做文档对象模型(DOM)。DOM是包含在web浏览器应用程序本身。因此,标记语言只是一种让浏览器说明基于模型,它已经理解。

为了更好地理解DOM和HTML的关系,认为DOM是一盒橡皮图章。DOM中的每个邮票都是一个不同的元素。每一页写在HTML仅仅是一系列的痕迹从邮票,填写您自己的自定义内容。web浏览器可以显示任何创建的那个盒子里的邮票。

技术上来说,DOM是一个应用程序编程接口(API)提供一个平台无关的方式来处理HTML或XML文档。或XML(可扩展标记语言,类似于HTML,但是它可以让程序员添加一个自定义的一组元素可以使用文档中)。HTML5标准要求被称为DOM5 HTML DOM。准备HTML5的增长,最新版本的铬,火狐、IE、Safari和Opera浏览器都可以处理下DOM5 HTML页面。

HTML5的另一个重要基础是相关的多用途Internet邮件扩展(MIME)类型。MIME是一个互联网工程任务组(IETF)标准提醒上网软件什么类型的内容的尝试过程。这通常对应于一个特定类型的文件,如HTML文档或MP3音频文件。

Web开发人员编码一个Web页面时指定MIME类型。这提示浏览器加载相应的文件适当的根据他们的类型。有两个MIME类型加入DOM5 HTML的基础,形成新的HTML5标准:HTML MIME类型text / HTML和XML MIME类型(application / xhtml + XML)。HTML5包括更新这两个MIME类型的语法。

简而言之,HTML5的基本技术标准DOM5 HTML和HTML5语言HTML和XML MIME类型。接下来,让我们看看如何使用HTML5 web页18新利最新登入面。

至少,HTML5包含版本5的基本HTML语法。示例代码在这个页面侧边栏显示了这一个基本的web页面的HTML代码的样子。18新利最新登入当你浏览网页时,使用“查看源代码”或类似的选项在您的浏览器中查看HTML(和其他代码)来创建你当前查看的页面加载。所有我们的示例中所示的代码也向后兼18新利最新登入容HTML 4,也就是说,它没有任何新增加的HTML5。

虽然它不是出现在所有网页,它是一个很好的实践开始您的HTML文件,文档类型(doctype)声明的示例所示。18新利最新登入这证实了浏览器解释时应期望标准的HTML文档。一些开发人员依赖扩展HTML标准,使用文档类型定义(DTD)文件。如果是这样的话,开发人员指定的位置DTD作为doctype的一部分。

除了doctype,剩下的代码例子是标准的HTML语法。如果你不熟悉这个语法,看到我们的文章18新利最新登入Web页面是如何工作的。

所以,HTML5新这些基本元素是什么?这是名单,我们将仔细看看下面几页。

尽管形式(部分的网站,用户可以输入特定的数据,如姓名、地址、等)是最早可以在HTML元素的一部分,他们缺乏HTML5之前许多有用的功能。为了弥补这个问题,第三方开发者创建的web表单软件,使基本的HTML表单看起来几乎过时了。HTML5为形式,注入了新的活力,新的表单元素,输入类型为现有的元素和属性。

没有区分新旧语法,让我们检查一下整个方法创建web页面使用HTML5的形式。这里有些建议步骤开始:

检查一个最新的HTML5参考指南的表单元素及其属性的完整列表。同时,注意对之间的一些表单字段不同web浏览器的支持。一定要测试表单在每种类型的浏览器中你想让你的网站的支持。

虽然HTML表单元素有更多的功能在版本5中,下一个元素类型是完全新的HTML5。

HTML5的语义元素,正如它们的名字所暗示的那样,那些是指某些内容的意义。只是使用<身体>标记还不够,因为今天大多数网站包含多个不同类型的内容在一个页面。web开发人员需要使用单独的规则为每个类型的内容应该如何或行为。18新利最新登入

没有语义元素,web开发人员使用< div >和< span >元素来确定块的内容,将每一个与一个特定的类属性。每个类可以与特定的使用CSS样式相关联或特定行为使用脚本。

随着时间的推移,某些网站内容类型变得非常常见,如页眉、页脚、菜单和导航点。通过添加标准语义元素HTML5包含这些。这意味着您可以你的<身体>块分解成有用的语义元素,而不是一系列的< div >和< span >标签。

下面是语义的列表页面元素与一个简短的定义。一定要找到一个HTML5参考你可以信任有效属性的完整列表为每个语义元素和子元素。

块元素:

内联元素:

语义元素被创建为一个进步更一般的HTML元素。下一个新的元素类型,目标是全面替代第三方媒体扩展web浏览器。

最热门的HTML5的特点之一是它的新方法嵌入媒体上网页。我们会看看一些神奇的在本文后面这个HTML5特性的应用。HTML5嵌入无需外部浏览器插件来做到这一点。以下是媒体元素HTML5中可用:

随着HTML5的发展,市场专家质疑是否会取代Flash,目前由Adobe控制。Flash是一个媒体播放器,你可以作为一个插件添加到web浏览器。因为Flash网站所需的所有特性嵌入不同类型的媒体,YouTube等网站多年来一直依赖它。甚至有一些web应用程序完全依赖Flash权力互动的接口。2007年Flash应用是如此广泛,备受期待的苹果iPhone的发布,听到它的许多消费者感到不满操作系统,苹果iOS,不支持Flash。

当谷歌,可以说是最大的品牌在互联网上,鸽子艰难发展与HTML5应用程序,Flash的支持者们的注意。HTML5之前,唯一的威胁Flash的主导地位是web应用程序开发人员愿意建立和维护自定义HTML / JavaScript的替代品。HTML5,这样繁琐的定制时不再需要创建一个互动媒体经验的对手Flash技术。

所以,谁会赢得:Flash或HTML5吗?简短的回答是,“没有。”Each technology has its own features, advantages and drawbacks. In addition, Adobe and Google have worked on Flash to HTML5 conversion tools. At the time of this writing, it seems that though HTML5 is gaining status, Flash is likely to retain its own popularity for a while, too.

闪到下一个页面,我们将打破画布元素和如何使用HTML5 web页面。18新利最新登入

HTML5的一个最重要的新特性是画布上。画布特性允许您识别的部分网页,画的内容并添加互动功能。这都是有可能的,通过HTML和的组合JavaScript代码。让我们看一下三个部分你需要建立一个HTML5画布上:

第1部分:使用<帆布>标记目标你的电脑屏幕上的一个矩形部分新画布窗口。您可以指定高度和宽度的画布,测量从左上角。帆布的身份属性(id)是很重要的,因为你需要它来匹配相应的JavaScript代码。下面是一个使用HTML5 canvas标签的示例代码:

<帆布id = " sampleCanvas "

宽度= " 400 "

身高= " 300 >

如果你看到这段文字,你的浏览器

没有HTML5 canvas支持。

< /帆布>

第2部分:创建JavaScript内容吸引到画布上。之后,我们会发现如何添加和管理相关的Java18新利最新登入Script代码一个HTML5 web页面。在这里,我们来看看一些示例JavaScript可以使用画布对象。下面的代码在画布上绘制一个矩形上图:

函数drawRectangle () {

var targetCanvas = . getelementbyid (“sampleCanvas”);

var rectContext = sampleCanvas.getContext (2 d);

rectContext。fillStyle =“蓝色”;

rectContext。fillRect(50, 25岁,150年,100年);

}

这个函数将一个坚实的蓝色矩形在画布上。这两个“var”行创建变量可以使用。第一个(targetCanvas)标识画布元素你目标使用的ID的HTML。第二个(rectContext)建立了一个二维绘图上下文。认为上下文是一个清晰的玻璃层铺设的画布,可以调用函数利用玻璃。

“fillStyle”线标识蓝色的名字,HTML的认可和同事的一个名叫颜色。您还可以使用任何颜色、图案或梯度时你会写作风格在HTML或CSS代码。“fillRect”线的绘制矩形的左上角的偏移量开始,前两个数字的x和y画布的补偿,好像左上角坐标(0,0)。第二个两个数字表明矩形的宽度和高度,分别。

第3部分:从HTML代码调用JavaScript函数。这两块连接在一起的关系。你可以调用这个函数一旦web页面加载,这是有道理的,如果你使用帆布画互动页面内容,需要尽快出现页面加载。另一种选择是创建一个按钮,菜单或其他元素的HTML,触发事件。下面是一个例子,一个按钮,你可以使用上面的示例脚本运行:

<按钮类型=“按钮”

onclick = " drawRectangle () " >

(单击这里查看图。

< /按钮>

深入HTML5有一个浅显易懂的指南为您的web页面创建画布元素。此外,一个可靠的HTML5参考应该提供大量的资源用于绘制复杂图形,仍然和移动。如果你想充分利用HTML5画布,您将需要舒适的JavaScript编程。接下来,让我们来探讨CSS3创建一个HT18新利最新登入ML5 web页面的外观和感觉。

每个HTML元素有许多属性使用在代码中修改该元素的外观或功能。风格和相关属性调整大小、颜色、位置、边界和其他元素的物理方面。多年来网络的寿命,站点开发人员广泛采用的实践从内容中分离的风格。通过这种分离,开发人员享受下列优势:

因此,虽然样式可以放在HTML代码,web开发人员的更受欢迎的选择是使用层叠样式表(CSS)来管理所有与网站相关的样式代码。每个页面的HTML可以引用一个或多个样式表,哪些浏览器页面加载时加载。这些样式表,CSS文件的形式,目的是模仿你可能进入使用<时尚> <头>块在HTML标签。

而指导写作和使用CSS已经超出了本文的范围,一定要抓住自己的一个全面的参考CSS3的副本。以下是总结你可做的事情HTML5和CSS3补充标准:

注意,虽然大多数主流浏览器支持的大多数物品在上面的列表中,一些浏览器还没有完全实现这些CSS3特性。与HTML5,一定要测试你的CSS代码在每个浏览器你想让你的网站的支持。接下来,让我们看看的核心技术帮助实现HTML5的目标:JavaScript。

JavaScript是一种专门为web设计的语言。用JavaScript编写函数和引用对象的语法类似于Java和其他面向对象的语言。相似的结束。JavaScript不编译创建一个可执行文件。相反,JavaScript的web页面在您的web浏览器中加载页面加载时,和JavaScript函数被称为基于交互与页面。

您可以编写HTML代码中的JavaScript代码使用标签,类似于使用内联CSS的<时尚>标签。18新利最新登入然而,与CSS样式一样,脚本代码的最佳实践是把它放在一个单独的HTML文件和引用文件。这也给你加载脚本的灵活性只有浏览器满足特定的要求。也在HTML5, web浏览器将缓存JavaScript和其他文件,支持一个web页面,这个页面将在脱机模式下正常工作,。

下面是一个例子,其中包括一个JavaScript文件命名为“的例子。js”,这是在一个脚本目录的引用网页高一个档次:

<脚本语言= " javascript " type = " text / javascript”

src = " . . /脚本/ example.js " > < /脚本>

与HTML和CSS、JavaScript基本超出了本文的范围,你应该挑选一个好的程序时参考使用。一定的参考包括JavaScript HTML5所以你不要错过这些HTML5增强:

到目前为止,我们看到的客户端部分HTML5。换句话说,我们看过的web浏览器下载代码互联网在您的本地计算机上和过程。HTML5标准也达到连接的另一边,虽然。接下来,让我们看看HTML5背后的服务器端技术。

早些时候,我们认为HTML5是接近web内容不作为一组文件,但作为一个网络的web应用程序。因此,您的浏览器不只是一个地方处理您下载的内容。这也是一个额外的软件驻留在远程门户web服务器。HTML5标准中,这个远程软件始终可用于支持交互式的web体验。

所以我们谈论什么样的软件?两个广泛使用的例子是超文本预处理器(PHP)和Active Server Pages (ASP)。这些web开发语言组装内容从服务器端需求。例如,当您回答调查问题在网站上,并返回一个图形显示选票分布,可能有一些PHP页面上的工作。18新利最新登入你不会看到PHP和ASP代码本身,即使你把一个页面的来源。相反,在默认情况下,您只会看到动态HTML和组装JavaScript由服务器之前加载到您的浏览器窗口。

另一个可以支持HTML5 web页面的服务器端技术是数据库软件。例如,MySQL和Oracle都可以存储和管理大量的数据从未经授权的查询和保持安全。一个web应用程序可以根据需要接受凭证并访问该数据,响应查询和允许应用程序检索请求的信息。18luck手机登录

网络的灵活性和HTML5技术的不断扩张的特性,可能更多的web应用程序将调用服务器端软件的支持。越来越多的云计算领域已经取决于这个客户机-服务器通过网络的关系。HTML5是准备好适应这种关系从客户端。

既然我们已经看了HTML5背后的技术方面,让我们看一些高调的HTML5应用程序帮助建立自己的声誉。

概念验证演示,一项新技术可以在实际履行其声称,真实世界的应用程序。当你读到目前为止,HTML5本身是一个修改的应用程序编程接口(api)和标准使用它们。HTML5,产品的概念证明通过演示使用技术。

今天,有许多在HTML5游戏编程,但是他们通常不会炫耀一切HTML5可以做一个网站。18新利最新登入与谷歌率先采用HTML5,发表一些有趣的游行示威的HTML5可以做什么Chrome网络浏览器。你可以找到这些的Chrome的实验网站。

在最热门的示威活动之一,早在2010年8月,乐队Arcade Fire联手谷歌生产交互式音乐视频体验“市中心的旷野启动应用程序,输入你的童年的家的地址。它把输入后,点击启动多个窗口视频体验。轮廓的视频包含了地理定位图像覆盖鸟飞开销和一个人逃到大街上。

2011年7月,乐队OK Go与创新合作表演艺术舞蹈团Pilobolus剧团的HTML5铬实验称为“所有不是失去的视频舞蹈使者。”Similar to the Arcade Fire video, you start by entering some text and letting the application process that input. Then, when you launch the app, the HTML5 code draws and resizes multiple windows on your screen as it displays portions of the video in each one. Eventually, the message you entered at the beginning is spelled out with dancers' feet, filmed from underneath a glass floor.

对于典型的网站你访问,你可能不会知道这是一个HTML5的网站,除非它告诉你。不过,有一件事是肯定的:网页设计师能够把艺术提高到一个新的水平,由于HTML5画布等功能。设计人员和开发人员都应该看到HTML5作为基本技术掌握在未来几年。

在本文中,我们已经发现了HTML5的组件以及它们如何一起工作来创建web的杰作。18新利最新登入我们还瞥见一些创新的HTML5创作炫耀它的多功能性。18新利最新登入关于HTML5的更多,包括网络资源的链接可以引用在开发HTML5,继续阅读。