HTML5基礎知識3
阿新 • • 發佈：2019-02-18
## 1.Mac桌面
### 1.1新建一個Mac桌面專案
### 1.2搭建整體框架
### 1.3設計預設和背景樣式
```
/*替換萬用字元，提高效率*/
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl,
dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img,
ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
margin: 0;
padding: 0;
}
body{
/*背景*/
background: url("../image/bg_apple.jpg");
/*縮放效果*/
background-size: cover;
}
```
### 1.4設計頭部背景樣式
```
#top{
background: rgba(255,255,255,0.8);
height: 35px;
/*背景陰影：下邊給黑色陰影*/
box-shadow: 0px 3px black;
}
```
### 1.5實現頭部的內容和佈局
```
<!--左邊選單-->
<ul class="top-left">
<li><a href="" class="glyphicon glyphicon-apple"></a></li>
<li><a href="">520IT</a></li>
<li><a href="">檔案</a></li>
<li><a href="">編輯</a></li>
<li><a href="">顯示</a></li>
<li><a href="">幫助</a></li>
</ul>
<!--右邊選單-->
<ul class="top-right">
<li ><a href="" class="glyphicon glyphicon-volume-up"></a></li>
<li ><a href="" class="glyphicon glyphicon-align-left"></a></li>
<li ><a href="" class="glyphicon glyphicon-question-sign"></a></li>
<li ><a href="" class="glyphicon glyphicon-leaf"></a></li>
</ul>
```
### 1.6設計頭部樣式
```
#top{
background: rgba(255,255,255,0.8);
height: 35px;
width: 100%;
/*背景陰影：下邊給黑色陰影*/
box-shadow: 0px 3px black;
/*設計行高*/
line-height: 35px;
/*相對於瀏覽器定位*/
position: fixed;
left: 0;
top:0;
}
a{
/*字型變黑*/
color: black;
/*去除下劃線*/
text-decoration: none;
font-size: 15px;
margin: 0 3px;
}
#top ul{
/*去掉圓點*/
list-style: none;
}
/*左浮動*/
#top .top-left {
float: left;
margin-left: 10px;
}
/*右浮動*/
#top .top-right{
float: right;
margin-right: 10px;
}
/*改變標籤型別*/
#top ul li{
display: inline-block;
}
```
### 1.7設計低部背景樣式
```
#bottom{
background: red;
height: 70px;
/*相對瀏覽器定位*/
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
```
### 1.8設計低部背景樣式
1.修改html
2.新增樣式
```
#bottom .dock{
background: url("../image/dock_bg.png");
width: 60%;
height: 100%;
/*水平居中*/
margin: 0 auto;
border-top-left-radius: 5px;
border-top-right-radius:5px;
}
```
### 1.9低部欄新增圖片
```
<!--底部新增圖片-->
<ul>
<li><a href="#"><img src="image/zurb-icon.png"></a></li>
<li><a href="#"><img src="image/linkedin-icon.png"></a> </li>
<li><a href="#"><img src="image/notable-icon.png"></a> </li>
<li><a href="#"><img src="image/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="image/facebook-icon.png"></a> </li>
<li><a href="#"><img src="image/google-icon.png"></a> </li>
<li><a href="#"><img src="image/notable-icon.png"></a> </li>
<li><a href="#"><img src="image/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="image/facebook-icon.png"></a> </li>
<li><a href="#"><img src="image/google-icon.png"></a> </li>
<li><a href="#"><img src="image/lastfm-icon.png"></a> </li>
</ul>
```
### 2.1低部欄新增圖片樣式
```
#bottom{
...
line-height: 70px;
/*水平居中*/
text-align: center;
}
/**給圖片設計寬高*/
#bottom .dock img{
width: 55px;
margin: 0 5px;
}
/**改變標籤型別*/
#bottom .dock ul{
display: inline-block;
}
/**改變標籤型別*/
#bottom .dock li{
display: inline-block;
}
```
### 2.2低部欄圖片新增過度動畫
- **transform** 動畫
-webkit-transform 動畫效果
-webkit-transform-origin 參照座標
-webkit-transition：過度動畫效果
```
#bottom .dock li{
display: inline-block;
/*平移過度效果*/
-webkit-transition: 0.25s linear; /* Safari 和 Chrome */
-moz-transition: 0.25s linear; /* Firefox 4 */
-ms-transition: 0.25s linear /* IE 9 */
-o-transition: 0.25s linear; /* Opera */
transition: 0.25s linear; /* W3C */
}
#bottom .dock li:hover {
/*參照座標*/
transform-origin: center bottom;
/*放大效果*/
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
```
### 2.3實現中間內容和結構
### 2.4設計中間內容樣式
```
#middle{
margin-top: 50px;
margin-left: 15px;
width: 90px;
}
/**設計圖片的寬*/
#middle .file img{
width: 90px;
}
/**設計文字顏色..*/
#middle .file p{
color: white;
text-align: center;
}
```
## 2.什麼是JavaScript
- **什麼是JavaScript**
[JavaScript]()是一門廣泛用於[瀏覽器客戶端]()的[指令碼語言]() (解析執行，不是編譯執行)由Netspace公司設計，當時跟Sun公司合作，所以名字起得像Java, 業內一般簡稱JS
- **JS的常見用途**
1）**動態效果** 和 **資料載入**都是js實現
2）HTML **DOM操作**（節點操作，比如新增、修改、刪除節點）
3）給HTML網頁增加**動態**功能，比如動畫
4）**事件處理**：比如監聽滑鼠點選、滑鼠滑動、鍵盤輸入
## 3.JavaScript的書寫方式
JS常見的書寫方式有2種
- 頁內JS：
在當前網頁的script標籤中編寫 ( script標籤一般在body標籤中 )
```
</body>
...
...
<script type="text/javascript">
/*寫指令碼語言*/
</script>
</body>
```
- 外部JS
```
/** 引用外部的js檔案，src 指定js檔案路徑 */
<script src="index.js"> </script>
```
## 4.JS簡單應用..
### 4.1JavaScript輸出.
- 彈窗輸出
- 控制檯輸出
- 打斷點
**案例：**
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輸出helloWorld</title>
</head>
<body>
<script>
/*彈窗輸出*/
alert('hello World !');
/*除錯輸出*/
console.log('java','android');
console.log('java','android');
/*打斷點*/
debugger;
console.log('java','android');
</script>
</body>
</html>
```
## 5.JS資料型別.
1. 基本資料型別 ( java : int float long double ... ; javaScript : number string boolean object )
2. 列印真實型別 ( typeof xxx )
3. 運算（+ - * / % ....）
4. 面試題
5. 陣列
6. 遍歷陣列
7. 陣列的增刪（壓棧，出棧）
8. 函式庫Math
9. 等號運算子
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS語法</title>
</head>
<body>
<script>
// 1. 基本資料型別
/*number*/
var age=100;
var money=100.02;
console.log(age,money);
/*string*/
var name='jack';
name2='rose';
console.log(name,name2);
/*boolean*/
var result1=false;
var result2=true;
console.log(result1,result2);
/*object*/
var score=null;
console.log(score);
/*number*/
var number1 =1,number2=2;
console.log(number1,number2);
// 2. 列印真實型別
console.log(typeof money,typeof name,typeof result1,typeof score);
// 3. 運算（+ - * / % ....）
var str=name+'-'+result2+'-'+score;
console.log(str);
// 4. 面試題
var str1=(10+'10')+10;
var str2=(10+10)+'10';
var str3='10'+('10'+10);
console.log(str1,str2,str3);//101010 2010 101010
// 5. 陣列
// var arrs=new Array();
var arr=[];
console.log(typeof arr);
arr[0]='java';
arr[1]=12;
console.log(arr);
var numbers=['android',12,false,[12,34]];
console.log(numbers);
// 6. 遍歷陣列
var num=[100,500,200,600];
// for(var i=0;i<num.length;i++){
// console.log(num[i]);
// }
// for(i=0;i<num.length;i++){
// console.log(num[i]);
// }
// for(i in num){
// console.log(num[i]);
// }
// 7. 陣列的增刪（壓棧，出棧）
num.push(900);//壓棧
console.log(num);
num.pop();//出棧
console.log(num);
// 8. 函式庫Math
var maxVaule=Math.max(100,400,300);
console.log(maxVaule);
console.log(Math.min(100,200,600));
var maxV=Math.max.apply(this,num);
var minV=Math.min.apply(this,num);
console.log(maxV,minV);
// 9.等號運算子
/*
* == 等於 （值）
* === 全等（值和型別）
*/
var a=5;
var b='5';
console.log(a==5);//true
console.log(b==5);//true
console.log(a===5);//true
console.log(b===5);//false
</script>
</body>
</html>
```
## 6.JS函式.
### 6.1JS函式格式
- **1.普通函式格式**
**function 函式名 （引數列表 ...）{**
**//函式體**
**return 返回值;**
**}**
- **2.匿名函式格式**
**var 函式別名 =function （引數列表 ...）{**
**//函式體**
**return 返回值;**
**}**
注意：想讓<script> 標籤中的指令碼程式碼一定執行 , 可使用匿名函式：**（ function(){ } ）（）**
**案例：**
1. 加法運算
2. 多個數相加（引數為陣列）
3. 內建陣列（每個函式都會自帶的一個內建陣列，把傳入的所有東西存到一個預設的陣列arguments中）
4. 匿名函式
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-JS函式</title>
</head>
<body>
<script>
// 1. 加法運算
function sum(num1,num2) {
return num1+num2;
}
var result1=sum(12,3);
console.log(result1);
// 2. 多個數相加(引數為陣列)
function sum2(arrays) {
var result=null;
for(i in arrays){
result+=arrays[i];
}
return result;
}
var result2=sum2([12,3,5]);
console.log(result2);
// 3.內建陣列（函式自帶的一個內建陣列，把傳入的所有東西存到一個預設的陣列arguments中）
function sum3() {
var result=null;
for(i in arguments){
result +=arguments[i];
}
return result;
}
var result3=sum3(1,2,3,4);
console.log(result3);
// 4.匿名函式
var sum4=function () {
console.log('我是匿名函式，別名是sum4');
}
var result4=sum4();
</script>
</body>
</html>
```
## 7.JS物件
### 7.1JS產生物件.
#### 1.第一種
格式：var dog=**{ }**
**案例：**
1. 定義一隻狗物件
2. 給狗物件新增屬性
3. 給狗物件新增方法
4. 呼叫狗物件中的屬性和方法
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JS產生物件</title>
</head>
<body>
<script>
// 1. 定義一隻狗物件
var dog={
//2. 給狗物件新增屬性
age:12,
name:'jack',
height:50,
firends:['rose','lili'],
//3. 給狗物件新增方法
eat:function (food) {
console.log(this.name+' --吃--'+food);
},
run:function () {
console.log(this.name+' -- 跑--');
}
};
// 4. 呼叫狗物件中的屬性和方法
console.log(dog.age,dog.name,dog.height,dog.firends);
dog.eat('骨頭');
dog.run();
</script>
</body>
</html>
```
#### 2.第二種(批量產生物件)
建構函式 可以new物件。
普通函式 --> 升級 --> 建構函式,。（通過new 關鍵字升級）
格式：var dog=**new 函式名() ;**
**案例：**
1. 建立多隻狗物件
2. 給狗的建構函式新增屬性和方法
3. 給狗物件的屬性賦值
4. 呼叫狗物件中的屬性和方法
5. 把狗的建構函式封裝到一個獨立的js檔案
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-批量產生物件</title>
</head>
<body>
<script>
/**讓下面的js程式碼一定執行*/
(function () {
/*定義一個函式*/
// function dog() {
// console.log('dog');
// }
// dog();
/*升級函式為構造器函式*/
// function dog() {
// console.log('dog');
// }
// var dog1=new dog();
// var dog2=new dog();
/*類似java中的一個類*/
function dog() {
//2. 給狗的建構函式新增屬性和方法
this.name=null;
this.age=null;
this.height=null;
this.firends=[];
this.eat=function () {
console.log('---eat---');
};
this.run=function () {
console.log('---run---');
};
}
// 1. 建立多隻狗物件
var dog1=new dog();
var dog2=new dog();
// 3. 給狗物件的屬性賦值
dog1.age=12;
dog1.name='jack';
dog2.age=8;
dog2.name='rose';
console.log(dog1);
console.log(dog2);
// 4. 呼叫狗物件中的屬性和方法
console.log(dog1.age,dog1.name);
dog1.eat();
// 5. 把狗的建構函式封裝到一個獨立的js檔案
})();
</script>
</body>
</html>
```
## 8.JS內建物件..
### 8.1window
window是javaScript的內建物件之一
#### 1.window的第一作用：
1)所有的[全域性變數]()都是[window]()的[屬性]()
2)所有的[全域性函式]()都是[window]()的[方法]()
**案例：**
1. 全域性變數（屬於window的屬性）
2. 全域性函式（屬於window的方法）
3. 列印window物件
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-window</title>
</head>
<body>
<script>
// 1. 全域性變數（屬於window的屬性）
var age=12;
console.log(age);
console.log(window.age);
// 2. 全域性函式（屬於window的方法）
function dog() {
console.log('--dog--');
}
dog();
window.dog();
// 3. 列印window物件
function person() {
console.log(this);
}
window.person();//this 代表是window
new person();//this 代表是person物件
/*window的屬性*/
window.alert('哈哈');
window.console.log('呵呵');
</script>
</body>
</html>
```
屬性：
height、innerHeight、outerHeight的區別詳解：
http://www.365mini.com/page/jquery-height-vs-innerheight-vs-outerheight.htm
#### 2.window的第二作用：
1) [動態跳轉]()
**案例：**
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-window</title>
</head>
<body>
<button onclick="startToSee();">點選跳轉到小碼哥官網</button>
<script>
/*點選跳轉到小碼哥官網*/
function startToSee() {
window.location.href='http://www.520it.com';
}
</script>
</body>
</html>
```
### 8.2document DOM 操作( 一)..
#### 1.documnet的兩大作用
[1.動態的獲取到整個網頁中的所有標籤（元素、節點...）]()
[2.對拿到的標籤進行CRUD(增刪改查)]()
#### 案例1.：
- 動態往body中新增文字和標籤（增加標籤）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-documnet</title>
</head>
<body>
<script>
// 1. 動態往body中新增文字和標籤
document.write('hello world !');
document.write('<button>我是一個button</button>');
document.write('<img src="image/image_01.jpg" alt="">');
</script>
</body>
</html>
```
#### 案例2：
- 切換圖片（獲取和修改標籤）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-圖片的切換</title>
</head>
<body>
<img id="images" src="image/image_01.jpg" alt="">
<button onclick="changeImage();">切換圖片</button>
<script>
function changeImage() {
//1.拿到img標籤
// var img=document.getElementsByTagName('img')[0];//通過tag獲取物件
var img=document.getElementById('images');//通過id獲取物件
//2.修改標籤
img.src='image/image_02.jpg';
}
</script>
</body>
</html>
```
- 來回切換圖片
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-來回切換圖片</title>
</head>
<body>
<img src="image/image_01.jpg" alt="">
<button >來回切換圖片</button>
<script>
//1.拿到img標籤的物件
var img=document.getElementsByTagName('img')[0];
//2.拿到button標籤的物件
var button=document.getElementsByTagName('button')[0];
//3.給button新增一個點選事件
button.onclick=function () {
//4.判斷
console.log(img.src);
// if(img.src=='image/image_01.jpg'){//有問題
/**indexOf 、 lastIndexOf: 有某個字元竄，則返回任意任意正數，沒有找到則返回-1 */
if(img.src.indexOf('image/image_01.jpg')!=-1){
img.src='image/image_02.jpg';
}else{
img.src='image/image_01.jpg';
}
};
</script>
</body>
</html>
```
#### 案例3：
- 圖片的顯示和隱藏（獲取和修改標籤）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-顯示和隱藏</title>
</head>
<body>
<img id="icon" src="image/image_01.jpg" alt="">
<br>
<p name="word" >很美的圖片...</p>
<button class="btn"> 隱藏</button>
<script>
//1.拿到標籤
var icon=document.getElementById('icon');
var word=document.getElementsByName('word')[0];
var btn=document.getElementsByClassName('btn')[0];
//2.監聽按鈕的點選事件
btn.onclick=function () {
if(btn.innerText=='隱藏'){
//icon.style：是獲取到標籤的樣式
icon.style.display='none';
word.style.display='none';
btn.innerText='顯示';
}else{
//icon.style：是獲取到標籤的樣式
icon.style.display='inline-block';
word.style.display='block';
btn.innerText='隱藏';
}
}
</script>
</body>
</html>
```
#### 總結：
1）Document的**DOM操作**就是對HTML中的**標籤**進行**增刪改查**。
2）想操作哪個標籤，就要先拿到該**標籤的物件**。
## 9.JS中DMO操作（二）
### 9.1JS常用事件
**JS中的事件函式**都是以**on開頭**，類似Android中的點選事件
1. 當視窗載入完畢事件
2. 滑鼠事件（類似android中的手指點選事件）
3. 獲取焦點事件
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JS常用的事件</title>
</head>
<body>
<img class="icon" src="image/image_01.jpg" alt="">
<input type="text" id="inputs">
<script>
// 1. 當視窗載入完畢事件
window.onload=function () {
console.log(' ---視窗載入完畢 回撥 ---')
// 2. 滑鼠事件（類似android中的手指點選事件）
var icon=document.getElementsByClassName('icon')[0];
//滑鼠進入
icon.onmouseover=function () {
console.log('-- 滑鼠進入 --');
}
//滑鼠移動
icon.onmousemove=function () {
console.log('-- 滑鼠移動 --');
}
//滑鼠離開
icon.onmouseout=function () {
console.log('-- 滑鼠離開 --');
}
// 3. 獲取焦點事件
var inputs=document.getElementById('inputs');
inputs.onfocus=function () {
inputs.style.width='300px';
inputs.style.height='60px';
inputs.style.outline='none';
/*inputs.style.border='1px solid blue';*/
}
}
</script>
</body>
</html>
```
### 9.2.圖片瀏覽器
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-圖片瀏覽器</title>
</head>
<body>
<img src="image/image_01.jpg" alt="" class="icon">
<br>
<button class="pre">上一張</button>
<button class="next">下一張</button>
<script>
//1.找到標籤
var icon=document.getElementsByClassName('icon')[0];
var pre=document.getElementsByClassName('pre')[0];
var next=document.getElementsByClassName('next')[0];
var currentIndex=1;
var min=1;
var max=3;
//2.點選上一張
pre.onclick=function () {
if(currentIndex==min){
currentIndex=3;
}else{
currentIndex-=1;
}
icon.src='image/image_0'+currentIndex+'.jpg';
console.log('上一張'+icon.src);
}
//3.點選下一張
next.onclick=function () {
if(currentIndex==max){
currentIndex=1;
}else{
currentIndex+=1;
}
icon.src='image/image_0'+currentIndex+'.jpg';
console.log('下一張'+icon.src);
}
</script>
</body>
</html>
```
### 9.3JS實現定時器
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-定時器</title>
<style>
body{
background-color: black;
text-align: center;
}
p{
color: red;
font-size: 60px;
display: none;
}
img{
display: none;
}
div{
color: red;
font-size: 160px;
margin-top: 100px;
}
</style>
</head>
<body>
<img src="image/flower.gif" alt="">
<p>I LOVE YOU </p>
<div>10</div>
<script>
//1.拿到要操作的標籤
var icon=document.getElementsByTagName('img')[0];
var word=document.getElementsByTagName('p')[0];
var div=document.getElementsByTagName('div')[0];
//2.新增定時器
//var time
this.time=setInterval(function () {
console.log(' -- -- ')
div.innerText-=1;
if(div.innerText==0){
//3.停止定時
clearInterval(this.time);
//4.顯示和隱藏
icon.style.display='inline-block';
word.style.display='block';
div.style.display='none';