整合营销服务商

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

免费咨询热线:

HTML5需要了解的特性

HTML5需要了解的特性

、易用性及代码简洁性

HTML5赋予网页更好的意义和结构。新的HTML标签像<header>, <footer>,<nav>,<section>, <aside>等等,使得阅读者更加容易去访问内容。使用新的语义学的定义标签,你可以更好的了解HTML文档,并且创建一个更好的使用体验。

ARIA是一个W3C的标准主要用来对HTML文章中的元素指定“角色“,通过角色属性来创建重要的页面地形例如,header,footer,navigation或者aritcle很有必要。这一点曾经被忽略掉了并且没有被广泛使用,因为事实上并不验证。然而,HTML5将会验证这样属性。同时,HTML5将会内建这些角色并且无法不覆盖。

二、本地存储特性

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

因为它是个客户端的数据库,你不用担心用户删除任何cookie,并且所有主流浏览器都支持。

本地存储对于很多情况来说都不错, 它是HTML5工具中一个不需要第三方插件实现的。能够保存数据到用户的浏览器中意味你可以简单的创建一些应用特性例如:保存用户信息,缓存数据,加载用户上一次的应用状态。如果你对本地存储有兴趣,你可以看看这些文章

三、设备兼容特性(跨浏览器)

从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势

这里有很多的meta标签允许你优化移动:

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

四、网页媒体特性更好的支持音、视频

支持网页端的Audio、Video等多媒体功能;在发布HTML5之前你需要使用<embed>和<object>标签,并且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复杂,大堆得令人迷惑的代码。而且HTML5视频和音频标签基本将他们视为图片:<video src=""/>。但是其它参数例如宽度和高度或者自动播放呢?不必担心,只需要像其它HTML标签一样定义:<video src=”url” width=”640px” height=”380px” autoplay/>。

<video src="movie.ogg" controls="controls">

您的浏览器不支持 video 标签。

</video>

五、三维、图形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果,用户使用<canvas>可以开发游戏。<canvas>元素本身不具备绘制能力,依靠脚本来完成

当然HTML5还有诸多特性,以上简单的总结了一些。更多特效及用法参考w3school提供的手册;现在网络上HTML5相关的视频教程数不胜数。极客还有慕课都是很不错的

需要帮助可以关注公众号:伙拼学习

我还在南方小岛上玩儿的时候,一个朋友给我发了条语音信息(早上发的,我晚上才听,我让你发语音)大概是说,能不能帮忙联系一个会 HTML5 的团队,领导要求做一个 HTML5 的活动页面。

看来 HTML5 的浪潮又要让我们的广告客户浑身湿透了。他们想要华丽的页面,想要让用户觉得他们很酷。事实上,即使他们只做了一张很廉价的“活动邀请函”页面,用户也觉得好棒好厉害。真相是,大部分用户并不知道其中的奥秘。

HTML5是针对超文本语言HTML的第五次修订。具体HTML是什么?我们先笼统地认为它是一种用来创建网页的手段就好。不过你不是科技从业者,也不是什么都要懂一点的极客。你会想:什么html、Input type=date、js线程、socket、标准扩展embed、css3……这些都是什么鬼我根本不想知道快扔走!

这一切并不在你学习的范围内。你只关心这样一个问题:它会为你的生活带来怎样的变化?

你手机里的原生APP会变少。

原生APP,就是你到应用商店里选一个应用、等待下载、确认权限、等待安装,然后点击打开的那种移动应用,它专门针对某一类移动操作系统生成,必须被完整安装到手机里。而有一种“假”APP,它们打开后基本利用手机中的浏览器来运行,而且不需要下载后安装,就能立即在手机界面中生成一个APP图标——HTML5就是生产这种“假”APP的利器。比如你玩《神经猫》就不需要下载一个APP,而这个游戏正是用HTML5网页实现的。

你那个当程序员的男朋友(如果你有)就可以早点下班回家了。

HTML5是唯一一个通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平台的跨平台语言。因为这种跨平台的便利,程序员们只需要为之开发一种类别的产品——说白了就是一个万能的网页。他再也不需要做一款只能在苹果手机上运行的APP后,再做一款也可以在三星、小米上使用的APP。

你的手机里没有Flash了。

如果需要一个能够集中展示视频、音频等各种媒体形式的插件,那就是Flash。这个部署在亿万浏览器里的商业插件俨然成为事实上的网页标准。但是,HTML5把这个标准打破了,这些媒体形式不再需要Flash这一插件就能分布在网页当中。HTML5可以让我们不借助第三方插件实现多媒体。

tml5图标

前面将HTML5以前的大概讲了一些,现在正式开始学习HTML5+CSS3

  1. HTML5将之前所讲的声明和规则以及语法都进行了简化,下图是之前讲过的HTML4的文档

HTML4文档声明

下图为简化的HTML5声明:

HTML5文档声明

只有<!doctype html>就完了,非常简洁,而且也不区分大小写。

2.注意看上图中meta标签,在HTML4当中meta标签很长一串代码,但在HTML5中只有charset="utf-8"属性,相当于HTML将meta标签声明也简化了。

3.比如在HTML5中 <br>换行标签 可以不用加结束符号,但在HTML4当中必须要加上结束符号,也就是<br />。再比如双标签<li></li> ,在HTML5中直接写<li>就可以了,但在HTML4中就必须要有开始标签和结束标签<li></li>。类似这样用法的标签还有很多。再简单举几个:

li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,ty,td,th等等。

4.在HTML5可以将所有可以去除的代码简化至一下程度,可以直接在下面写文档内容了,看下图。

最简化HTML5文档

5.记住凡是属性都具有布尔值,现在可以把这个布尔值理解成对与错,是与否。

6.也可以省去省略号,下面标签的用法都是可以的。下图

可以省去省略号

7.简化后HTML5实例(也能很好的在HTML5页面中显示出来):

简化后实例

更多HTML语法说明,请看W3C