【亚洲必赢官网】好程序员,HTML5新手入门指南

HTML5新手入门指南

2011/08/02 · HTML5 · 2
评论 ·
HTML5

HTML5的向上尤为迈向成熟,很多的行使已经逐渐出现在您我平日生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术代表,更要紧的是足以经过HTML5的技巧来支付跨平台的手机软件,让洋洋开发者感到万分高兴!

当您起来想要学习、试图想要投入相关的付出时,由于HTML5的技艺还在持续上扬、进化当中,学习的资源也都相比较零碎,较难有一个全部的样子。在本篇小说中,笔者将会介绍HTML5的紧要性技术结合,并且提供一些读书资源让大家参考。

HTML5究竟是何等?

诚如广义而言的HTML5则带有了HTML、CSS和JavaScript多少个部分,不单单只是HTML部分而已,CSS
3和JavaScript也有很多的更新,让整个网页程序作用更加缤纷。

亚洲必赢官网 1

HTML5的技能构成

脱机作用

HTML5透过JavaScript提供了数种分裂的脱机储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存越来越多的内容。

  • WebStorage – 比Cookies更大、更有弹性的的仓储
  • Web SQL Database – 本地端的SQL数据库
  • Indexed DB – Key-value的地面数据库
  • Application Cache – 将一部分常用的网页内容cache起来

实时报导

早年网站由于HTTP协议以及浏览器的规划,实时的互动性十分的受限,只好利用一些技能来「仿真」实时的通讯效能,但HTML5提供了包涵万象的实时报道辅助。

  • WebSocket – 实时的socket联机
  • Web Workers – 以往JavaScript都是single
    thread,透过Worker可以有多个运算
  • Notifications – 原生的提醒信息,类似像OS X的Growl提醒

档案以及硬件协理

不知底我们有没有察觉,在Gmail等新的网页程序当中,已经足以透过拖拉的办法将档案作为邮件附件?那就是这部份HTML5档案的效劳中的Drag’n
Drop和File API。

  • Drag’n Drop – HTML元素的拖沓
  • File API – 读取用户本机总结机的始末
  • Geolocation – 地理定位
  • Device orientation – 手持装置的趋势
  • Speech input – 语音输入

语义化

语义化的网络是可以让电脑可以更为明白网页的始末,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的相助。

  • New tags – 新的标签,像是< header>、< section>等
  • Application tags – 也是新的价签,像是< meter>、<
    progress>
  • Microdata – 到场语义的数据让寻找引擎等网站能够正确呈现
  • Form type – <
    form>可以投入的type便多了,包蕴email和tel等品质,浏览器会赞助开展数量格式的辨证

多媒体

奥迪o、Video的卷标扶助以及Canvas的效劳应该是豪门对此HTML5最熟稔的部份了,也是无数人觉得Flash会被取代的显要缘由。

  • 奥迪(Audi)o video – 影片和音乐的原生播放协助
  • Canvas – 2D的绘图成效支撑
  • 【亚洲必赢官网】好程序员,HTML5新手入门指南。Canvas 3D – 3D的绘图功用支撑
  • SVG – 向量图支援

CSS 3

CSS3支撑了字体的放置、版面的排版,以及最令人影象深远的卡通片效果。

  • Selector – 更有弹性的选取器
  • Webfonts – 嵌入式字体
  • Layout – 两种化的排版选拔
  • Stlying radius gradient shadow – 圆角、渐层、阴影
  • Border background – 边框的背景支持
  • Transition – 组件的活动效果
  • Transform – 组件的变形效果
  • Animation – 将活动和变形加入动画协助

JavaScript

在可比JavaScript的基本面也陡增了DOM的API、和浏览器上下页的记录修改。

  • DOM API – 更便民的查询DOM组件
  • History API – 浏览器的上下页内容改动,方便AJAX可以保留浏览记录

现行就起来用HTML5

以至近日而言,主流的网页浏览器Firefox 5、Chrome 12和Safari
5都早已扶助了诸多的HTML5正经,而且近日风行版的IE
9也扶助了过多HTML5规范,随着使用者陆续升级到新版的浏览器,开发者应该在今天就可以下手开发!

而对此旧的浏览器包容性而言,先前编写介绍过的CSS3
Pie便是一个让旧版浏览器也能援助CSS
3效率的JavaScript函数库。

