移動端基礎知識總結--從0開始

時間 2019-11-17

標籤移動基礎知識總結開始欄目無線简体版

原文原文鏈接

<!DOCTYPE html> <!--這個是HTML5使用的開頭聲明.-->
<html>
    <head>
        <title>html總體結構</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <!--禁止瀏覽器從本地計算機的緩存中訪問頁面內容問-->
        <!--no-cache:不緩存--><!--no-store:緩存但不存檔-->
        <meta http-equiv="Cache-Control" name="no-store" />
        <!--防止別人在框架裏調用本身的頁面-->
        <meta http-equiv="window-target" content="_top" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="HandheldFriendly" content="true" />
        <!--viewport:移動端設備視窗-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!--忽略頁面中的數字識別爲電話，忽略email識別,去除Android平臺中對郵箱地址的識別-->
        <meta content="telephone=no" name="format-detection" />
        <!--啓用360瀏覽器的極速模式(webkit)-->
        <meta name="renderer" content="webkit">
        <!--UC強制豎屏-->
        <meta name="screen-orientation" content="portrait">
        <!--QQ強制豎屏-->
        <meta name="x5-orientation" content="portrait">
        <!--windows phone 點擊無高光-->
        <meta name="msapplication-tap-highlight" content="no">
        <script type="text/javascript" src="js/style.js"></script>
        <link rel="stylesheet" href="css/style.css"/>

    </head>

    <body>
        <p>寫頁面咱們最早要了解的就是總體結構,而後就是頭部,中間部分,底部.</p>
        <p>meta標籤裏面的東西我已經大體寫好註釋了,大家能夠本身恰當的去作選擇.</p>
        <p>而後就是引入外部css,js文件了.</p>
        <p>從優化的角度,我建議是先引入js,再引入css.注意:JS文件廣泛應該寫到<span><pre></body></pre>前面</span></p>
        <p>瀏覽器是從第一行開始讀取文件的,有順序的來讀取.若是JS寫在head裏面會容易出現「阻塞」問題.</p>
        <P>咱們來先了解html中的div結構</P>
        <pre>
            <div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
            <ul>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </pre>
        <p>上面這個屬於div嵌套(跟ul li寫法同樣),先下外面最大的父元素,再逐個寫子元素.</p>
        <p>第二節如今我該給你們介紹下id,class選擇器,包括HTML5新增的選擇器</p>
    </body>

</html>

第二步,我要介紹的是:選擇器.javascript

選擇器:css

權重順序「 !important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符」.html

4個等級的定義以下：
第一等：表明內聯樣式,如: style=」」,權值爲1000.
第二等：表明ID選擇器,如：#content,權值爲100.
第三等：表明類,僞類和屬性選擇器,如.content,權值爲10.
第四等：表明類型選擇器和僞元素選擇器,如div p,權值爲1.
特別注意: !important這個儘可能少使用.前端

id選擇器:通常不是用來寫樣式用的,是提供給後端或JS來操做DOM的.java

class選擇器:經過定義類名來添加樣式,近年來有專業的前端開始利用後端的面向對象思想來寫前端頁面,目的是:簡潔,高效,複用性高.android

1,在class裏面實現class組合:class="c1 c2 c3 c4"(組合必需要不得大於4個)ios

2,在css樣式表中,能夠提升重複使用率,angularjs

