一、响应式设计
在HTML5真的要来改变移动开发平台之前,必须要迈出极为重要的一步,那就是“响应式设计”,也就是屏幕可以由相对应的内容而自动的去调整大小。然而响应式设计也是一件特别不容易去做到的事情,因为在当今的社会,各式各样设备的出现实在让诸多开发者眼花缭乱,手足无措。
如果你想要做好响应式的设计理念,那么就必须洞悉内容与屏幕之间的不同反馈关系,响应式设计是需要完全的离开“流”,这一过程还在不断的继续着,而HTML5技术会让它终成为可能。
二、Canvas 标记
Canvas 标记很多年前就被当作一个新的 HTML 标记成员加入到了 HTML5 标准中。在此之前,人们要想实现动态的网页应用,只能借助于第三方的插件,比如 Flash 或 Java,而引入了 Canvas 标记后,人们直接打通了通往神奇的动态应用网页的大门。本教程内容只覆盖了一小部分、但却是非常重要的 canvas 标记的应用功能图像显示和处理。
常见的在 canvas 上画图的方法是使用 Javascript Image 对象。所支持的来源图片格式依赖于浏览器的支持,然而,一些典型的图片格式(png,jpg,gif 等)基本上都没有问题。
图片可以从 DOM 中已经加载的元素中抓取,也可以按需即时创建。
// 抓取页面上已有的图片。
myImage = new Image ();
myImage.src = ‘image.png’;
大多数支持 canvas 标记的浏览器的当前版本中,当图片还没有加载完成时,如果你要去画它,结果是什么事情都不会发生。也就是说,如果你想画一个图片,你需要等它完全加载。你可以使用图片对象的 onload 函数来进行判断。
// Create an image.
myImage = new Image ();
myImage.onload = function () {
// Draw image.
myImage.src = ‘image.png’;
三、Html5新标签解释及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准
它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。
HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和 <spn>标签,但有一定含义,例如 (网站导航块)和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio> 和 <vodeo>标记。
一些过时的 HTML 4 标记将取消,其中包括纯粹用作显示效果的标记,如<font> 和<center>,因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为(via)。
下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。
<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>
<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容,但应与文档内容相关。</div>
<audio>标签定义声音,比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>
<canvas>标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
热点新闻
前端开发技术库