而Modernizer也是一个一定关键的JavaScript函数库,提供开发者轻松的点子判别如今使用者的浏览器是还是不是有支撑特定的HTML5功力。

学学方向

在看完本篇文章未来,我们或许可以本着自己有趣味的方面通过关键词搜寻去寻觅相关的就学资源以及内容。

Google的HTML5
Rocks网站也是本身非常推荐的,其中的经过HTML5开发的HTML5介绍投影片更是值得一看,能够将上述的情节都实际试玩(推荐应用Chrome浏览器以获得完整的效率功效)。除了HTML5
Rocks,这里还有11个不容错过的HTML5网站。

原文:Richard

赞 1 收藏 2
评论

亚洲必赢官网 2

|本文由好程序员特训营编辑

HTML5的升华更为迈向成熟,很多的利用已经日渐出现在你本身平常生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术代表,更关键的是可以经过HTML5的技能来开发跨平台的手机软件,让众多开发者感到至极鼓劲!

HTML5的前进尤其迈向成熟,很多的施用已经渐渐出现在你本身日常生活中了,不只让传统网站上的互动Flash渐渐的被HTML5的技巧代表,更关键的是可以由此HTML5的技艺来开发跨平台的手机软件,让不少开发者感到相当提神!
  当您从头想要学习、试图想要投入相关的支付时,由于HTML5的技艺还在不停上扬、进化当中,学习的资源也都相比零散,较难有一个一体化的大方向。在本篇作品中,作者将会介绍HTML5的第一技术整合,并且提供一些上学资源让我们参考。
  HTML5到底是怎么样?
  一般广义而言的HTML5则含有了HTML、CSS和JavaScript多个部分,不单单只是HTML部分而已,CSS
3和JavaScript也有那些的翻新,让漫天网页程序效率进一步缤纷。

|小编:好程序员

当你起来想要学习、试图想要投入不毫不相关系的花费时,由于HTML5的技巧还在不断升华、进化当中,学习的资源也都对比零散,较难有一个完好的倾向。在本篇小说中,作者将会介绍HTML5的根本技术结合,并且提供部分学学资源让大家参考。

亚洲必赢官网 3

亚洲必赢官网 4

HTML5到底是何许?

  HTML5的技艺结合
  脱机功用
  HTML5因此JavaScript提供了数种不相同的脱机储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存越来越多的情节。
WebStorage: 比 Cookies 更大、更有弹性的的蕴藏
Web SQL Database: 本地端的SQL数据库
Indexed DB: Key-value 的地面数据库
Application Cache: 将一部分常用的网页内容cache起来

HTML5究竟是如何?

诚如广义而言的HTML5则带有了HTML、CSS和JavaScript多个部分,不单单只是HTML部分而已,CSS
3和JavaScript也有很多的创新,让漫天网页程序作用更是缤纷。

实时报纸发表
  以往网站由于HTTP协议以及浏览器的宏图,实时的互动性相当的受限,只可以使用部分技巧来「仿真」实时的电视公布功能,但HTML5提供了周到的实时报导扶助。
WebSocket: 实时的socket联机
Web Workers: 以往 JavaScript 都是 single thread,透过 Worker
可以有八个运算
Notifications: 原生的提示消息,类似像OS X的Growl提醒

相似广义而言的HTML5则含有了HTML、CSS和JavaScript八个部分,不单单只是HTML部分而已,CSS
3和JavaScript也有广大的换代,让任何网页程序效率尤为缤纷。

HTML5的技巧整合

档案以及硬件帮助
  不亮堂大家有没有发现,在Gmail等新的网页程序当中,已经可以经过拖拉的法门将档案作为邮件附件?那就是那部份HTML5档案的功力中的Dragn
Drop和File API。
Dragn Drop: HTML元素的拖沓
File API: 读取用户本机总计机的内容
Geolocation: 地理定位
Device orientation: 手持装置的取向
Speech input: 语音输入

HTML5的技能构成

脱机效率

语义化
  语义化的网络是足以让电脑可以越发清楚网页的始末,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的扶植。
New tags: 新的价签,像是 header、 section等
Application tags: 也是新的标签,像是 meter、 progress

Microdata: 加入语义的数据让寻找引擎等网站可以正确显示
Form type:
form可以投入的type便多了,包括email和tel等属性,浏览器会支援进行数据格式的辨证

脱机功用

HTML5经过JavaScript提供了数种分裂的脱机储存效用,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存越多的情节。

