整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

什么是HTML5?

tml5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言( HTML)的第五次重大修改,2014年10月29日, 万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性等。

HTML5赋予 网页更好的意义和结构。更加丰富的标签将随着对 RDFa的,微数据与 微格式等方面的支持,构建对程序、对用户都更有价值的数据 驱动的Web。

本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页 APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和 API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从 Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与 应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

连接特性(Class: CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页 多媒体 特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

性能与集成特性(Class: Performance & Integration)

没有用户会永远等待你的Loading——HTML5会通过 XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下, CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式( WOFF)也提供了更高的灵活性和控制性。

关于沿革

HTML5提供了一些新的元素和属性,例如

(网站导航块)和

。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如

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在移动设备的地位。

9、其突出的特点就是强化了web页的表现性,追加了本地数据库,

我还在南方小岛上玩儿的时候,一个朋友给我发了条语音信息(早上发的,我晚上才听,我让你发语音)大概是说,能不能帮忙联系一个会 HTML5 的团队,领导要求做一个 HTML5 的活动页面。

看来 HTML5 的浪潮又要让我们的广告客户浑身湿透了。他们想要华丽的页面,想要让用户觉得他们很酷。事实上,即使他们只做了一张很廉价的“活动邀请函”页面,用户也觉得好棒好厉害。真相是,大部分用户并不知道其中的奥秘。

HTML5是针对超文本语言HTML的第五次修订。具体HTML是什么?我们先笼统地认为它是一种用来创建网页的手段就好。不过你不是科技从业者,也不是什么都要懂一点的极客。你会想:什么html、Input type=date、js线程、socket、标准扩展embed、css3……这些都是什么鬼我根本不想知道快扔走!

这一切并不在你学习的范围内。你只关心这样一个问题:它会为你的生活带来怎样的变化?

❶ 你手机里的原生APP会变少。

原生APP,就是你到应用商店里选一个应用、等待下载、确认权限、等待安装,然后点击打开的那种移动应用,它专门针对某一类移动操作系统生成,必须被完整安装到手机里。而有一种“假”APP,它们打开后基本利用手机中的浏览器来运行,而且不需要下载后安装,就能立即在手机界面中生成一个APP图标——HTML5就是生产这种“假”APP的利器。比如你玩《神经猫》就不需要下载一个APP,而这个游戏正是用HTML5网页实现的。

❷ 你那个当程序员的男朋友(如果你有)就可以早点下班回家了。

HTML5是唯一一个通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平台的跨平台语言。因为这种跨平台的便利,程序员们只需要为之开发一种类别的产品——说白了就是一个万能的网页。他再也不需要做一款只能在苹果手机上运行的APP后,再做一款也可以在三星、小米上使用的APP。

❸ 你的手机里没有Flash了。

如果需要一个能够集中展示视频、音频等各种媒体形式的插件,那就是Flash。这个部署在亿万浏览器里的商业插件俨然成为事实上的网页标准。但是,HTML5把这个标准打破了,这些媒体形式不再需要Flash这一插件就能分布在网页当中。HTML5可以让我们不借助第三方插件实现多媒体。

❹ 正因为你的系统需要运行的第三方插件变少,浏览器占用的系统资源相对也会变少,有可能你会发现自己的手机电量变得更持久了。

❺ 当你使用定位服务的时候,不用点“搜索”了,直接点“附近”。

这是因为HTML5更好地实现了基于地理位置的功能,在从前那些使用旧语言编辑的网页上,LBS(基于位置的服务)没有获得很好的支持,所以你需要在网页上依次选择全国、北京、朝阳区、大望路……

❻ 网页更美观。

对网页设计师来说,HTML5重新定义了很多设计标准,这使得他们在工作的时候遵循着更加科学的方法,再加上HTML5可以让我们不借助第三方插件实现多媒体,网页设计师得以发挥他们的创造力,你会看到更加酷炫的网页界面。

视觉,这是最重要的。对用户来说,没有什么比直接的体验更能说明某种技术为世界带来的改变。现在我用几个腾讯新闻的手机页面来举例,和你在微信朋友圈看到的那些蹩脚的邀请函、抽奖页面相比,这些页面尝试用一种更有意思、更流畅的方式来讲述事件。

APEC期间推出的《服装秀》,截取的三个界面。在这个应用中,新闻相关的人物将会变成试衣模特。例如你可以选择奥巴马当你的模特,然后给他换上各种服装。

上图《再见2元的风景》是针对北京地铁票价调整制作的新闻专题页。这个流传甚广的煽情专题,也是一个HTML5页面,它提供了一种流畅的图片浏览方式。

HTML5 同样为网页提供了更多交互的可能,比如你可以在同一个页面中完成一个网页调查,然后直接分享给你的朋友圈好友。

总之,HTML5 可以更有效地组织互联网中的信息,并让视频、音频等服务得到更好的支持;并在减轻开发者的负担的同时,让用户在不同的平台上有更一致的体验。

没有炫耀的意思,这些内容出于个人对HTML5的好奇,导致我多看了一些材料,并且咨询了行业的专家。大致上,我能保证这些内容都是可信的,对普通人而言,这些已经足够:甲方或者乙方们再也不会轻易骗走你的巨额预算。

“你知道那你说啊。”

乌云装扮者包含了世界、黑色趣味和明亮内心

微信号及新浪微博@DACLODS

午外面起风了,北方的冬天说来就来,好在小白的办公室是阳面,还算暖和。处理完手头工作后,小白找到了老朱,正式开始学习。

老朱:“小白,你知道什么是HTML5么?”

小白:“大概了解一些,HTML5就是使用JavaScript+CSS+HTML来做网页,具体怎么做就不知道了!”

老朱:“恩,原理是这样!大道理我就不说了,说多了你也记不住,就算记住现在也理解不了。我大概给你说一下网页制作技术的变化历程吧。”

“以前我们做网站的时候,通常会说我的网站是asp、jsp、.net、php的。没有人会说我的网站是HTML的,你知道,网页最终的呈现肯定是html格式的,为何他们不说呢?”

小白:“因为他们网页的功能基本都是通过asp、jsp、.net、php实现的?”

“没错,那个时候做网站先是美工设计页面、切图。程序员按照美工设计的页面通过切图和表格布局展示出来,通过vb、java、c#、php等代码把数据库的数据提取出来放到对应位置。”

小白:“对,我还知道以前的网页要更改网页中某个位置的数据是需要重新加载网页的。”

“不错,确实是这样,当时风靡一时的Flash完美的解决了更改页面数据不用刷新页面的问题,Flash在网页中可以实现异步请求,可以通过Flash向服务器发送一个请求,当接收到返回数据后再对flash中的内容进行对应的更改。不过Flash太依赖插件,所以后来就有了ajax,ajax是通过JS来实现网页的异步请求处理。”

小白:“不好意思!朱哥,什么是异步请求?”。

“哦!简单说就是你发送一个post或者get请求,服务器不是立刻给你返回数据的,网速不一样服务器处理速度不一样都会影响数据返回的速度,因此你需要等到数据返回以后再对数据进行处理。这些你现在不用理解,以后慢慢就知道了。”

老朱接着说:“自从有了ajax,我们对网页的处理就灵活很多,因此js开始变得越来越重要,后来就有了著名的jQuery,通过jQuery可以对网页标签进行各种处理,对ajax也进行了很好的封装,非常方便!”

“因为有了jquery我们在做网页的时候可以很方便的在一个页面完成大量的功能,所以经常把前端页面功能实现与数据处理完全分开,这样前端通过js控制html标签实现页面功能,后台人员做数据处理,分工很明确,工作效率和网页功能都得到了很大的提高。”

小白接着问:“前端和后台数据处理完全分开,前端的数据是怎么拿到的呢?”

老朱:“这个你现在先不用理解,你只需要知道,前端需要数据的时候会使用ajax向服务器一个处理数据的页面发送一个请求,这个页面会通过你的请求参数返回给你不同类型的数据,拿到数据后把数据放到页面对应的标签中或者更改某些标签的状态。”

小白:“哦,我大概理解了,不过还得消化消化!”

“没关系,这些你只需要了解就可以,在我们真正做的时候你就慢慢理解了。明天我们继续~~~”


想学H5的朋友可以关注老炉,您的关注是我持续更新《小白H5成长之路》的动力!