H5编写页面初探

        学过js、css和html后，总期望有一次实践的机会，本次通过实践H5页面编写，深深体会到前台开发 的不易，学习必须要引用到实践中才能暴露问题呢！

       

        H5通俗理解就是HTML经过5次修改后的标准规范，目的为支持移动端上支持多媒体，它具有解析灵活，兼容性好，跨平台，支持多媒体等特性，增加了用户体验度。

【实践经验】

        1. 页面设计首先要根据用户需求，根据用户提供的页面进行划分模块设计。

                                                         


       上面的实例将整个页面画成了5部分，表头（1）是通过设置H5表头实现的；（2）和底部工具按钮（4）是属于固定不能动的页面部分；（3）属于自由扩展部分，数据增多的情况下应该提供下拉框；（5）则属于隐藏部分，点击页面按钮才会显示。

       2. 测量各个图片，文字等信息距离屏幕边界的距离。移动端屏幕大小不一，我们必须适应主流手机屏幕，平板设备等等。

                                    


        小技巧：这里可以通过ps进行测量：方法一、调出ps的信息窗口（窗口--信息），使用选区工具选择要测量的部分，信息工具栏就可以显示长宽信息，要想显示的信息是像素则点击下图的红框部分，选择面板选项进行设置。

                                                        


        方法二、直接使用ps的标尺工具，它支持导出txt文本；

        3. 先使用写死的宽高和定位方式编写静态的html页（操作熟练者可以省略此步骤）和静态属性（比如字体颜色），这样有助于我们整体感知。

        4. 对每一模块内部再次通过div包装的方式(个人觉得div是最亲切的html元素，简单实用)，设置模块的浮动方式以后必须要注意它对下面模块所造成的影响。

        5. 页面元素重叠方法，设置定位方式为position：absolute，然后按照需要设置z-index：0属性，数字越高的页面元素放到上面。

        6. 编辑页面的动态属性（主要是元素的大小信息，字体大小，定位距离等等），以便适应不同屏幕大小。

         获取屏幕宽高的方法：

                    var html = document.documentElement;

                    var windowWidth = html.clientWidth;

                    var windowHeiht = html.clientHeight;

         根据屏幕大小改变的方法，以下自适应元素的宽度：

                    document.getElementById("img2").style.width = 83 / 1334 * windowHeiht + "px";

         7. 技巧：页面上相差不大的部分可以选择class进行标识，这样可以统一设置样式，减少冗余代码；不建议使用js和css提出来写的方式，移动端客户对速度的请求是很苛刻的，不要因为增加请求，降低运行速度。

【出错总结】

         1. 调试页面的时候要注意大小写，比如根据函数获取margin-top方法，要写成

                   document.getElementById("img2").style.marginTop

            第二个字母一定要大写，否则调试不会报错，但也达不到自己想要的效果。

         2. 注意自己的元素是用class还是id进行标识，调用方法的过程中很容易忽略。

【总结】

        在前台开发过程中要求我们有一定的抽象能力，跟我们的后台框架比起来，它并不逊色，需要我们考虑如何解耦以及以后的扩展问题，数据如何介入等等问题。一点点摸索实践中。。。