1、HTML5到底是什么?

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS3和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA)。

2、HTML5好处-为什么要用HTML5

THML5在布局上更得体,记得以前的主流table过渡到主流div;今的布局对搜索引擎更加友好,比如<article>内总是会包含文章内容,而nav是导航信息;HTML5的移动手机支持也日趋完善,兼容移动端可是一个简单概念。虽然多网合一,兼容问题永远存在,布局适配也是一门技术活;另外在Pad等其他客户端也发挥着越来越重要的优势。

3、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等属性,浏览器会协助进行资料格式的验证

多媒体

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可以保留浏览记录

4、现在就用HTML5

截至目前而言,主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支援了许多的HTML5标準,而且目前最新版的IE 9也支援了许多HTML5标準,随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发!兼容性问题会随着时间的推移而越来越少。但对于不得不照顾底版本用户的网站,网上也有大量的回退解决方案。最大的原因今天你就开始使用HTML5是因为它是未来,不要掉队了!HTML5不会往每个方向发展,但是更多的元素已经被很多公司采用,并且开始着手开发。

HTML5入门指南的更多相关文章

  1. 给萌新HTML5 入门指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...

  2. 给萌新HTML5 入门指南(二)

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上一篇我们已经为大家介绍了HTML5新增的内容和基础页面布局,这篇会继续向大 ...

  3. HTML5 Plus移动App(5+App)开发入门指南

    HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...

  4. AngularJS快速入门指南13:表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  5. 5+ App开发入门指南

    HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...

  6. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  7. Webstorm10.0.3破解程序及汉化包下载、Webstorm配置入门指南

    核心提示: WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscri ...

  8. ASP.NET SignalR 2.0入门指南

    ASP.NET SignalR 2.0入门指南 介绍SignalR ASP.NET SignalR 是一个为 ASP.NET 开发人员的库,简化了将实时 web 功能添加到应用程序的过程.实时Web功 ...

  9. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

随机推荐

  1. GUID(Globally Unique Identifier)全局唯一标识符

    最近有大量数据存入数据库时,因为主键为一个nvarchar类型,起初想着用int 类型,每次打开表的时候,获取最后一行的ID,然后让其++. 但发现由于字段是char类型,数据库对其进行了排序.再次插 ...

  2. Linux驱动手动绑定和解绑定方法

    linux内核从2.6.13-rc3开始,提供了在用户空间,可动态的绑定和解绑定设备和设备驱动之间关系的功能.在这之前,只能通过insmod(modprobe)和rmmod来绑定和解绑,而且这种绑定和 ...

  3. TZ_09_自定义Spring-security

    1.Spring Security 的前身是 Acegi Security ,是 Spring 项目组中用来提供安全认证服务的框架 2.安全包括两个主要操作. “认证”,是为用户建立一个他所声明的主体 ...

  4. jquery ajax跨越

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 1.jsonp之$.ajax js $.ajax({ ...

  5. @import vs #import - iOS 7

    It's a new feature called Modules or "semantic import". There's more info in the WWDC 2013 ...

  6. Spring松耦合示例(转)& IOC

    Spring松耦合示例 轻松学习Spring<一> IoC容器和Dependency Injection模式 最近公司需要,项目中要用到Spring和Ibatis.趁着过年好好学习学习.I ...

  7. tesseract ocr训练 pt验证码

    识别率有问题A大概率识别为n,因此需要训练,这里讲一下 如何训练 参考 java代码里边直接使用tess4j,是对tesseract的封装,但是如果要训练,还是需要在进行安装tesseract-ocr ...

  8. NOIP模拟 17.9.28

    公交车[问题描述]市内有

  9. web前端学习(二)html学习笔记部分(4)--audio和video文件播放

    1.2.10  html5音频 1.2.10.1  HTML5音频播放 本课主要讲解HTML5播放音频 <!--<button onclick="clickA"> ...

  10. 初次接触python的re模块

    刷CF的时候,看到一个简单的题目,可以用来练练正则表达式 于是乎找到了re.sub的用法,说明如下 re.sub: (pattern, repl, string, count=0, │       f ...