　　　　　　　　　 .c1{height:100px} .c2{width:100%}
                /*通常狀況下,全部頁面佈局多多少少都會存在相同狀況:寬度,高度等是會重複出現的,那麼通常新手是會一個一個去寫,一個一個去定義.例如:*/ .div1{width:100%;height:100px;color:#000000;font-size:18px} .div2{width:100%;height:50px;color:#000000;font-size:16px}

爲了減小重複,提升效率,咱們能夠寫成下面的狀況:web

　　　　　　　　　 .div1,.div2{width:100%;color:#000000} .div1{height:100px;font-size:18px} .div2{height:50px;font-size:16px}

爲了能夠實現重複使用的,而不僅僅是寫一個css,而是「哪裏須要放哪裏」.chrome

3,模塊化:這個原本是後端纔會有的,如今前端也能夠實現了.那麼咱們該如何去理解呢？

<div class="menu">...這裏可能會出現多組div嵌套</div>

<div class="list">...這裏可能會出現多組div嵌套</div>

在css上咱們就要這樣來寫:(就是以父元素開頭,這樣就不會出現跟其餘模塊衝突)

　　　　　　　　　　　　/*公同使用的樣式:*/.menu div1,.menu div2,.list div1,.list div2{width:100%;color#000000} .menu div1{....} .menu div2{....} .list div1{....} .list div2{....}

下面來介紹下HTML5的新標籤和新選擇器---(只講解我經常使用的)

　　　　　　　article>h2{background:#239528;}/*h1是article的子元素*/ .title+p{background:#239528;}/*兄弟選擇器*/ .title1 li:first-child{background:#239528;}/*第一個li元素*/ p:nth-of-type(2){color:#0066cc;}/*2是指父元素的第二個選擇器*/ fieldset:nth-child(odd){background:#239528;} fieldset:nth-child(even){color:#0066cc;} ul li:last-child{background:#0066CC;color:#239528;}/*最後一個li元素*/

<h1>下面來介紹下HTML5的新標籤和新選擇器---(只講解我經常使用的)</h1>
        <address> Written by <a href="#">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
        <article>
            <h2>Internet Explorer 9</h2>
            <p>Windows Internet Explorer 9（簡稱 IE9）於 2011 年 3 月 14 日發佈.....</p>
        </article>
        <blockquote>
            <p class="title">This is a long quotation. This is a long quotationuotatiouotatio.</p>
            <p>This is a long quotation.</p>
            <p>This is a long quotation. This is a long quotation.</p>
        </blockquote>

        <figure>
            <figcaption>黃浦江上的的盧浦大橋</figcaption>
            <ul class="title1">
                <li>黃浦江</li>
                <li>黃浦江黃浦江</li>
                <li>黃浦江黃浦江黃浦江</li>
            </ul>
        </figure>

        <div>
            <input list="cars" value="asd" />
            <datalist id="cars">
                <option value="BMW">
                    <option value="Ford">
                        <option value="Volvo">
            </datalist>
        </div>
        
        <form>
            <fieldset> 身高： <input type="text" />
            </fieldset>
            <fieldset> 體重： <input type="text" />
            </fieldset>
            <fieldset> 姓名： <input type="text" />
            </fieldset>
            <fieldset> 住址： <input type="text" />
            </fieldset>
        </form>
        <details>
            <summary>Copyright 2011.</summary>
            <p>All pages and graphics on this web site are the property of W3School.</p>
        </details>

你能夠複製上面的html來查看頁面效果.

下面我來介紹下在移動端上該注意的去取瀏覽器默認樣式---style.css

@charset "utf-8"; html{font-size: 62.5%;} body {
    /*禁止選擇*/ -webkit-user-select:none;
    /*去掉a,img,input的遮罩層*/ -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    /*容許獨立的滾動區域和觸摸回彈*/ -webkit-overflow-scrolling:touch;
    /*跟上面的同樣..寫法是兼容問題的話.*/ -webkit-tap-highlight-color:transparent; -webkit-user-select:none;
    /*禁止系統默認菜單*/ -webkit-touch-callout:none; -webkit-box-sizing:border-box;
} *{-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td,button,article,aside,details,figcaption,figure,footer,header,nav,section{margin:0;padding:0} body,button,input,select,textarea,p,article,span{line-height:2rem} h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:3rem}
/*1rem=10px */
/*字體自適應*/
/*好比說你在320px分辨率時,設置字體大小爲1.2rem時,如今在不一樣寬度均可以看上去同樣大小實現自適應.*/
/*設計師是以iphone6爲設計標準時,16px=100%,每一個斷點以2px遞增頁面最小的字體大小*/ h1{font-size:2.8rem;} h2{font-size:2.6rem;} h3{font-size:2.2rem;} @media only screen and (min-width:360px) and (max-width:374px){
    /*三星大屏幕機最低寬度:note2-note3,S2-S4:14px*/ html{font-size:87.5% !important;} } @media only screen and (min-width:375px) and (max-width:430px) {
    /*Iphone6,Iphone6plus最低寬度:16px*/ html{font-size:100% !important;} } /*手機橫屏:最低寬度480px:18px*/ @media only screen and (min-width:480px) and (max-width:740px){ html{font-size:112.5% !important;} } /*平板電腦:最低寬度768px:20px*/ @media only screen and (min-width:768px) { html{font-size:125% !important;} } html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋轉屏幕時自動調整字體大小*/ textarea{resize:none;-webkit-appearance:none;outline:none} a,img{-webkit-touch-callout:none;}
/* 連接選中以及鼠標懸浮樣式*/ a:active, a:hover { outline: 0; text-decoration: none;
}

/*取消標籤的特殊字體樣式*/ strong { font-weight: normal;
} em , i{ font-style: normal;
}
/*取消按鈕在inphone上的默認樣式*/ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance:button; cursor:pointer } input[type="checkbox"], input[type="radio"] { box-sizing:border-box; padding:0; -webkit-appearance:none;
} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height:auto } input[type="search"] { -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:textfield } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance:none } input[type=button] { outline:0; -webkit-appearance:none } table { border-collapse:collapse; border-spacing:0 } audio, canvas, progress, video { display:inline-block; vertical-align:baseline } audio:not([controls]) { display:none; height:0 } input::-webkit-input-placeholder{color:#F0F0F0;} textarea::-webkit-input-placeholder{color:#F0F0F0;} input::-webkit-input-speech-button {display:none}
/*android上input:focus時input不隨軟鍵盤升起而擡高的狀況和點擊時高亮*/ a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0);/*這個是兼容2.3如下的系統*/ -webkit-user-modify:read-write-plaintext-only;/*這個兼容到4.0以上的系統*/
} table {border-collapse:collapse;border-spacing:0;} th {text-align:inherit;} fieldset,img {border:none;} abbr,acronym {border:none;font-variant:normal;} del{text-decoration:line-through;} ol,ul {list-style:none;} caption,th {text-align:left;} sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup {top:-0.5em;} sub {bottom:-0.25em;} ins,a,a:hover {text-decoration:none;} a:focus,*:focus {outline:none;} .clearfix:before,.clearfix:after {content:"";display:table;clear:both;overflow:hidden;} .clearfix {zoom:1;} .clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;} .hide {display:none;} .block {display:block;}
/*單行文本控制溢出和換行*/ .outL{white-space:normal;word-break:break-all;width:100px;} .outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}
/*多行文本溢出顯示省略號(...)的方法------webkit-line-clamp:2;這裏的數字表明多少行*/ .ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/*佈局*/ .fl{float:left;display:inline;} .fr{float:right;display:inline;} .cb{clear:both;} .cl{clear:left;} .cr{clear:rigth;} .rel{position:relative;} .abs{position:absolute;} .tac{text-align:center;} .tal{text-align:left;} .tar{text-align:right;} .dib{display:inline-block;} .vab{vertical-align:bottom;} .vam{vertical-align:middle;} .vat{vertical-align:top;}
/*網格*/ .box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;} .grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .grid{*zoom:1} .grid:before,.grid:after{display:table;content:"";line-height:0} .grid:after{clear:both} .grid{list-style-type:none;padding:0;margin:0} .grid>.grid{clear:none;float:left;margin:0 !important} .wrap{float:left;width:100%}
/*網格*/
/*flex*/ .flex{display:-webkit-flex;display:flex;display:-webkit-box;-webkit-flex:1;flex:1;-webkit-box-flex:1;} .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;}
/*垂直方向*/ .col{display:-webkit-box;display:flex;display:-webkit-flex;height:100%;-webkit-box-orient:vertical;flex-direction:column}
/*水平方向*/ .row{display:-webkit-flex;display:flex;display:-webkit-box;margin:auto;width:100%;height:auto;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;-webkit-box-orient:horizontal;-webkit-box-lines:multiple} .flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1} .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2} .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3}

