`
易水侠客
  • 浏览: 5273 次
  • 性别: Icon_minigender_1
  • 来自: 长春
最近访客 更多访客>>
社区版块
存档分类
最新评论

html5

 
阅读更多

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。

网络标准

HTML5本身是由W3C推荐出来的,它的开发是通过谷歌苹果诺基亚中国移动等几百家公司一起酝酿的技术,这个技术最大的好处在于它是一个公开的技术。换句话说,每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面,W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。

多设备、跨平台

用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台非常强大,也是大多数人对HTML5有兴趣的主要原因。
自适应网页设计
很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
2010年,Ethan Marcotte提出了”自适应网页设计“这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
这就解决了传统的一种局面——网站为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

即时更新

游戏客户端每次都要更新,很麻烦。可是更新HTML5游戏就好像更新页面一样,是马上的、即时的更新。
总结概括HTML5有以下优点:
1、提高可用性和改进用户的友好体验;
2、有几个新的标签,这将有助于开发人员定义重要的内容;
3、可以给站点带来更多的多媒体元素(视频和音频);
4、可以很好的替代FLASH和Silverlight;
5、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6、将被大量应用于移动应用程序和游戏。

盈利方案

第一个解决方案,现有的盈利模式可以移植到HTML5.今天游戏通过跟苹果App Store非常赚钱,其实HTML5的模式也可以通过封装把游戏放到App Store一样的分成赚钱。
第二个解决方案,HTML5游戏可以“傍着”平台,比方说Opera的游戏平台或其它浏览器的平台,以及所谓云游戏的游戏平台,都是新的盈利模式的平台。
第三个解决方案,在谈到HTML5游戏与原生应用的表现性能比时,开发者需要考虑清楚要做的究竟是怎样一款游戏,HTML5更适合轻量级的小游戏。而且HTML5在代码保密性方面并不弱于原生应用。

沿革

HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。
1、取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。
HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div
2、将内容和展示分离
b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。
3、一些全新的表单输入对象
包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。
4、全新的,更合理的Tag
多媒体对象将不再全部绑定在object或 embed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。
5、本地数据库
这个功能将内嵌一个本地的SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。
6、Canvas 对象
将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。
7、浏览器中的真正程序
将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。
8、Html5取代Flash在移动设备的地位。

重要标记

<video>[2]标记
定义和用法:
<video> 标签定义视频,比如电影片段或其他视频流
<audio> 标记
定义和用法
<audio> 标签定义声音,比如音乐或其他音频流
实例:
一段简单的HTML 5 音频
<audio src="someaudio.mp4">
您的浏览器不支持 audio 标签。
</audio>
<canvas> 标记
定义和用法:
<canvas> 标签定义图形,比如图表和其他图像。
HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实例:
通过 canvas 元素来显示一个红色的矩形:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
  1. fillStyle='#FF0000';
  2. fillRect(0,0,80,100);
</script>

程序接口

除了原先的DOM接口,HTML5增加了更多API,如:
1. 用于即时2D绘图的Canvas标签
2. 定时媒体回放
3. 离线数据库存储
5. 拖拽控制
6. 浏览历史管理

元素变化

新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput
元素的新属性:日期和时间,email, url。
新的通用属性:ping, charset, async
全域属性:id, tabindex, repeat。
移除元素:center, font, strike。

异常处理

HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比,HTML 5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

控件

就是Html标注的属性里加上runat="server"所构成的控件,至于Html标注和Html控件之间的区别很明显,Html控件是运行于服务器端,Html标注是运行于客户端。
基本Html控件有:HtmlTexAreakongjianHtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。
自定义的Html控件是根据自己的需求定义。当自主开发效率低,可以从技术社区、源码网站下载需要的控件。比如,需要插入table, image, links 等标签。不必自己开发,可以使用:ComponentOne Wijmo Editor等。
免费HTML5图表库
领先的.Net图表控件Chart FX深受大家喜爱,相信大家已经非常熟悉了。不过今天慧都从Chart FX的开发商SoftwareFX获得一个激动人心的消息:该公司近日推出一套为HTML5,jQuery和JavaScript开发者设计的图表库——jChartFX,而且jChartFX是免费的!

图表库

领先的.Net图表控件Chart FX深受大家喜爱,相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX!
jChartFX亮点:
  1. jChartFX充分利用了HTML5,CSS和SVG,让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。
  2. jChartFX拥有很多令人振奋的功能,它在无插件纯JavaScript的浏览器上运行,这意味着在提高了网站安全性和速度的同时,最大程度的减少了网站服务器的负荷。
  3. jChartFX还能够自动整合到jQuery UI ThemeRoller,自动读取并解释jQuery的主题和CSS文件,能够快速适应您的页面布局和设计,无需一行代码。
  4. jChartFX支持JSON,JSON能够帮助您实现,任何数据源中的数据都可以展现到图表中。
  5. jChartFX还支持超过40种的2D、3D图表类型,免费的图表控件中支持如此之多的图表展示类型实属难得。
分享到:
评论

相关推荐

    《HTML5开发精要与实例详解》配套源码

    此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔,内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点,几乎每个知识点都将配一个精心...

    HTML 5 Canvas基础教程 源码+PDF

    《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...

    简约左侧菜单HTML5全屏网站 html5响应式网站源码

    HTML5响应式网站(支持在线订单、手机版)以asp+access进行开发,前台采用html5响应式技术,使网站即可在电脑端进行访问,也可在手机端进行访问。 程序特色: 一:使搜索引擎更加容易抓取和索引 二:提供更多的功能,...

    从零学HTML5 精品教程(23G百度网盘)

    ===1:HTML5 优质视频教程集锦(赠送HTML 基础=== 01【赠 送】带你一周 HOLD 住 HTML + CSS 02【赠 送】最棒的 HTML DIV CSS 学习教程(含讲义源码) 03【高 清】HTML5 视频教程(含讲义源码) 04【苏 鹏】HTML5 ...

    html5shiv.js

    越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6,IE7,IE8。为了让所有网站浏览者都能正常的访问网站,解决方案就有下面两个: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同...

    [HTML5] HTML5 基础教程 英文版

    HTML5 is required knowledge for every professional web designer and developer This book will quickly get you up to speed with the fundamentals of HTML5 and give you the confidence to start ...

    [HTML5] HTML5 实战 英文版

    HTML5 in Action provides a complete introduction to web development using HTML5 You&quot;ll explore every aspect of the HTML5 specification through real world examples and code samples It&quot;s much ...

    HTML5+CSS3+jquery应用之美

    HTML5、CSS3与jQuery俨然成为了标准Web制作技术的黄金组合。《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设置样式、...

    Html 5 App 界面模板(HTML5模板)

    Html 5 App 界面模板Html 5 App 界面模板Html 5 App 界面模板

    html5调用相机

    html5调用相机

    HTML 5 参考手册

    HTML 5 参考手册 W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、...

    HTML5视频播放器美化

    HTML5视频播放器美化HTML5视频播放器美化HTML5视频播放器美化

    arm语音html5直接播放实现仿微信播放动画

    1.html5标签播放amr语音 &lt;audio src="http://xxxxxx/media/1.amr" id="media" width="1" height="1" preload=""&gt;&lt;/audio&gt; 2.修改封装weixinAudio.js 实现仿微信语音播放动画 3.项目集成ffmpeg for linux 后台直接...

    HTML5设计原理

    今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。 实际上,...

    使用HTML5技术制作在线PDF阅读器(附源码)

    这个技术原型主要用于在HTML5 平台上展示 PDF 文档,无需任何本地技术支持,但浏览器必须技持HTML5。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款HTML5跨平台一站式应用开发、调试...

    一个简单HTML5期末考核大作业,学生个人html静态网页制作代码

    HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...

    HTML5炫酷科技感十足数据可视化

    HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据...

    HTML5 in Action

    HTML5 in Action provides a complete introduction to web development using HTML5. You’ll explore every aspect of the HTML5 specification through real-world examples and code samples. It’s much more ...

    jQuery+html5实现的3D焦点轮播幻灯片(html5zoo.js html5zoo-slides).zip

    jQuery+html5实现的3D焦点轮播幻灯片(html5zoo.js html5zoo-slides) 两个演示可以参考

Global site tag (gtag.js) - Google Analytics