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字符串生成的，格式<img src="https://img-blog.csdnimg.cn/2022010706251166507.jpeg">

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