/*flex*/
/*容器*/ .wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding-bottom:60px;overflow:auto;-webkit-overflow-scrolling:touch;}
/*頭尾*/ header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;} header{top:0;height:44px;} footer{bottom:0;}
/*ios上使用transform的時候的閃屏問題能夠嘗試使用 .transform{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;} */
/*寬度*/ .w100p{width:100%} .w20p{width:20%;}

/*邊距*/ .m5{margin:5px;} .p5{padding:5px;} .box{height:100%;text-align:center;}
/* 頁面背景圖,須要注意問題: 1,該圖片看設計師作的圖片大小,否則作手機的怎麼可能會在PC上瀏覽清晰呢? 2,利用好background-size:100% 100%;就可讓整個背景圖都正確的展現到頁面上. */ body{background:url('../img/back.jpg') no-repeat;background-size:100% 100%;}
/*若是底部出現留白,不能佔滿屏幕時的解決方法: 添加 html,body{height:100%} */
/* 頁面背景圖 */

/* 手機斷點 */
/*min-device-width或max-device-width指的是設備整個渲染區寬度(設備的實際最大或最小寬度), 用了它可能在某些安卓機沒法調用到下面的樣式,由於某部分安卓機的屏幕大小不一致.*/
/*iphone4等屏幕高度480px的解決方案*/ @media only screen and (max-device-height:480px) {
    
}
/*iphone5以上的屏幕高度解決方案*/ @media only screen and (min-device-height:481px) {
    
} @media only screen and (min-width:360px) and (max-width:374px){
    /*三星大屏幕機最低寬度:note2-note3,S2-S4*/

} @media only screen and (min-width:375px) and (max-width:430px) {
    /*Iphone6 plus,紅米等大屏幕手機*/

}

