HTML5

一、H5是什么

H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。

二、设计师为什么学习H5？

兼容性强：兼容PC端与移动端、Windows与安卓与IOS
制作周期时间成本短，人力财力成本低
故事性，场景化，强互动，可分享。

三、优势劣势

1. 开发：APP是每一种操作系统都要独立开发。例：IOS，Android等。
   H5是载体在游览器上，所以只需要一个开发项目，不需要因系统不同分开开发。
2. 迭代：APP的版本更新，就IOS而言光审核就需要一周左右，以及要考虑日后数月的变更，风险大，效率慢。无法满足类似上午需求下午上线的推进。
   H5的更新则是即使响应，只要你能上网，更新在你毫不知情下刷新。例如微信曾迭代的朋友圈照片红包等。
3. 开发成本：APP需要android团队、IOS团队以及qa等，仅人力成本就是团队最高的。
   H5开发只需要前端团队，甚至后端开发兼职的也有，学得快用人少，测试优良。成本是APP的1/5-1/10。
4. 使用成本：APP需要先下载应用，并且对于一个新的应用功能繁多层级复杂需要学习成本。
   H5则方便很多，只需一个微信中授权的一个网页应用，即点即显。
5. 开发周期：APP的开发时间3-4个月以上。
   H5在微信朋友圈最简单的一组广告页面设计仅一天就能完成。
6. 传播途径：APP的推广更多在硬广和功能性上。
   H5营销上优势更为明显，一键发送、分享，病毒式传播。
7. 交互响应：APP的渲染在本地，更为流畅迅速，用户体验更好。
   H5的页面跳转需要调取服务器，在网络不好情况下，卡顿且不稳定。
8. 技能操作：在硬件机能操作上，APP有不可代替性，比如相机touch等功能。
9. 用户粘度：APP一旦被用户下载，只要产品对用户有价值，一般不会被弃用。
   H5则不然，运用轻便，忘的也快。

• 一般原则：
  1. 像首页、商品详情页这种优先级很高的页面，布局样式不经常改变，考虑到流程度和用户体验，一定是原生页面。
  2. 二级页面，经常有变化的页面，能够快速开发和发版，会考虑到用H5页面
  3. 最近比较火的React Native，不仅能够统一多端，还能够动态化，也一定程度上解决了流畅性的问题，受到热捧。其实，app中，既有原生页面，也有H5页面，还牵涉到原生页面和H5页面之间的相互跳转、方法的调用等，是需要有一套相对复杂的解决方案的。

     四、技术判断

• 看断网的情况：
  把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。
  显示404或则错误页面的是html页面。
• 看加载方式：
  如果在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，如果没有就是原生的。 微信里面打开我们的H5页面常见的有个绿色的加载线条。
• 看长按界面：
  长按页面，如果出现文字选择、粘贴功能的是H5页面，否则是native页面，我在我们自己的App里面试了一下是可以判断的。但是有一种情况，如果H5页面就是一张图片，那么是不能通过这个方法验证的。
• H5是轻应用，它是一个流量中枢，到达的流量非常多，像一个大树一样，每个叶子都在接下来的雨水。APP是一个重应用，但是它是一个强入口，用户下载的门槛比较高，一旦下载以后它的渲染能力很强。