iOS中经常涉及到与H5界面的交互，但是无奈不懂H5，每次交互都需要与前端人员交流；其次就是每次看到H5的代码总觉得有一种似曾相识的感觉。基于以上两种原因，遂花费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的速度非常快，性能非常好
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>