/*手機橫屏:orientation:landscape*/ @media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {
/*小米1,1s,iphone4,4s,5,5s等屏幕橫屏寬度斷點*/
} @media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){
/*三星,紅米等手機屏幕橫屏寬度斷點*/
} @media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {
/*Iphone6橫屏寬度斷點*/
} @media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){
/*Iphone6 plus橫屏寬度斷點*/
} @media all and (orientation:landscape) {  
 /*這裏是指全部屏幕橫屏時*/
}  


/*平板和電腦:最小寬度768px*/ @media only screen and (min-width:768px) and (max-width: 959px) {

} @media only screen and (min-width:960px) and (max-width:1024px) {

} @media only screen and (min-width:1025px)and (max-width:1536px) {

}

上面有足夠的註釋說明，作移動端頁面就是這麼煩,要考慮不一樣屏幕的佈局，字體大小等狀況.

如今該輪到最痛苦的一個知識點:JavaScript

1,先講解使用次數最多的點擊事件開始吧:

通常來講，咱們新手寫點擊事件會相似於下面這樣的狀況:獲取ID值,添加點擊事件函數.

　　　　var show=document.getElementById("show");
        show.onclick=function(){
            show.className="hide";
        };
        var mask=document.getElementById("mask");
        mask.onclick=function(){
            var show=document.getElementById("show").className="show";
        };
        var back=document.getElementById("back");
        back.onclick=function(){
            var show=document.getElementById("show").className="hide";
        };

教你們一個簡單易懂的封裝:

//這個是最基本的封裝，簡單易懂,有興趣寫出更高效的,咱們能夠聯繫溝通
        function $(obj){return document.getElementById(obj)};//返回dom對象
        //上面爲封裝,下面爲調用
        //$是函數名.
        show.onclick=function(){
            show.className="hide";
        };
        mask.onclick=function(){
            var show=document.getElementById("show").className="show";
        };
        back.onclick=function(){
            var show=document.getElementById("show").className="hide";
        };

若是不是用id而是打算用標籤名,類名等,記住要添加[]這個來作標記索引.

document.getElementsByClassName()[索引:0開始]

document.getElementsByName()[索引:0開始]

document.getElementsByTagName()[索引:0開始]

下面是DOM簡單基礎:

　　　　　　.chat{
            color:#00cc66;
            font-size:28px;
            background:#999999;
            }

改變元素樣式3種方法:

　　　　 <p id="con">Hello World!</p>
        <p id="p2">Hello Wind!</p>
        <p id="p3">welcome!</p>

document.getElementById("p2").className="chat"

改變樣式在DOM裏面最好的方法仍是寫className，會比你寫style好！

單擊改變事件:

<h1 onclick="change(this)">OK</h1>

function change(id) {
                    id.innerHTML="Hello";
                    id.className="chat"
                }

toogle:點擊改變，再點擊返回.

　　　　　<input type="button" value="顯示" />

        <div style="height:100px;background:#FF69B4;"></div>

有2種方式來實現toogle()這個方法：

var toggle = false;//記得在input上添加 onclick="toggles()",div上添加id="toggle" 
            function toggles() {
                if (toggle == false) {
                    document.getElementById("toggle").style.display = "none";
                    toggle = true;
                } else {
                    document.getElementById("toggle").style.display = "block";
                    toggle = false;
                }
            }

第二種:

　　　　　　　　  var onInput = document.getElementsByTagName("input")[0];
                var oDiv = document.getElementsByTagName("div")[0];
                onInput.onclick = function() {
                    var style = oDiv.style;
                    style.display = style.display == "none" ? "block" : "none";
                    onInput.className = style.display == "none" ? "open" : ""
                }

建立和追加節點元素:

.anthor{color:#26C6D9}

這個是專門處理DOM比較好的一個優化方案:

　　　　　　　　　 //在文檔以外建立並更新一個文檔片段，而後將它附加在原始列表上
                //文檔片段是一個輕量級的document對象,它被設計專用於更新、移動節點之類的任務
                //使用容器存放臨時變動,最後再一次性更新DOM
                var fragment = document.createDocumentFragment();
                for (var i = 0; i < 10; i++) {
                    var p = document.createElement("p");
                    var oTxt = document.createTextNode("段落" + i);
                    p.appendChild(oTxt);
                    fragment.appendChild(p);
                }
                var anthor = document.getElementById("anthor");
                anthor.appendChild(fragment);