整合营销服务商

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

免费咨询热线:

成为HTML5大神必备的利器

成为HTML5大神必备的利器

什么要使用HTML5?

  1. 游戏开发。

    作为移动互联网最火产业之一的——手游,越来越被大多数公司所青睐。而HTML5提供了一个非常伟大的,移动友好的方式去开发有趣互动的游戏。如果你之前使用Flash游戏,那么很快你就会喜欢上HTML5的游戏开发。

  2. 更好的互动体验。

    HTML5的画图标签允许你做更多的互动和动画以及动态的web应用程序,就像我们使用Flash达到的效果,有助于增加更好的用户体验。

  3. 更聪明的存储。

    HTML中最酷的特性就是本地存储,它拥有更好的安全性能以及不需要第三方插件就能轻松实现。

  4. 易用性 。

    更加简单方便的创建网站。易懂的标签有助于我们更好的了解文档,创建更好的用户体验。

  5. 视频和音频的支持。

    经常在网站上看视频的人一定不会陌生flash以及其它的第三方应用吧,而HTML5的到来正式宣告flash时代在此方面的结束。HTML5拥有更加强大的视频和音频的支持。

  6. Doctype。

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

  7. 更加清晰的代码。

    HTML5拥有更加简答、优雅、容易阅读的代码。

    遗留及其跨浏览器的支持。

    现在社会主流的浏览器 (Chrome,Firefox,Safari,IE9和Opera)都支持HTML5,即便是非常老非常令人厌恶浏览器像IE6都可以使用。

    未来HTML4将会更加的火。

    HTML5不会往每个方向发展,但是更多的元素已经被很多公司采用,并且开始着手开发。HTML5其实更像HTML,它不是一个新的技术需要你重新学习!如果你开发XHTML strict的话你现在就已经在开发HTML5了。开始用HTML5代码编写web应用吧,说不定下一个移动应用或者游戏应用就是用HTML5开发的!

学习HTML5这几个网站你值得拥有

如今,HTML5的发展前景非常好,企业对HTML5建站需求很大,HTML5游戏领域研发热火朝天。HTML5技术能为我们带来炫酷的视觉体验,除了电脑浏览器上让人瞠目的效果,HTML5在移动端的表现同样令人惊喜,并且HTML还在不断的完善和发展。说到这大家是不是心动了,心动就行动吧?下面我给大家推荐几个学习HTML5非常好的网站。

1.W3School http://www.w3school.com.cn/

对于基础薄弱的人来说,这是一个不错的网站。每一节都有学生时代老师般的“板书”,丰富的实例展示,还有工具书、小测验等提升工具,犹如私人教练一般!

更丰富的实例,更详细的解读

2.H5之家。http://www.h5cn.com/

除了丰富且与时俱进的教程,这个网站还有很多关于HTML5业界的独特见解,闲暇时候看看,拓展知识又能在人前装X。这样的网站你值得拥有。

这么好的网站你早该知道的

3.360html5基地 http://html5.360.cn/

对于想学习HTML5游戏开发的人来说,这是一个不错的选择。350旗下的HTML5作品展示网站,大部分是HTML5游戏展示,可爱丰富有趣。

种类繁多的游戏

4.HTML5 Games http://html5games.com/

相对350来说更加丰富的HTML5游戏资源,品味更加原生的开发也是一种不错的选择,说不定玩着玩着技能激发设计灵感呢!

更加原味、更丰富的游戏体验

5.Dive into HTML5 http://diveintohtml5.info/

一个专门为HTML5而生的网站,这个网站几乎都是关于HTML5的文档,讲一些很基础的知识,简洁清新。如果想学习HTML5的同时提高英语阅读能力,这个网站是非常好的。

英语不好的人也可以尝试着学习啊

6.HTML5xCSS3 http://www.html5xcss3.com/

拥有超丰富的HTML5案例和模板,随便点开一个案例都好看到让人震惊。里面的全部都是HTML5响应式网站哟!

勇敢的挑战自己

7.HTML5技术网 http://www.51html5.com/

一个充满干货的网站!你想要的不想要的,这里全都有!

没事的时候常来看看定会收获不小

8.HTMLDemos http://html5demos.com/

测试HTML5标签在各浏览器的兼容性,还能查看各种HTML5的标准Demo演示。

这是一个测试网站

9.The HTML5 test http://chrome.360.cn/test/html5/index.html

能为浏览器对HTML5的兼容性打分,可以知道你当前的浏览器对HTML5的支持情况如何,各种标签和组件的支持情况。

这也是一个测试网站

