iOS中經(jīng)常涉及到與H5界面的交互，但是無奈不懂H5，每次交互都需要與前端人員交流；其次就是每次看到H5的代碼總覺得有一種似曾相識的感覺。基于以上兩種原因，遂花費(fèi)7天學(xué)習(xí)H5，并完成以下Demo.
仿百度頁面
仿Mac桌面
登錄界面
Tab選項(xiàng)卡
1 HTML
HTML標(biāo)簽類型：
HTML有很多標(biāo)簽，根據(jù)現(xiàn)實(shí)的類型，主要分為3大類：
塊級標(biāo)簽：
獨(dú)占一行的標(biāo)簽，能隨時(shí)設(shè)置寬高的標(biāo)簽（div，p，h1，還，ul，li）行內(nèi)標(biāo)簽（內(nèi)聯(lián)標(biāo)簽）：
多個(gè)行內(nèi)標(biāo)簽?zāi)芡瑫r(shí)顯示在同一行，可以使用
換行；根據(jù)內(nèi)容確定標(biāo)簽的寬高（span，a，）行內(nèi)-塊級標(biāo)簽（內(nèi)聯(lián)-塊級標(biāo)簽）：
多個(gè)行內(nèi)-塊級標(biāo)簽可以顯示在同一行；可以隨時(shí)設(shè)置寬高（input，button）
通過修改標(biāo)簽的顯示類型可以滿足不同的需求
延伸：
css中有一個(gè)display屬性，可以用來修改標(biāo)簽的顯示類型，該屬性有4個(gè)值
none：隱藏標(biāo)簽；（相當(dāng)于OC中的hidden，內(nèi)容和布局都會消失）
block：讓標(biāo)簽變?yōu)閴K級標(biāo)簽
inline：將標(biāo)簽變?yōu)樾袃?nèi)標(biāo)簽
inline-block:將標(biāo)簽變?yōu)樾袃?nèi)塊級標(biāo)簽
2 CSS
CSS兩大重點(diǎn)：選擇器和屬性
CSS樣式：行內(nèi)樣式；業(yè)內(nèi)樣式；外部樣式
2.1 CSS選擇器：
2.1.1選擇器的種類
- 1.標(biāo)簽選擇器
- 2.類選擇器
- 3.id選擇器
- 4.并列選擇器
- 5.復(fù)合選擇器
- 6.后代選擇器
- 7.直接后代選擇器
- 8.相鄰兄弟選擇器
- 9.屬性選擇器
- 10.偽類 * 11.偽元素
- 12.通配符
2.1.2 CSS：選擇器的優(yōu)先級
- 相同級別的選擇器：a.就近原則 b.疊加原則
- 優(yōu)先級：
important >內(nèi)聯(lián) > id選擇器 > 類選擇器 > 標(biāo)簽選擇器 | 偽類 |屬性 | 偽元素 >通配符 > 集成
id只能有一個(gè)，多個(gè)id時(shí)會失效，class可以有多個(gè)
選擇器的針對性越強(qiáng)，它的優(yōu)先級就越高 - 通過選擇器的權(quán)值來量化選擇器的優(yōu)先級
- 1.通配選擇器（*）：0
- 2.標(biāo)簽：1
- 3.類：10
- 4.屬性：10
- 5.偽類：10
- 6.偽元素：10
- 7.id：100
- 8.important：1000（只要輸入！important 其他一切都是渣）
例如：
div{
color：green !important
}
原則：選擇器的權(quán)值加到一起，大的優(yōu)先；如果相同，后定義的優(yōu)先
2.2 css的常見屬性
CSS有很多屬性，根據(jù)繼承性，可以分為可繼承屬性和不可繼承屬性。
2.2.1 可繼承屬性：
父標(biāo)簽的屬性值可以傳遞給子標(biāo)簽，一般都是文字控制屬性
- 所有標(biāo)簽可以繼承的屬性：
visibility：hidden，只隱藏內(nèi)容，不隱藏尺寸
cursor：決定光標(biāo)的類型樣式，具體可以上w3school查看 - 內(nèi)聯(lián)標(biāo)簽可以繼承的屬性：
line-height，color，font-size，font-family，font-weight（是否加粗，normal，bolder），text-decoraion（是否設(shè)置下劃線，none，underline，overline，line-throgth...)。 - 塊級標(biāo)簽可繼承：
text-indent(是否首行縮進(jìn)，20px，10%),text-align（對齊樣式） - 列表標(biāo)簽可繼承：
list-style(none,circle,square)、list-style-type.....
2.2.2 不可繼承屬性：
父標(biāo)簽屬性值不能傳遞給子標(biāo)簽，一般是區(qū)塊控制屬性（backgroundcolor，width，height）
1.display，margin，border，padding，background（設(shè)置圖片：url：imageName 默認(rèn)是平鋪，不平鋪可加no-repeat）
background-size：cover（把背景圖片拉伸到足夠大）
2.height，min-height，max-height，width...
3.overflow（對超出部分進(jìn)行處理，文字多于背景色 hidden：截取；scroll（auto）：滾動條），position，left，right，top，bottom，z-index
4.float,clear
CSS屬性補(bǔ)充(有待補(bǔ)充....)
水平居中：
行內(nèi)標(biāo)簽以及行內(nèi)-塊級標(biāo)簽：text-align：cneter；
塊級標(biāo)簽：margin：0 auto
垂直居中：
line-height
屬性補(bǔ)充：box-sizing
以特定的方式定義匹配某個(gè)區(qū)域的特定元素，默認(rèn)值為content-box，border-box，設(shè)置以后可以把邊框和內(nèi)邊距放入盒子內(nèi)部
2.3 CSS布局
默認(rèn)情況下，所有的網(wǎng)頁標(biāo)簽都在標(biāo)準(zhǔn)流布局里面，標(biāo)準(zhǔn)流：從上到下，從左到右;但是很多時(shí)候我們需要自定義布局，從而需要脫離標(biāo)準(zhǔn)流布局。
脫離標(biāo)準(zhǔn)流的方法：
- 1.float屬性
取值為left（right）脫離標(biāo)準(zhǔn)流，浮動在父標(biāo)簽的最左（右）邊 - 2.position屬性 和left，right，top，bottom屬性
配圖：
盒子模型
網(wǎng)頁其實(shí)就是標(biāo)簽嵌套標(biāo)簽，網(wǎng)頁上的每一個(gè)標(biāo)簽都是一個(gè)盒子
盒子的四個(gè)屬性：盒子結(jié)構(gòu)圖（此處應(yīng)該有圖片）
標(biāo)準(zhǔn)盒子模型：（配圖）
IE盒子模型：
填充（padding，內(nèi)邊距）- 屬性
3 JavaScript
JavaScript是一門廣泛用于瀏覽器客戶端的腳本語言（腳本語言：縮短傳統(tǒng)的編寫-編譯-鏈接-運(yùn)行過程，解釋運(yùn)行而非編譯運(yùn)行）
JS常見用途：
- 1.HTML DOM操作 （節(jié)點(diǎn)操作，比如添加、修改、刪除節(jié)點(diǎn)）
- 2.給HTML網(wǎng)頁增加動態(tài)功能，比如動畫
- 3.事件處理，比如監(jiān)聽鼠標(biāo)點(diǎn)擊、鼠標(biāo)滑動、鍵盤輸入
Node.js:
Node是一個(gè)JavaScript運(yùn)行環(huán)境（runtime），是對Google V8引擎進(jìn)行了封裝
V8引擎執(zhí)行JS的速度非常快，性能非常好
Node.js優(yōu)勢:
可以作為后臺語言;單線程：不新增額外線程的情況下，依然可以對任務(wù)進(jìn)行并發(fā)處理（采用事件輪詢）CPU在同一時(shí)間只能處理一件事
飛阻塞I/O、V8虛擬機(jī)，事件驅(qū)動
3.1 JS的書寫方式
JS常見的書寫方式有2種
- 頁內(nèi)JS：在當(dāng)前網(wǎng)頁的script標(biāo)簽中編寫
<script type="text/javascript">
</script>
- 外部JS
<script scr="index.js"></script>
3.2 JS常用語法
3.2.1 JS的基本數(shù)據(jù)類型
調(diào)試輸出：console.log('正在被調(diào)試') 審查元素-->console
聲明變量使用var ，使用typeof可以打印出真實(shí)類型
字符串：
string類型與number類型相加時(shí)，從左往右，任何類型變量與string類型拼接時(shí)都會變?yōu)閟tring類型。
var string1 = 10 + 10 + '10' + '10';//201010
var string2 = '10' + '10' +10 + 10;//10101010
var string3 = ('10' + 10) +'10' + 10;//10101010
數(shù)組：
var newArray = [10，2，age，['快輸出我','CrabMan']];
JS中數(shù)組是一個(gè)object類型，通過遍歷輸出數(shù)組內(nèi)容
//第一種方式
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();刪除數(shù)組中最后一個(gè)元素
newArray.push();為數(shù)組添加參數(shù)
//取出數(shù)組中的最小值
var newNumbers = [10,2,34,56];
//var minNumber = Math.min();
var minNumber = Math.min.apply(null,newNumbers);
console.log(minNumber)
3.2.2 JavaScript中的函數(shù)
有名函數(shù)
function 函數(shù)名（參數(shù)列表...）{
函數(shù)體
return 返回值
}匿名函數(shù)
var 變量名 = function （）{
return 返回值
}
函數(shù)例子：
<script type="text/javascript">
//命名一個(gè)求和函數(shù)
function sum(num1,num2){
return num1 + num2;
//調(diào)用函數(shù)
var result = sum(200,50);
console.log(result);
}
//萬能加法函數(shù) 參數(shù)個(gè)數(shù)不固定
function sum1(numbers){
var count = 0;
for(var i = 0 ;i < numbers.length; i++){
count +=numbers[i];
}
return count;
}
//調(diào)用函數(shù)
var numbers = [12,334,'10'];
var result1 = sum1(numbers);
console.log(result1);
//結(jié)果為34610
//內(nèi)置數(shù)組 arguments
function sum2(){
var count = 0;
for(var i = 0 ;i < arguments.length; i++){
count +=numbers[i];
}
return count;
}
//內(nèi)置數(shù)組的調(diào)用
var result2 = sum2(10,20,30);
//匿名函數(shù) ，需要使用一個(gè)變量來接收
var test = function (){
console.log('我是匿名函數(shù)')
}
//調(diào)用匿名函數(shù)
test();
</script>
3.2.3 JavaScript中的對象
OC中的類其實(shí)就一個(gè)結(jié)構(gòu)體，里面的元素對應(yīng)類不同的屬性。對象就是結(jié)構(gòu)體元素被賦值以后具體化得類。所以JS得中的對象就不難理解了。
<script type=text/javascript>
//this 在哪個(gè)對象中就代表該對象
var dog = {
name = 'wangcai';
age = 11;
height:1.21;
eat:function(something){
console.log(this.name+'吃'+something)
}
}
//調(diào)用狗對象的屬性
console.log(dog.name);
//調(diào)用狗的方法
dog.eat('骨頭');
</script>
批量生成??，需要一個(gè)構(gòu)造函數(shù),產(chǎn)生對象
<script type=text/javascript>
//構(gòu)造函數(shù)
function Dog (){
this.name = null;
this.height = null;
this.firends = null;
this.age = null;
this.eat() = function(something){
console.log(this.name+'吃'+something)
}
}
//批量產(chǎn)生狗
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('已經(jīng)成年')
}
//如果前面條件為真，則執(zhí)行后面的代碼 條件 && {}
(age > 20) && console.log('真的已經(jīng)成年了！！！')；
</script>
3.3 JavaScript中的內(nèi)置對象（window 和 document）
因?yàn)镴S中的window以及document比較重要，因此單獨(dú)列出來一個(gè)標(biāo)題。
window：
1.所有的全局變量都是window的屬性
2.所有全局的函數(shù)都是window的函數(shù)
3.動態(tài)跳轉(zhuǎn)
<script type=text/javascript>
function Dog (){
console.log(this);
}
Dog();//打印出來為window對象
var dog1 = new Dog();//打印出來為Dog();
//window實(shí)現(xiàn)動態(tài)跳轉(zhuǎn)
location.herf = ....;
window.location.herf = 'http://baidu.com';
</script>
document用途：
1.動態(tài)的獲取當(dāng)前網(wǎng)頁中的任意一個(gè)標(biāo)簽
2動態(tài)的對獲取到的標(biāo)簽進(jìn)行CRUD
增加(Create)；讀取(Retrieve)（重新得到數(shù)據(jù)）；更新（Update）和刪除（Delete）
<script type = text/javascript>
//動態(tài)插入
document.write('Hello World!');
//動態(tài)插入標(biāo)簽
document.write('<input type = date>')
//更改圖片
function changeImg(){
// 拿到圖片對象,根據(jù)id獲取
var img = document.getElementById('icon');
console.log(img);
//更改圖片,如果是自己的屬性可以直接輸入，若不是需要加style
img src = 'image/img02.jpg';
}
</script>
</head>
<body>
<img id='icon' src='image/img01.png'>
<p></p>
<button onclick = "changeImg();">更改圖片</button>
</body>
//每次點(diǎn)擊都更改圖片邏輯，body里面，切記寫在標(biāo)簽后面
//indexOf lastIndexOf 如果含有某參數(shù)，則返回任意正數(shù)，否則返回-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的顯示內(nèi)容
if(btn,innerText == '更改圖片'){
btn.innerText = '圖片復(fù)原';
} else{
btn.innerText = '更改圖片';
}
}
</script>
監(jiān)聽常用的事件
<body>
<input id= "int" type = "text" value="我是需要拷貝的內(nèi)容">
<img scr="image/img01.png" name"icon">
<script>
//拿到對應(yīng)的標(biāo)簽
var img = document.getElementsByName('icon')[0];
//常用事件
//鼠標(biāo)進(jìn)入圖片
img.onmouseover = function(){
console.log('光標(biāo)進(jìn)入圖片范圍')；
}
//鼠標(biāo)在圖片上移動
img.onmousemove = function(){
console.log('光標(biāo)在光標(biāo)上移動')；
}
//鼠標(biāo)移除到圖片范圍以外
img.onmouseout = function(){
console.log('光標(biāo)移除圖片')；
}
//當(dāng)頁面加載完畢,調(diào)用標(biāo)簽等
window.onload = function(){
alert('頁面加載完畢');
}
//拿到對應(yīng)的輸入框，監(jiān)聽輸入框
var input = document.getElementsById('int');
//輸入框點(diǎn)擊時(shí),改變輸入框狀態(tài)
input.onfocus = function(){
input.width = '700px';
input.height = '60px';
//css中的屬性要通過style
input.style.outline = 'none';
inpue.syle.fontSize = '30px';
}
//拿到選中的內(nèi)容
input.onselect = function(){
alert('input.value')
}
</script>
</body>
3.4 DOM的CRUD--JS外部引用
3.4.1 C -- Create
//C -- Create
document.write('Hello World');
//因?yàn)镴S是將下面的代碼直接插入到body里面，所以src不使用../
document.write('<img src="image/img01.png">')
//定點(diǎn)插入
var div = document.createElement('div');
div.style.backgroud = 'red';
div.style.width ='500px';
div.style.height = '300px';
//添加到父標(biāo)簽中
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);
//拿到目標(biāo)標(biāo)簽的父標(biāo)簽，然后刪除
p.parentNode.removeChild(p);
//刪除常用
p.remove();
改 ：拿到對應(yīng)的標(biāo)簽，做出改變 ...
查：
find(document.body);
function find(object){
for (var i in object){
console.log(object[i])
}
}
//查節(jié)點(diǎn)
console.log(document.body.childNodes);
3.5 Canvas繪制圖形標(biāo)簽
3.5.1 Canvas標(biāo)簽介紹
- 畫板標(biāo)簽
<canvas id = "canvas"></canvas>
JS書寫方式：context是一個(gè)回執(zhí)圖形的上下文環(huán)境，2d是二維圖形
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
瀏覽器不支持畫板標(biāo)簽時(shí)會顯示畫板內(nèi)容，并且畫板的默認(rèn)尺寸為300x150
<canvas id='canvas' style='backgourd-color':black;>當(dāng)前的版本不支持，請先更新版本</canvas>
3.5.2 Canvas繪制直線
起點(diǎn)
context.moveTo(100,100);
終點(diǎn)
context.lineTo(400,400);
繪制
context.stroke();
設(shè)置線條的顏色和寬度
context.strokeStyle='red';
context.lineWidth = 5;
設(shè)置填充色
context.fillStyle = 'blue';
//繪制多條線時(shí) ,canvas是基于狀態(tài)的，會以最后的顏色為準(zhǔn)，所以當(dāng)每條線顏色不一樣時(shí)，需要在設(shè)置顏色后設(shè)置。
context.beginPath();
context.moveTo();
context.lineTo();
context.closepath();//自動將圖形繪制為封閉圖形
3.5.3Canvas繪制弧線
context.arc(
//原點(diǎn)和半徑
centerX,centerY,radius,
//起始和終點(diǎn)角度
startingAngle,endingAngle,
Man.PI
//是否順時(shí)針（可選，可以不設(shè)置）
anticlockwise=false
)
3.6 jQuery
jQuery是一個(gè)兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)
<script scr="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type = "text/javascript">
//拿到p標(biāo)簽
alert($('p'));
//查看p中的內(nèi)容
console.log($('p').text());
//改變p標(biāo)簽的內(nèi)容
$('p').text('我是段落');
//查看img的屬性
console.log($('img').attr('src'));
//改變img的屬性
$('img').attr('src','image/img02.jpg');
//改變圖片的寬度
$('img').attr('width','200px');
//DOM操作 css選擇器都可以用于jQuery,通過>定點(diǎn)查找標(biāo)簽
$('.test1>img').attr('src','image/img03.jpg';)
//點(diǎn)擊按鈕隱藏和顯示圖片
$('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);
});
//取出對應(yīng)數(shù)值的下標(biāo)
var index = $.inArray(20,number);
console.log(index);
//使用jQuery寫css
$('#main>p').css({
'border':'1px solid red'
'color' :'red'
});
</script>
