HTML5新手入门指南

2015-08-08html教程
23

  HTML5的发展越来越迈向成熟,很多的应用已经逐渐出现在你我日常生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术取代,更重要的是可以透过HTML5的技术来开发跨平台的手机软体,让许多开发者感到十分的兴奋!

  当你开始想要学习、试图想要投入相关的开发时,由于HTML5的技术还在持续发展、进化当中,学习的资源也都比较零散,较难有一个整体的方向。在本篇文章中,笔者将会导览HTML5的主要技术组成,并且提供一些学习资源让大家参考。

  HTML5到底是什么?

  一般广义而言的HTML5则包含了HTML、CSS和JavaScript叁个部分,不单单只是HTML部分而已,CSS 3和JavaScript也有许多的创新,让整个网页程式功能更加缤纷。

  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 – 新的标籤,像是

  Application tags – 也是新的标籤,像是

  Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示

  Form type –

可以加入的type便多了,包含email和tel等属性,浏览器会协助进行资料格式的验证

  多媒体

  Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。

  Audio video – 影片和音乐的塬生播放支援

  Canvas – 2D的绘图功能支援

  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标準,随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发!

  而对于旧的浏览器相容性而言,先前Inside曾经撰文介绍过的CSS3 Pie便是一个让旧版浏览器也能支援CSS 3功能的JavaScript函式库。

  而Modernizer也是一个相当重要的JavaScript函式库,提供开发者轻鬆的方式判别目前使用者的浏览器是否有支援特定的HTML5功能。

  学习的方向

  在看完本篇文章之后,大家或许可以针对自己有兴趣的方面透过关键字搜寻去寻找相关的学习资源以及内容。

  Google的HTML5Rocks网站也是我相当推荐的,其中的透过HTML5开发的HTML5介绍投影片更是值得一看,可以将上述的内容都实际试玩(推荐使用Chrome浏览器以获得完整的功能效果)。

  文章来源:INSIDE

The End

相关推荐

layui根据经纬度在弹出层中显示具体位置
我们要实现在layui根据经纬度在弹出层中显示具体位置,具体要怎么操作呢? 1、首先你需要引入百度地图的js,这个ak我们去百度地图开发者平台申请,一定要申请浏览器版的ak. script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak...
2024-10-24 html教程
152

layui table筛选列实现记忆功能,刷新不丢失
layui table给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。 想法是,defaultToolbar的filter这个功能中,用户自定义显示列时保存起来,下次进入页面默认加...
2024-10-21 html教程
119

layui表格渲染templet解析单元格的问题
在解析单元格的时候自定义列为这样: {field: 'tpye', title: '所属类别', align:"center",templet:'#typeBar'} 我们通常这样简单的解析像这样也没什么毛病: script type="text/html" id="typeBar" {{# if(d.tpye == 1){ }} 系统优化 {{# }else if(d.tpye==2...
2024-10-21 html教程
166

html表单标签详细介绍以及实例代码
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1、form标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有get方式和post方式 2、label标签 为表单元素定义文字标注 fo...
2024-10-16 html教程
85

Js正则表达式过滤特殊字符、表情
Js正则表达式过滤特殊字符、表情的实例代码: let ret = "12312ffds#¥@¥#%^***(()))*)).`@%@¥@¥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~!@#¥……*()——|{}【】‘;:”“'。,、?]...
2022-10-14 html教程
594

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用...
2017-04-15 html教程
586