HTML5初步了解

 
 

1、使用HTML5的十大缘由

  你难道尚未考虑使用HTML5? 固然我猜测你可能有本身的缘由;它如今尚未被普遍的支持,在IE中很差使,或者你就是喜欢写比较严格的XHTML代码。HTML5是web开发世界的一次重大的改变,事实上无论你是否喜欢,它都是表明着将来趋势。其实HTML5并不难理解和使用。咱们这里能列出许多缘由为何如今要开始使用HTML5javascript

  目前有不少的文章介绍使用HTML5而且介绍了使用它的优点和好处,没错,咱们这篇文章也相似。随着更多这样的文章,以及Apple的支持, Adobe围绕HTML5的产品开发,以及移动flash的死亡,如此多网站的支持,我想对那些仍旧没有或者不想接受它的人说一些话。我认为主要得缘由是,它看起来像一个神秘的东西。不少感受它像喷气背包或者飞行汽车。一个未经验证的非凡想法可是并不实际。可是事实上如今已近很是的实际了。html

  为了解密HTML5而且帮助顽固的开发设计人员,我这里写了列出了使用HTML5的几大缘由,但愿对你们有帮助!html5

 

  第十大缘由:易用性

  俩个缘由使得使用HTML5建立网站更加简单:语义上及其ARIA。新的HTML标签像<header>, <footer>,<nav>,<section>, <aside>等等,使得阅读者更加容易去访问内容。在之前,即便你定义了class或者ID你的阅读者也没有办法去了解给出的一个div到底是什么。使用新的语义学的定义标签,你能够更好的了解HTML文档,而且建立一个更好的使用体验。java

  ARIA是一个W3C的标准主要用来对HTML文章中的元素指定“角色“,经过角色属性来建立重要的页面地形例如,header,footer,navigation或者aritcle颇有必要。这一点曾经被忽略掉了而且没有被普遍使用,由于事实上并不验证。然而,HTML5将会验证这样属性。同时,HTML5将会内建这些角色而且没法不覆盖。更多的HTML5和ARIA讨论,请你们查看这里。web

  第九大缘由:视频和音频支持

  忘了flash和其它第三方应用吧,让你的视频和音频经过HTML5标签<video>和<audio>来访问资源。正确播放媒体一直都是一个很是可怕的事情,你须要使用<embed>和<object>标签,而且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会很是复杂,大堆得使人迷惑的代码。并且HTML5视频和音频标签基本将他们视为图片:<video src=”"/>。可是其它参数例如宽度和高度或者自动播放呢?没必要担忧,只须要像其它HTML标签同样定义:<video src=”url” width=”640px” height=”380px” autoplay/>。chrome

  实际上这个过程很是简单,然而咱们的老浏览器可能并不喜欢咱们的HTML5,你须要添加更多代码来让他们正确工做。可是这个代码仍是比<embed>和<object>来的简单的多。   数据库

  第八大缘由:Doctype

  没错,就是doctype,没有更多内容了。是否是很是简答?不须要拷贝粘贴一堆没法理解的代码,也没有多余的head标签。最大的好消息在于,除了简单,它能在每个浏览器中正常工做即便是名声狼藉的IE6。canvas

  第七大缘由:更清晰的代码

  若是你对于简答,优雅,容易阅读的代码有所偏好的话,HTML5绝对是一个为你量身定作的东西。HTML5容许你写出简单清晰富于描述的代码。符合语义学的代码容许你分开样式和内容。看看这个典型的简单拥有导航的heaer代码:windows

<div id="header"> <h1>Header Text</h1> <div id="nav">  <ul>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>  </ul> </div></div>

  是否是很简单?可是使用HTML5后会使得代码更加简单而且富有含义:api

