iOS中經常涉及到與H5界面的交互，但是無奈不懂H5，每次交互都需要與前端人員交流；其次就是每次看到H5的代碼總覺得有一種似曾相識的感覺?；谝陨蟽煞N原因，遂花費7天學習H5，并完成以下Demo.

仿百度頁面

仿百度首頁.png

仿Mac桌面

仿Mac界面.gif

登錄界面

登錄界面JS.gif

Tab選項卡

Tab選項卡JS實現.gif

1 HTML

HTML標簽類型：
HTML有很多標簽，根據現實的類型，主要分為3大類：

• 塊級標簽：
  獨占一行的標簽，能隨時設置寬高的標簽（div，p，h1，還，ul，li）

• 行內標簽（內聯標簽）：
  多個行內標簽能同時顯示在同一行，可以使用
  換行；根據內容確定標簽的寬高（span，a，）

• 行內-塊級標簽（內聯-塊級標簽）：
  多個行內-塊級標簽可以顯示在同一行；可以隨時設置寬高（input，button）
  通過修改標簽的顯示類型可以滿足不同的需求

延伸：
css中有一個display屬性，可以用來修改標簽的顯示類型，該屬性有4個值
none：隱藏標簽；（相當于OC中的hidden，內容和布局都會消失）
block：讓標簽變為塊級標簽
inline：將標簽變為行內標簽
inline-block:將標簽變為行內塊級標簽

2 CSS

CSS兩大重點：選擇器和屬性
CSS樣式：行內樣式；業內樣式；外部樣式

2.1 CSS選擇器：

2.1.1選擇器的種類

• 1.標簽選擇器
• 2.類選擇器
• 3.id選擇器
• 4.并列選擇器
• 5.復合選擇器
• 6.后代選擇器
• 7.直接后代選擇器
• 8.相鄰兄弟選擇器
• 9.屬性選擇器
• 10.偽類 * 11.偽元素
• 12.通配符

2.1.2 CSS：選擇器的優先級

• 相同級別的選擇器：a.就近原則 b.疊加原則
• 優先級：
  important >內聯 > id選擇器 > 類選擇器 > 標簽選擇器 | 偽類 |屬性 | 偽元素 >通配符 > 集成
  id只能有一個，多個id時會失效，class可以有多個
  選擇器的針對性越強，它的優先級就越高
• 通過選擇器的權值來量化選擇器的優先級
• 1.通配選擇器（*）：0
• 2.標簽：1
• 3.類：10
• 4.屬性：10
• 5.偽類：10
• 6.偽元素：10
• 7.id：100
• 8.important：1000（只要輸入！important 其他一切都是渣）
  例如：
  div{
  color：green !important
  }

原則：選擇器的權值加到一起，大的優先；如果相同，后定義的優先

2.2 css的常見屬性

CSS有很多屬性，根據繼承性，可以分為可繼承屬性和不可繼承屬性。

2.2.1 可繼承屬性：

父標簽的屬性值可以傳遞給子標簽，一般都是文字控制屬性

• 所有標簽可以繼承的屬性：
  visibility：hidden，只隱藏內容，不隱藏尺寸
  cursor：決定光標的類型樣式，具體可以上w3school查看
• 內聯標簽可以繼承的屬性：
  line-height，color，font-size，font-family，font-weight（是否加粗，normal，bolder），text-decoraion（是否設置下劃線，none，underline，overline，line-throgth...)。
• 塊級標簽可繼承：
  text-indent(是否首行縮進，20px，10%),text-align（對齊樣式）
• 列表標簽可繼承：
  list-style(none,circle,square)、list-style-type.....

2.2.2 不可繼承屬性：

父標簽屬性值不能傳遞給子標簽，一般是區塊控制屬性（backgroundcolor，width，height）

1.display，margin，border，padding，background（設置圖片：url：imageName 默認是平鋪，不平鋪可加no-repeat）
background-size：cover（把背景圖片拉伸到足夠大）
2.height，min-height，max-height，width...
3.overflow（對超出部分進行處理，文字多于背景色 hidden：截??；scroll（auto）：滾動條），position，left，right，top，bottom，z-index
4.float,clear

CSS屬性補充(有待補充....)

