一、布局
1、固定布局
固定布局是指隨著瀏覽器的寬度變大變小，頁面的整體布局不會發生改變。如果瀏覽器寬度小于頁面寬度，就會出現滾動條。如下圖：
2、彈性布局
彈性布局是指頁面寬度是不固定的，頁面寬度隨著瀏覽器的大小而變大變小。但是它不會去自動調整里面元素的擺放位置。所以如果是一個PC端網頁，如果在移動端看，可能會變得非常小，體驗也不夠好。
3、響應式布局
響應式布局是頁面布局可以響應不同屏幕尺寸的設計方法。同一個網頁，有可能在PC端瀏覽，也可能在4寸的安卓機上瀏覽，或者在27寸的iMac上瀏覽，在不同的尺寸下面，響應式可以自適應的改變布局，提供良好的體驗。如下圖，瀏覽器尺寸由大變小，頁面自適應的過程：
那么響應式布局有什么優勢呢?
1)PC端和移動端共用一套網頁，降低維護成本。
2)SEO優化，搜索引擎更愿意接收適配移動端和PC端的網頁。
二、識別html原生控件
拿到一個網頁，它可能有下拉框、搜索框、按鈕、彈出框等元素。怎樣識別它是原生的，還是后期程序員寫出來的呢?
下面我們來看web前端的原生控件都有哪些：
1、單行文本輸入框
2、單行密碼輸入框
3、只能輸入數字的單行輸入框
4、文件上傳輸入框
5、多行文本輸入框
6、單選按鈕
7、多選按鈕
8、下拉列表
注意：下拉列表在PC端和移動端顯示出來的效果是不一樣的。上面的圖是在PC端的表現，移動端上，安卓和iOS上面的表現也不一樣。
安卓：
iOS：
9、可點擊按鈕
10、日期選擇器
注意：日期選擇器不僅有選擇 年/月/日，還有 年/月，星期，時/分。
11、數字滑動條
注意：中間的滑塊，可以用鼠標自由拖動，拖動的數字范圍，可以自由設置。
12、視頻播放
注意：只要你有視頻資源，在這個控件里寫上資源地址，就可以播放啦~
13、音頻播放
注意：這里也一樣，只要有音頻資源，放上地址就可以播放，這個控件還有控制音量大小，靜音，下載音頻的功能。
暫時想到這些啦，歡迎補充~
三、看性能
從前端能看到的性能大概有以下：
1、資源的懶加載
比如說一個H5頁面有一張很長的背景圖，我們一般是這樣做的，會把背景圖分割成n份，然后把它們拼接起來。
在手機屏幕視野內的，會優先加載出來，不在視野范圍內的，就不加載。
但是當你往上拉的時候，下一張圖片就會加載。當你看到往上拉，圖片才慢慢加載出來的時候，一般是用了懶加載技術。這樣做可以節省流量，加快加載速度，提高性能。
2、分頁加載
像淘寶這樣很多商品列表的頁面，用分頁加載是必不可少的，當你往上拉頁面的時候，就會去加載下一頁的商品數據了。一般都會有加載中這樣的提示語，這樣做同樣也是為了減少請求，節省流量。
3、應用緩存
有沒有發現，有些H5頁面，點擊第一次的時候，加載的有點慢，但是點第二次的時候，速度非常快，那是因為應用了本地的緩存的緣故。
4、單頁面應用
單頁面應用是什么意思呢?比如說，一個注冊頁面，從注冊信息頁，發短信驗證碼，到注冊成功頁，這3個頁面是同一個html文件。當你只看到注冊頁面的時候，是因為它把發短信和成功頁隱藏掉了。
利用單頁面技術，可以減少文件的個數，減少請求，提高性能，缺點就是SEO。因為一個html里面，有關于SEO優化的字段，如果減少了html文件，那就少了那幾個seo優化字段了。
那么問題來了，怎樣看出，這個H5頁面是否用了單頁面技術呢?一般來說，同一個頁面之間的跳轉，可以設置很多換場的動畫，比如說從左往右滑，從上往下滑，但是多頁面之間的跳轉動畫是實現不了的，所以可以從頁面之間的換場來識別。
后面會繼續講系列文章~有錯誤歡迎指出~
文/lemon_shan
更多關于云服務器，域名注冊，虛擬主機的問題，請訪問三五互聯官網：m.shinetop.cn