<header> <h1>Header Text</h1> <nav>  <ul>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li>  </ul> </nav></header>

  使用HTML5你能够经过使用语义学的HTML header标签描述内容来最后解决你的div及其class定义问题。 之前你须要大量的使用div来定义每个页面内容区域,可是使用新的<section>,<article>,<header>,<footer>,<aside>和<nav>标签,须要你让你的代码更加清晰易于阅读。

  第六大缘由:更聪明的存储

  HTML5中最酷的特性就是本地存储。有一点像比较老的技术cookie和客户端数据库的融合。它比cooke更好用由于支持多个windows存储,它拥有更好的安全和性能,即便浏览器关闭后也能够保存。

  由于它是个客户端的数据库,你不用担忧用户删除任何cookie,而且全部主流浏览器都支持。

  本地存储对于不少状况来讲都不错, 它是HTML5工具中一个不须要第三方插件实现的。可以保存数据到用户的浏览器中意味你能够简单的建立一些应用特性例如:保存用户信息,缓存数据,加载用户上一次的应用状态。

  第五大缘由:更好的互动

  咱们都喜欢更好的互动,咱们都喜欢对于用户有反馈的动态网站,用户能够享受互动的过程。输入<canvas>,HTML5的画图标签容许你作更多的互动和动画,就像咱们使用Flash达到的效果。

  除了<canvas>,HTML5一样也拥有不少API容许你建立更加好的用户体验而且更加动态的web应用程序。 这里有一个列表:

  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • document editing
  • Timed media playback

  第四大缘由:游戏开发

  没错, 你可使用HTML5的<canvas>开发游戏。HTML5提供了一个很是伟大的,移动友好的方式去开发有趣互动的游戏。若是你开发Flash游戏,你就会喜欢上HTML5的游戏开发。

  Script-tutorials目前提供了4个不部分的HTML5游戏开发教程,这里看看他们开发的有趣游戏:

  第三大缘由: 遗留及其跨浏览器支持

  你的现代流行浏览器都支持HTML5(Chrome,Firefox,Safari,IE9和Opera),而且建立了HTML5 doctype这样全部的浏览器,即便很是老很是使人厌恶浏览器像IE6均可以使用。可是由于老的浏览器可以识别doctype并不意味它能够处理HTML5标签和功能。幸运的是,HTML5已经使得开发更加简单了,更多支持更多浏览器,这样老的IE浏览器能够经过添加javascript代码来使用新的元素:

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

  第二大缘由: 移动,移动仍是移动

  你能够称之为“直觉”,可是我认为移动技术将会变得更加的流行。我知道,这里有些很是疯狂的猜想,有些可能你也想到了 – Mobile是一个时尚!移动设备将占领世界。更多的接受移动设备将会增加的很是迅速。这意味着更多的用户会选择使用移动设备访问网站或者web应用。HTML5是最移动化的开发工具。随着Adobe宣布放弃移动flash开发,你将会考虑使用HTML5来开发webp应用。

  当手机浏览器彻底支持HTML5那么开发移动项目将会和设计更小的触摸显示同样简单。这里有不少的meta标签容许你优化移动:

  • viewport: 容许你定义viewport宽度和缩放设置;
  • 全屏浏览器: ISO指定的数值容许Apple设备全屏模式显示;
  • Home screen icons:  就像桌面收藏,这些图标能够用来添加收藏到IOS和Android移动设备的首页。

  第一大缘由: 它是将来,开始用吧!

  最大的缘由今天你就开始使用HTML5是由于它是将来,不要掉队了!HTML5不会往每一个方向发展,可是更多的元素已经被不少公司采用,而且开始着手开发。HTML5其实更像HTML,它不是一个新的技术须要你从新学习!若是你开发XHTML strict的话你如今就已经在开发HTML5了。为何不更完整的享受HTML5的功能呢?

  你实际上没有任何借口不接受HTML5。事实上我惟一一个缘由使用HTML5是由于它书写代码简单清晰。其它的特性其实我也没有真正使用。你能够考虑如今开始使用HTML5书写代码,它能帮助你改变书写代码的方式及其设计方式。开始用HTML5代码编写web应用吧,说不定下一个移动应用或者游戏应用就是用HTML5开发的!

  英文原文:Top 10 Reasons to Use HTML5 Right Now

  来源:GBin1.com 、 雷锋网

 
 

2、HTML5 新元素

自1999年之后HTML 4.01 已经改变了不少,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或从新定义。

为了更好地处理今天的互联网应用,HTML5添加了不少新元素及功能,好比: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工做者,等。


<canvas> 新元素

标签 描述
<canvas> 标签订义图形,好比图表和其余图像。该标签基于 JavaScript 的绘图 API


新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容,好比插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。


新表单元素

标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不一样类型的输出,好比脚本的输出。


新的语义和结构元素

HTML5提供了新的元素来建立更好的页面结构:

标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 容许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,好比单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,好比提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义运行中的进度(进程)。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。


已移除的元素

如下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>
 
3、资源
做者:SuneBear
连接:http://www.zhihu.com/question/24398907/answer/30239864
来源:知乎
著做权归做者全部,转载请联系做者得到受权。

Animated Books with CSS 3D Transforms 这是一个3D书本,CSS3完成

=========HTML5特效汇集网站========
christmasexperiments.com 的页面
chromeexperiments.com 的页面
Mr.doob
litewerx.showcase
Form Follows Function
AlteredQualia
html5rocks.com 的页面

===========视觉特效与交互式视频============

Interactive Film "itsumo kawaii"

Arcade Fire / Just a Reflektor
Aaronetrope 3D科幻视频投影对话
Aleksandar Rodic 3D立体博客
Beanstalk

three.js webgl 动态地图
Ô Green by SPECIAL.T 水中植物广告
Kimatica - Creative Connections 树脉
Earth to Echo 电影科幻宣传网站
霍比特人
HelloRun™ 线稿房间,第一人称动
LETTERS, INC. 集成电路
Dataveyes | Human Data Interactions 视觉粒子

=========音乐与可视化==========

Rocking dendrites 摇滚与触手
Arabesque - Music Colour Particles 优美的纯音乐与彩色烟雾
compo.filler 蓝电之音
Lights 波点
ÜberViz 电子
A [ Radiohead 音乐画画

=========物理特性元素============
Blob 大水球
Andrew Hoyer 布-骨架
HTML5 Fish Bowl IE-鱼缸
googlecode.com 的页面 chrome-水族馆
three.js webgl 动物
Liquid Particles 3D 3D粒子流

==========画绘与生成===========
10 Jaw Dropping HTML5 and Javascript Effects 10个画绘特效
wormz . html5 canvas experiment 图片生成毛毛虫~~
Silk – Interactive Generative Art 光效
Sketch Toy: Draw sketches and share replays with friends! 记录线稿步骤
ASCIIFlow Infinity ASCII字符生成图表

========一些融入了HTML5的网站=======
Andrew McCarthy 滚动动物奔跑
东京温柔基金
fifty-five | the data agency 垂直分割
A P R I L Z E R O 数据分析
Gaming Media 创意横向滚动
Luxaqua | Aquarium Design 深邃海底纵向滚动
KILFISH 鬼畜纵向滚动
有顆梅,在台灣 食品纵向滚动
Vespillo le film Vespillo纵向滚动
Exploring Moon Bears IE-月熊志
Metal Junk: The Game HTML5游戏:金属废墟,游戏就不展开了~~
相关文章
相关标签/搜索