水平居中：
行內標簽以及行內-塊級標簽：text-align：cneter；
塊級標簽：margin：0 auto
垂直居中：
line-height
屬性補充：box-sizing
以特定的方式定義匹配某個區域的特定元素，默認值為content-box，border-box，設置以后可以把邊框和內邊距放入盒子內部

2.3 CSS布局

默認情況下，所有的網頁標簽都在標準流布局里面，標準流：從上到下，從左到右;但是很多時候我們需要自定義布局，從而需要脫離標準流布局。
脫離標準流的方法：

• 1.float屬性
  取值為left（right）脫離標準流，浮動在父標簽的最左（右）邊
• 2.position屬性 和left，right，top，bottom屬性
  配圖：

盒子模型

網頁其實就是標簽嵌套標簽，網頁上的每一個標簽都是一個盒子
盒子的四個屬性：盒子結構圖（此處應該有圖片）
標準盒子模型：（配圖）
IE盒子模型：
填充（padding，內邊距）- 屬性

3 JavaScript

JavaScript是一門廣泛用于瀏覽器客戶端的腳本語言（腳本語言：縮短傳統的編寫-編譯-鏈接-運行過程，解釋運行而非編譯運行）

JS常見用途：

• 1.HTML DOM操作 （節點操作，比如添加、修改、刪除節點）
• 2.給HTML網頁增加動態功能，比如動畫
• 3.事件處理，比如監聽鼠標點擊、鼠標滑動、鍵盤輸入

Node.js:
Node是一個JavaScript運行環境（runtime），是對Google V8引擎進行了封裝
V8引擎執行JS的速度非?？欤阅芊浅：?br> Node.js優勢:
可以作為后臺語言;單線程：不新增額外線程的情況下，依然可以對任務進行并發處理（采用事件輪詢）CPU在同一時間只能處理一件事
飛阻塞I/O、V8虛擬機，事件驅動

3.1 JS的書寫方式

JS常見的書寫方式有2種

• 頁內JS：在當前網頁的script標簽中編寫

<script type="text/javascript">
</script>

• 外部JS

<script scr="index.js"></script>

3.2 JS常用語法

3.2.1 JS的基本數據類型

調試輸出：console.log('正在被調試') 審查元素-->console
聲明變量使用var ，使用typeof可以打印出真實類型
字符串：

string類型與number類型相加時，從左往右，任何類型變量與string類型拼接時都會變為string類型。
var string1 = 10 + 10 + '10' + '10';//201010
var string2 = '10' + '10' +10 + 10;//10101010
var string3 = ('10' + 10) +'10' + 10;//10101010

數組：
var newArray = [10，2，age，['快輸出我','CrabMan']];
JS中數組是一個object類型，通過遍歷輸出數組內容

//第一種方式 
for(var i = 0;i<newArray.length;i++){
console.log(newArray[i]);
}

//第二種方式 
for(var i in newArray){
console.log(newArray[i]);
}

//輸出“快輸出我”
console.log(newArray[newArray.length - 1][0]);

newArray.pop();刪除數組中最后一個元素

newArray.push();為數組添加參數

//取出數組中的最小值
var newNumbers = [10,2,34,56];
//var minNumber = Math.min();
var minNumber = Math.min.apply(null,newNumbers);
console.log(minNumber)

3.2.2 JavaScript中的函數

• 有名函數
  function 函數名（參數列表...）{
  函數體
  return 返回值
  }

• 匿名函數
  var 變量名 = function （）{
  return 返回值
  }

函數例子：

<script type="text/javascript">
//命名一個求和函數
function sum(num1,num2){
return num1 + num2;
//調用函數 
var result = sum(200,50);
console.log(result);
}

//萬能加法函數 參數個數不固定
function sum1(numbers){
var count = 0;
for(var i = 0 ;i < numbers.length; i++){
count +=numbers[i];
    }
return count;
}
//調用函數 
var numbers = [12,334,'10'];
var result1 = sum1(numbers);
console.log(result1);
//結果為34610


//內置數組 arguments
function sum2(){
var count = 0;
for(var i = 0 ;i < arguments.length; i++){
count +=numbers[i];
    }
return count;
}
//內置數組的調用 
var result2 = sum2(10,20,30);

//匿名函數 ，需要使用一個變量來接收 
 var test = function (){
console.log('我是匿名函數')
}
//調用匿名函數
test();
</script>

3.2.3 JavaScript中的對象