多媒体
  奥迪o、Video的卷标协理以及Canvas的成效应该是豪门对此HTML5最熟习的部份了,也是很多少人觉着Flash会被取而代之的严重性缘由。
奥迪(Audi)o video: 影片和音乐的原生播放帮忙
Canvas: 2D的绘图作用支撑
Canvas 3D: 3D的绘图作用支撑
SVG: 向量图支援

HTML5通过JavaScript提供了数种差别的脱机储存功效,相对于传统的Cookie而言有更好的弹性以及架构,并且能够储存更加多的始末。

WebStorage:比Cookies更大、更有弹性的的囤积

CSS 3
  CSS3帮助了字体的放权、版面的排版,以及最令人纪念浓密的动画效果。
Selector: 更有弹性的选拔器
Webfonts: 嵌入式字体
Layout: 八种化的排版接纳
Stlying radius gradient shadow: 圆角、渐层、阴影
Border background: 边框的背景支持
Transition: 组件的运动效果
Transform: 组件的变形效果
Animation: 将移步和变形插足动画帮衬

WebStorage: 比 Cookies 更大、更有弹性的的积存

Web SQL Database:本地端的SQL数据库

JavaScript
  在比较JavaScript的基本面也陡增了DOM的API、和浏览器上下页的记录修改。
DOM API: 更便于的询问DOM组件
History API: 浏览器的上下页内容改动,方便AJAX可以保留浏览记录

Web SQL Database: 本地端的SQL数据库

Indexed DB: Key-value的地点数据库

方今就从头用HTML5
  甘休如今而言,主流的网页浏览器Firefox 5、Chrome 12和Safari
5都早已襄助了众多的HTML5业内,而且近年来最新版的IE
9也帮助了重重HTML5正规,随着使用者陆续升级到新版的浏览器,开发者应该在近来就可以入手开发!
  而对于旧的浏览器包容性而言,先前创作介绍过的CSS3
Pie便是一个让旧版浏览器也能协理CSS 3效用的JavaScript函数库。
  而Modernizer也是一个十分重大的JavaScript函数库,提供开发者轻松的措施判别近来使用者的浏览器是还是不是有匡助特定的HTML5效益。
  读书方向
  在看完本篇文章之后,我们或许可以针对自己有趣味的地方通过关键词搜寻去寻觅有关的就学资源以及内容。(web前端学习互换群:328058344
禁止闲谈,非喜勿进!)

Indexed DB: Key-value 的地面数据库

Application Cache:将一部分常用的网页内容cache起来

Google的HTML5
Rocks网站也是本人至极推荐的,其中的经过HTML5花费的HTML5介绍投影片更是值得一看,能够将上述的内容都实际试玩(推荐应用Chrome浏览器以拿到完全的效果意义)。

Application Cache: 将部分常用的网页内容cache起来

实时电视揭橥

实时电视公布

早年网站由于HTTP协议以及浏览器的安顿性,实时的互动性相当的受限,只可以动用一些技能来「仿真」实时的简报成效,但HTML5提供了完美的实时报纸揭橥协理。

往昔网站由于HTTP协议以及浏览器的安排性,实时的互动性相当的受限,只可以使用部分技术来「仿真」实时的通信效能,但HTML5提供了到家的实时广播公布帮助。

WebSocket:实时的socket联机

WebSocket: 实时的socket联机

Web Workers:以往JavaScript都是singlethread,透过Worker可以有多个运算

Web Workers: 以往 JavaScript 都是 single thread,透过 Worker
可以有五个运算

Notifications:原生的唤醒消息,类似像OSX的Growl提示

Notifications: 原生的升迁信息,类似像OS X的Growl提醒

档案以及硬件支撑

档案以及硬件支撑

不晓得大家有没有察觉,在Gmail等新的网页程序当中,已经足以经过拖拉的章程将档案作为邮件附件?这就是那部份HTML5档案的作用中的Dragn
Drop和File API。

不通晓大家有没有发现,在Gmail等新的网页程序当中,已经可以经过拖拉的办法将档案作为邮件附件?那就是那部份HTML5档案的功能中的Dragn
Drop和File API。

Dragn Drop: HTML元素的拖沓

Dragn Drop: HTML元素的拖沓

File API:读取用户本机总结机的内容

File API: 读取用户本机计算机的始末

Geolocation:地理定位

Geolocation: 地理定位

Deviceorientation:手持装置的方向

