HTML5前端开发有哪些优势？

1、跨平台。在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。

2、快速迭代。移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。

3、导流入口多。HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。

4、分发效率高。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。

5、HTML5 对用户的好处是：和流量入口多、分发效率高相对应的。大幅降低使用门*。用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。

网页布局常用的方式有这些：1.固定布局。为网页设置一个固定的宽度，通常以px做为长度单位;2.流式布局，为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整。

1、固定布局。为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。

2、流式布局(Liquid Layout)。为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位(通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示)，高度大都是用px来固定住。流式布局的代表作是栅格系统(网格系统)。

例如设置网页主体的宽度为80%，min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真)。

缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调

3、栅格化布局。将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

比如像 bootstrap，foundation 这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。