OC中的類其實就一個結構體，里面的元素對應類不同的屬性。對象就是結構體元素被賦值以后具體化得類。所以JS得中的對象就不難理解了。

<script type=text/javascript>
//this 在哪個對象中就代表該對象
     var dog = {
             name = 'wangcai';
             age = 11;
             height:1.21;
             eat:function(something){
        console.log(this.name+'吃'+something)
          }
}

//調用狗對象的屬性
console.log(dog.name);
//調用狗的方法
dog.eat('骨頭');
</script>

批量生成??，需要一個構造函數,產生對象

<script type=text/javascript>
       //構造函數 
     function Dog (){
            this.name = null;
            this.height = null; 
            this.firends = null;
            this.age = null;
            this.eat() = function(something){
             console.log(this.name+'吃'+something)
              }
        }

       //批量產生狗 
      var dog1 = new Dog();
       dog1.name = '八戒';
                  ......
      var dog2 = new Dog();
      dog2.name = '悟空';
               .......
   console.log(dog1,dog2);
</script>

3.2.3 JavaScript中的邏輯或 和 邏輯與

JS中的邏輯與 和 邏輯或比較靈活還有其他的用途

<script type = text/javascript>
//需求newName的取值，name1有值就為name1，否則就為name2....
var name1 = 'name1';
var name2 = 'name2';
var name3 = 'name3';
var name4 = 'name4';
//一般方法可以用if else判斷
//JS中的方法 ||的靈活使用 
var newName = name1 || name2 || name3 || name4;
console.log('newName');

//邏輯與的活用
var age = 22;
if(age > 18){
console.log('已經成年')
}

//如果前面條件為真，則執行后面的代碼   條件 && {}
(age > 20) && console.log('真的已經成年了?。?！')；
</script>

3.3 JavaScript中的內置對象（window 和 document）

因為JS中的window以及document比較重要，因此單獨列出來一個標題。

window：

1.所有的全局變量都是window的屬性
2.所有全局的函數都是window的函數
3.動態跳轉

 <script type=text/javascript>
           function Dog (){
            console.log(this);
        }
       Dog();//打印出來為window對象 

       var dog1 = new Dog();//打印出來為Dog();

//window實現動態跳轉
       location.herf = ....;
       window.location.herf = 'http://baidu.com';

</script>

document用途：

1.動態的獲取當前網頁中的任意一個標簽
2動態的對獲取到的標簽進行CRUD
增加(Create)；讀取(Retrieve)（重新得到數據）；更新（Update）和刪除（Delete）

<script type = text/javascript>
          //動態插入
          document.write('Hello World!');
         //動態插入標簽
          document.write('<input type = date>')

       //更改圖片 
      function changeImg(){
      //  拿到圖片對象,根據id獲取
        var img = document.getElementById('icon');
         console.log(img);
         //更改圖片,如果是自己的屬性可以直接輸入，若不是需要加style
         img src = 'image/img02.jpg';
        
      }
 
</script>
</head>
<body>
      ![](image/img01.png)
      <p></p>
      <button onclick = "changeImg();">更改圖片</button>
</body>

//每次點擊都更改圖片邏輯，body里面，切記寫在標簽后面
//indexOf    lastIndexOf  如果含有某參數，則返回任意正數，否則返回-1
<script type="text/javascript">
          
        var img = document.getElementsByClassName('icon')[0];
        var btn = document.getElementsByTagName('button')[0];

btn.onclick = function(){


     if(img.src.lastIndexOf('image01.png') != -1){
                img.src = 'image/img02.png';
   } else{
    img.src = 'image/img01.jpg'  
    }
        //更改button的顯示內容
        if(btn,innerText == '更改圖片'){
           btn.innerText = '圖片復原';
           } else{
          btn.innerText = '更改圖片';
       }
}
</script>

監聽常用的事件