当然,光看网站有的小伙伴会觉得没有方向感,不知道该从那些地方下手。不妨结合教科书来个系统的学习。入门级必备两本教材《Head first HTML&CSS》和《JavaScript DOM编程艺术》,看书再结合网站学习,不断的练习、不断的学习相信不久你就会成为HTML5大神啦!

不积跬步,无以至千里。千里之行,始于足下。从现在开始,每天给自己20分钟了解HTML5技术,你会发现其实编程也挺有趣的。http://www.iisp.com/design/?s=yuqiuping。

当然上面的有些内容是借鉴有其他人的,好的东西拿出来大家一起学习、共同进步。其实做人做事都是一样,只有不断的学习、不断的借鉴好的、摈弃坏的,这样我们自己才能进步的更快。

着智能手机、平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长。H5开始火热起来,以文字、图片、动画、声音等相结合的自媒体出现,给用户带来了全新体验,技术本身带来的新奇感让人们心生向往。

下面我们就来聊一聊H5入门的一些知识吧!

什么是H5?

H5即HTML5,是指“HTML”的第5个版本,而“HTML”,则是指描述网页的标准语言。因此,HTML5,是第5个版本的“描述网页的标准语言”。


H5特性


H5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。


H5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search


H5的改进:

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用


H5语义元素

<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>    规定在文本中的何处适合添加换行符。

H5浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。


IE9 以下版本浏览器兼容HTML5的方法

<!--[if lt IE 9]>    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->


载入后,初始化新标签的CSS:

/*html5*/article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

H5代码规范


1. HTML5 元素名可以使用大写和小写字母。

但推荐你使用小写字母:

  • 混合了大小写的风格是非常糟糕的。
  • 开发人员通常使用小写 (类似 XHTML)。
  • 小写风格看起来更加清爽。
  • 小写字母容易编写。



2. 在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素),但建议你每个元素都要添加关闭标签。


3. HTML5 属性值可以不用引号。

属性值我们推荐使用引号:

  • 如果属性值含有空格需要使用引号。
  • 混合风格不推荐的,建议统一风格。
  • 属性值使用引号易于阅读。


4. 图片通常使用 alt 属性。在图片不能显示时,它能替代图片显示。


5. 等号前后可以使用空格。


6. 使用 HTML 编辑器,左右滚动代码是不方便的。

每行代码尽量少于 80 个字符。


7. 不要无缘无故添加空行。

为每个逻辑功能块添加空行,这样更易于阅读。

缩进使用两个空格,不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。


8. 样式表使用简洁的语法格式:

  • 将左花括号与选择器放在同一行。
  • 左花括号与选择器间添加一个空格。
  • 使用两个空格来缩进。
  • 冒号与属性值之间添加一个空格。
  • 逗号和符号之后使用一个空格。
  • 每个属性与值结尾都要使用分号。
  • 只有属性值包含空格时才使用引号。
  • 右花括号放在新的一行。
  • 每行最多 80 个字符。
  • 特性
    1.语意特性,添加<header><header/><nav><nav>等标签
    2.多媒体, 用于媒介回放的 video 和 audio 元素
    3.图像效果,用于绘画的 canvas 元素,svg元素等
    4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
    5.设备兼容特性 ,HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,
    6.连接特性,更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
    7.性能与集成特性,HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作

  • 新增标签
    1.多媒体:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
    2.新表单元素:<datalist> ,<output> , <keygen>
    3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部

  • 使用html5shiv可以解决ie低版本不兼容的问题,只需要在head中加上,当版本低于IE9时,浏览器会加载html5.js脚本,使得支持html5的新功能,也可以将脚本文件下载到本地

    <head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>

3.input 有哪些新增类型?

  • color,选择颜色
  • date 选择日期
  • email 用于检测输入的是否为email格式的地址
  • month 选择月份
  • number 用于应该包含数值的输入域,可以设定对输入值的限定
  • range 用于定义一个滑动条,表示范围
  • search 用于搜索,比如站点搜索或 Google 搜索
  • tel 输入电话号码
    -time 选择时间
  • url 输入网址
  • week 选择周和年

4.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

  • 共同点:sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
  • 区别
    1.cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,localStorage不会自动把数据发给服务器,仅在本地保存
    2.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。localStorage不会自动把数据发给服务器
    3.cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据
    4.localStorage支持事件通知机制,可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序员自己封装
  • HTML5中提供了localStorage对象可以将数据长期保存在客户端,除非人为清除,localStorage提供了几个方法:
  • 1.存储:localStorage.setItem(key,value)如果key存在时,更新value
    2.获取 localStorage.getItem(key)如果key不存在返回null
    3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除
    4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
  • 注意:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。

上一篇:表单按钮标签的使用
下一篇:HTML简史