HTML5简介及新特性

HTML5简单理解就是在HTML的基础上加了一些新标准,新标签,本地化存储,移动端适配优秀,动画特效实现简洁(不依赖JS,纯DIV+CSS3.0),可直接对文件操作(图片压缩,浏览)。

HTML5常用新特性:
1.新标签
  HTML5的新标签大致可分为两类。第一类是布局标签,第二类是独立标签。
  布局标签:如header,footer标签替换div标签实现网页的页眉页脚布局。

<header>页眉header><footer>页脚<footer/>
<div class="header">页眉div><div class="header">页脚div>

  新标签的使用使HTML页面更加规范,友好,可让搜索引擎或者个人快速识别页面布局。
  传统HTML为了能让搜索引擎抓取页面标题,内容的时候一般采用如下格式。

<div class="description" id="description">描述/div><div class="content" id="content">内容div>

  独立标签:如canvas标签,有自己的一套语法更新标签的内容,后续有讲解。
2.新CSS属性(一般称为CSS3.0)
  传统CSS是静态的无法通过简单样式实现网页内部元素的动画效果,CSS3.0的translate属性即可实现旋转移动,在配合伪类@即可实现丰富的动画效果。
3.文件操作
  文件的底层均是二进制数据流,HTML页面上面的文件都是将系统文件转换成base64格式数据流显示出来的。传统的HTML是无法操作这些数据流的,HTML5则可直接对图片的数据流操作,并配合JS实现上传图片的浏览,压缩等操作。(之前都是通过flash实现)
  例:下面这张图片就是纯base64字符串生成的,格式

4.本地化存储
  浏览器本地化存储都是通过cookie,但cookie存取的数据量有限。操作系统考虑到安全性不允许浏览器任意访问修改本地文件,否则随便写个JS脚步就可以盗取用户信息,进行攻击。所以个人不看好这个方向,就不详细介绍了,有兴趣的可自行脑补。
5.新编程接口
  目前还不完善,也不多做介绍了,感兴趣可自行搜索websocket。

你可能感兴趣的:(HTML5)