摘要：走了程序媛這條路英式吐槽不經歷風雨怎么有夏天歲月帶走的是你的童年帶不走的是藏在你內心深處的那顆童心其實程序員都挺幼稚得啦哈哈常用標簽頁面結構設置寬度，為一個正整數，或字符串設置高度，一般設置了寬度，會自動解析出高度，可以不用設置

走了程序媛這條路
英式吐槽：不經歷風雨 怎么有夏天
2017.6.1
歲月帶走的是你的童年
帶不走的是藏在你內心深處的那顆童心
Ps:其實程序員都挺幼稚得啦O(∩_∩)O哈哈~

1. H5頁面結構

// width    設置viewport寬度，為一個正整數，或字符串‘device-width’
// height   設置viewport高度，一般設置了寬度，會自動解析出高度，可以不用設置
// initial-scale    默認縮放比例，為一個數字，可以帶小數
// minimum-scale    允許用戶最小縮放比例，為一個數字，可以帶小數
// maximum-scale    允許用戶最大縮放比例，為一個數字，可以帶小數
// user-scalable    是否允許手動縮放

2.其他Meta標簽

  H5標準聲明，使用 HTML5 doctype，不區分大小寫

 標準的 lang 屬性寫法

    聲明文檔使用的字符編碼

       頁面描述

      頁面關鍵詞

    網頁作者

      搜索引擎抓取

 iOS 設備 begin

  啟用360瀏覽器的極速模式(webkit)
    
          優先使用 IE 最新版本和 Chrome

3.頁面緩存設置

@ --------------------------------------中文字體的英文名稱
@ 宋體      SimSun
@ 黑體      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體    NSimSun
@ 新細明體  MingLiU
@ 細明體    MingLiU
@ 標楷體    DFKai-SB
@ 仿宋     FangSong
@ 楷體     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷體_GB2312  KaiTi_GB2312  
@
@ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; } 

引用iconfont字體方法

點擊查看如何引用iconfont字體

打電話給:15221639774
發短信給: 10086
點擊我發郵件

//ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；
//winphone系統,點擊標簽產生的灰色半透明背景，能通過設置去掉；
//特殊說明：有些機型去除不了，如小米2。對于按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
}   
// 也可以 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下

/IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持


屏幕旋轉的事件和樣式
//JS處理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?"landscape":"portrait";
    if(orientChk =="lapdscape"){
        //這里是橫屏下需要執行的事件
    }else{
        //這里是豎屏下需要執行的事件
    }
}

orientInit();
window.addEventListener("onorientationchange" in window?"orientationchange":"resize", function(){
    setTimeout(orientInit, 100);
},false)    

//CSS處理
//豎屏時樣式
@media all and (orientation:portrait){   }
//橫屏時樣式
@media all and (orientation:landscape){   }
超實用的CSS樣式
* { padding: 0; margin: 0; border: 0;}
input, textarea, button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; vertical-align: middle; }
ul, li { list-style-type: none; }
body { min-width: 320px; max-width: 640px; margin: auto;background: none;}
em { font-style: normal; }

//改變輸入框placeholder的顏色值
::-webkit-input-placeholder { /* WebKit browsers */color:#999;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#999;}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:#999;}
:-ms-input-placeholder { /* Internet Explorer 10+ */color:#999;}
audio元素和video元素在ios和andriod中無法自動播放
//音頻，寫法一


//音頻，寫法二


//JS綁定自動播放（操作window時，播放音樂）
$(window).one("touchstart", function(){
    music.play();
})

//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小結
//1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常
//2.audio元素沒有設置controls時，在IOS及Android會占據空間大小，而在PC端Chrome是不會占據任何空間
JS判斷微信瀏覽器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        return true;
    }else{
        return false;
    }
}

消除transition閃屏
.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
box-sizing: border-box的作用
當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。
例如：
舉個例子
.box {  
    width: 500px;     
    height:100px;  
    border: 1px solid #000;
    -webkit-box-sizing: border-box;     
        -moz-box-sizing: border-box;
                  box-sizing: border-box;
}
如果這時候你加上一個內邊距屬性，padding: 10px;
這個div不會撐開，即你所見的邊框位置沒有任何變動，但是“舉個例子”這句話會和div邊框有10px的間距。
一般在寫頁面的時候用這個屬性就不會再考慮邊框和內邊距會改變整體所占寬度，即不用再根據盒子模型再去計算，省去很多麻煩。
Jsonp原理
原理：而jsonp就是利用了
需要進入目錄文件git add +文件沖突路徑解決沖突一定不要忘記這一步哦
Linux常用命令


命令
作用



pwd
顯示當前操作路徑


ls
列出當前目錄所有文件


ls-al
查看隱藏文件


rm
移除某個文件


open
打開當前目錄視圖


history
grep npm
查找歷史記錄


cd $COMPANY
/Users/apple/Documents/Project/Maiqi


cat
查看


tail -f nohup.out
查看日志消息


vim filename
打開文件


git status
查看當前代碼狀態


git diff
查看修改文件


q
退出

npm run all npm run listen


Hbuilder常用命令


命令
作用



command+shift+F
格式化


command+T
查找文件