Device orientation: 手持装置的大势

Speech input:语音输入

Speech input: 语音输入

语义化

语义化

语义化的互连网是足以让电脑可以进一步了解网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的救助。

语义化的互连网是足以让电脑可以更进一步明白网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮手。

New tags:新的竹签,像是header、section等

New tags: 新的价签,像是 header、 section等

Application tags:也是新的价签,像是meter、progress等

Application tags: 也是新的标签,像是 meter、 progress

Microdata:插足语义的数额让追寻引擎等网站可以正确突显

Form type:
form可以参预的type便多了,包涵email和tel等质量,浏览器会赞助进行数据格式的印证

Microdata: 参预语义的多少让寻找引擎等网站可以正确展现

多媒体

Form type:
form可以插手的type便多了,包含email和tel等属性,浏览器会支援举行数据格式的印证

奥迪(Audi)o、Video的卷标帮忙以及Canvas的成效应该是豪门对此HTML5最熟知的部份了,也是累累人认为Flash会被代表的机要缘由。

多媒体

奥迪o video:影片和音乐的原生播放支持

亚洲必赢官网 ,奥迪o、Video的卷标辅助以及Canvas的法力应该是豪门对此HTML5最熟稔的部份了,也是许多个人认为Flash会被代表的严重性缘由。

Canvas: 2D的绘图功效支撑

奥迪o video: 影片和音乐的原生播放帮助

Canvas 3D: 3D的绘图功效支撑

Canvas: 2D的绘图功效援救

SVG:向量图支援

Canvas 3D: 3D的绘图成效支撑

CSS 3

SVG: 向量图支援

CSS3支撑了字体的放权、版面的排版,以及最令人映像深入的卡通片效果。

CSS 3

Selector:更有弹性的选拔器

亚洲必赢官网 5

Webfonts:嵌入式字体

CSS3协助了字体的嵌入、版面的排版,以及最令人映像深切的动画效果。

Layout:三种化的排版选取

Selector: 更有弹性的选取器

Stlying radius gradient shadow:圆角、渐层、阴影

Webfonts: 嵌入式字体

Border background:边框的背景协助

Layout: 七种化的排版接纳

Transition:组件的活动效果

Stlying radius gradient shadow: 圆角、渐层、阴影

Transform:组件的变形效果

Border background: 边框的背景辅助

Animation:将活动和变形加入动画帮衬

Transition: 组件的移位效果

JavaScript

Transform: 组件的变形效果

在相比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

Animation: 将移步和变形加入动画支持

DOM API:更便利的查询DOM组件

JavaScript

History API:浏览器的上下页内容改动,方便AJAX可以保存浏览记录

亚洲必赢官网 6

现行就从头用HTML5

在可比JavaScript的基本面也陡增了DOM的API、和浏览器上下页的纪要修改。

直至近日而言,主流的网页浏览器Firefox 5、Chrome 12和Safari
5都早就支撑了诸多的HTML5正规,而且近期前卫版的IE
9也支撑了过多HTML5正经,随着使用者陆续升级到新版的浏览器,开发者应该在现今就足以入手开发!

DOM API: 更方便的询问DOM组件

而对此旧的浏览器包容性而言,先前写作介绍过的CSS3
Pie便是一个让旧版浏览器也能协助CSS 3功效的JavaScript函数库。

History API: 浏览器的上下页内容改动,方便AJAX可以保留浏览记录

而Modernizer也是一个出色关键的JavaScript函数库,提供开发者轻松的章程判别如今使用者的浏览器是还是不是有帮衬特定的HTML5作用

现今就发轫用HTML5

以至于方今而言,主流的网页浏览器Firefox 5、Chrome 12和Safari
5都早就辅助了不少的HTML5正规,而且近期前卫版的IE
9也支撑了成百上千HTML5正式,随着使用者陆续升级到新版的浏览器,开发者应该在现今就足以出手开发!

而对此旧的浏览器兼容性而言,先前创作介绍过的CSS3
Pie便是一个让旧版浏览器也能支撑CSS 3作用的JavaScript函数库。

而Modernizer也是一个一定关键的JavaScript函数库,提供开发者轻松的措施判别方今使用者的浏览器是不是有支撑特定的HTML5效益。

——关心好程序员微信号:goodprogrammer
周全了解最新技术情报,名企招聘动态!帮你解决就业难点!

网站地图xml地图