<body> 
       <input id= "int" type = "text" value="我是需要拷貝的內容">
       <img scr="image/img01.png" name"icon">
        <script>
                 //拿到對應的標簽
               var img = document.getElementsByName('icon')[0];
               //常用事件
                //鼠標進入圖片
                  img.onmouseover = function(){
                 console.log('光標進入圖片范圍')；
                  }
                  //鼠標在圖片上移動
                  img.onmousemove = function(){
                 console.log('光標在光標上移動')；
                  }
                   
                  //鼠標移除到圖片范圍以外
                  img.onmouseout = function(){
                 console.log('光標移除圖片')；
                  }
                 
                  //當頁面加載完畢,調用標簽等
                  window.onload = function(){
                  alert('頁面加載完畢'); 
                  }
                  
                   //拿到對應的輸入框，監聽輸入框
                    var input = document.getElementsById('int'); 
                   //輸入框點擊時,改變輸入框狀態
                   input.onfocus = function(){
                 input.width = '700px';
                 input.height = '60px';
                   //css中的屬性要通過style
                     input.style.outline = 'none';
                      inpue.syle.fontSize = '30px';
                  }
                    
                   //拿到選中的內容
                  input.onselect = function(){
                alert('input.value')
                  }
                   

         </script>
</body>

3.4 DOM的CRUD--JS外部引用

3.4.1 C -- Create

//C -- Create
document.write('Hello World');
//因為JS是將下面的代碼直接插入到body里面，所以src不使用../
document.write('![](image/img01.png)')

//定點插入
var div = document.createElement('div');
div.style.backgroud = 'red';
div.style.width ='500px';
div.style.height = '300px';
//添加到父標簽中 
document.body.appendChild(div);

//向div中插入一張圖片
var img = document.createElement('img');
img.src = 'imgae/img01.png';
div.appendChild(img);

3.4.2 D--Delete

document.body.removeChild(p);

//拿到目標標簽的父標簽，然后刪除
p.parentNode.removeChild(p);

//刪除常用 
p.remove();

改 ：拿到對應的標簽，做出改變 ...
查：

find(document.body);

function find(object){
for (var i in object){
   console.log(object[i])

     }
}

//查節點
console.log(document.body.childNodes);

3.5 Canvas繪制圖形標簽

3.5.1 Canvas標簽介紹

• 畫板標簽
  <canvas id = "canvas"></canvas>

JS書寫方式：context是一個回執圖形的上下文環境，2d是二維圖形

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

瀏覽器不支持畫板標簽時會顯示畫板內容，并且畫板的默認尺寸為300x150
<canvas id='canvas' style='backgourd-color':black;>當前的版本不支持，請先更新版本</canvas>

3.5.2 Canvas繪制直線

起點
context.moveTo(100,100);
終點
context.lineTo(400,400);
繪制
context.stroke();
設置線條的顏色和寬度
context.strokeStyle='red';
context.lineWidth = 5;
設置填充色
context.fillStyle = 'blue';

//繪制多條線時 ,canvas是基于狀態的，會以最后的顏色為準，所以當每條線顏色不一樣時，需要在設置顏色后設置。
context.beginPath();
context.moveTo();
context.lineTo();
context.closepath();//自動將圖形繪制為封閉圖形

3.5.3Canvas繪制弧線

context.arc(
//原點和半徑
centerX,centerY,radius,
//起始和終點角度
startingAngle,endingAngle,
Man.PI
//是否順時針（可選，可以不設置）
anticlockwise=false
)

3.6 jQuery

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)

<script scr="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type = "text/javascript">
           //拿到p標簽
          alert($('p'));
          //查看p中的內容
         console.log($('p').text());
          //改變p標簽的內容
          $('p').text('我是段落');

          //查看img的屬性
         console.log($('img').attr('src'));
        //改變img的屬性
        $('img').attr('src','image/img02.jpg');
        //改變圖片的寬度
        $('img').attr('width','200px');

       //DOM操作 css選擇器都可以用于jQuery,通過>定點查找標簽
     $('.test1>img').attr('src','image/img03.jpg';)

     //點擊按鈕隱藏和顯示圖片
       $('button').eq(0).on('click',function(){
               $('p').show();
               $('img').show();
         });
        
           $('button').eq(1).on('click',function(){
               $('p').hide();
               $('img').hide();
         });
        
          //切換按鈕 圖片顯示和隱藏
           $('button').eq(2).on('click',function(){
               $('p').toggle();
               $('img').toggle();
         });
        
        //遍歷
        var number = [10,20,332,19];
        $.each(number,function(index,value){
           console.log(index,value);

          });
        
         //取出對應數值的下標
         var index = $.inArray(20,number);
         console.log(index);
//使用jQuery寫css
         $('#main>p').css({
             'border':'1px solid red'
             'color' :'red'
        });
</script>