極客學院－Html5個人筆記總結

第一部分，HTML5基礎

1,什麼是HTML5?
(Hyper Text Markup Language) 超文本標記語言,用於描述網頁的一種語言。

2,HTML5相關知識？
HTML
XHTML
Css
Css3
JavaScript
JQuery
HTML5

3,HTML5新特性？
1,繪畫：canvas標籤
2,媒介：video和audio元素
3,存儲：本地離線存儲
4,新元素：article,footer,header,nav,section
5,新控件：calendar,date,time,email,url,search
6,瀏覽器：Safari,Chrome,Firefox,Opera,IE9

HTML基礎講解
4,聲明：<!DOCTYPE>

5,HTML基礎標籤：head,body

6,HTML標題
<h1>...<h6>等標籤進行定義

7,HTML段落
<p>標籤定義段落

8,HTML連接
<a>標籤定義連接

9,HTML圖像
<img>標籤定義圖像

10,HTML元素
是從開始標籤到結束標籤的所有代碼。即元素的內容
空元素在開始標籤進行閉合。如：<br/>
大多數的元素有屬性，都可以嵌套的。如：<p> <a>hello </a></p>

11,HTML屬性
標籤可以擁有屬性爲元素提供更多是信息。
屬性是以鍵值對的形式。如：href="www.baidu.com"
常用標籤屬性：<h1> align:對齊方式；<body> bgcolor:背景顏色；<a> target:規定在何處打開鏈接；
通用屬性：class:規定元素的類名；id：規定元素的唯一ID; style:規定元素的樣式; title:規定元素的額外信息;

12,HTML格式化
<b> 粗體文本
<big> 大號字
<em> 着重文字
<i> 斜體字
<small> 小號字
<strong> 加重語氣
<sub> 下標字
<sup> 上標字
<ins> 插入字
<del> 刪除字

13,HTML樣式
標籤：<style> 樣式定義 ; <link> 資源引用
屬性：rel="stylesheet" 外部樣式表; type="text/css" 引入文檔類型; margin-left 邊距;
插入方法：外部樣式表 <link rel="stylesheet" type="text/css" href="mystyle.css">
內部樣式表 <style type="text/css">
body { background-color :red}
p { margin-left:20px }
</style>
內聯樣式表 <p style= "color:red">

14,HTML鏈接
數據：文本鏈接;圖片鏈接;
屬性：href屬性指向另一個文檔的鏈接; name屬性創建文檔內的鏈接;
img標籤屬性；alt 替換文本屬性; width 寬 ; height 高;

15,HTML表格
<table> 表格
<caption> 表格標題
<th> 表頭
<tr> 行
<td> 單元
<thead> 頁眉
<tbody> 主體
<tfoot> 頁腳
<col> 列屬性

16,THML列表
標籤：<ol> 有序; <ul> 無序; <li> 列表項; <dl> 列表; <dt> 列表項; <dd> 描述;
無序列表：標籤 <ul><li> 屬性 disc , circle, square;
有序列表：標籤 <ol><li> 屬性 A, a, I, i, start;
嵌套列表：標籤 <ul><ol><li>
自定義列表：標籤 <dl><dt><dd>

17,HTML塊
塊的元素：塊元素顯示時，通常以新行開始; 如：<h1><p><ul>
內聯元素：內聯元素通常不會以新行開始; 如：<b><a><img>
<div>元素：<div>元素也被稱爲塊元素，其主要的組合HTML元素的容器。
<span>元素：<span>元素是內聯元素，可作爲文本的容器。

18,HTML佈局
①div佈局
②table元素佈局

19，表單用於獲取不同類型的用戶輸入

20，常用表單標籤

<from> 表單

<input> 輸入域

<textarea> 文本域

<label> 控制標籤

<fieldset> 定義域

<legend> 域的標題

<select> 選擇列表

<optgroup> 選項組

<option> 下拉列表選項

<button> 按鈕

21，PHP環境搭建

網站：www.apachefriends.org 下載安裝XAMPP

其中，運行 xx.hph的目錄：/xampp/htdocs

打開eclipse--help-->install new software

輸入：http://download.eclipse.org/releases

找到：Programming Languages-->PHP Development Tools (PDT)

安裝後重起，open perspective-->PHP

新建工程-->（將工作空間變化到 /xampp/htdocs）

或在拷貝xx.php 到/xampp/htdocs中

運行：在瀏覽器中輸入：localhost/xx.php

22，表單提交數據和PHP交互

在PHP服務端：//$_GET:指的是用get方式提交; $_POST:post方式

echo "用戶名".$_POST['name']."<br>密碼".$_POST['password'];

在IDEA端：

用戶名：<input type="text" name="name"><br>

密碼：<input type="password" name="password">

<br>

</form>

23，HTML框架

框架標籤（frame）

框架集標籤（<frameset>）

常用標籤：noresize:固定框架大小；cols:列；rows:行；

內聯框架：iframe

24，HTML5背景

背景標籤：background--圖片背景

背景顏色：Bgcolor--顏色背景

顏色：是由一個十六進制符號來定義的。這些符號由紅色，綠色和藍色的值組成（RGB）

顏色值最小值：0（#00）

顏色值最大值：255（#FF）

紅色：#FF0000

綠色：#00FF00

藍色：#0000FF

25，HTML實體

HTML中預留字符串必須被替換成字符實體。

如：< , > , % 例：<html> 寫成： <html>

顯示結果	描述	實體名稱	實體編號
	空格
<	小於號	<	<< p=""><!--
>	大於號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分	¢	¢
￡	鎊	£	£
￥	人民幣	¥	¥

26，XHTML規範化介紹

XHTML簡介：

①什麼是XHTML? 是指可擴展超文本標記語言。與HTML4.01幾乎相同。是更嚴格更純淨的HTML版本。得到所有主流瀏覽器的支持。

②爲什麼使用XHTML? 爲了代碼的完整性和良好性。

③文檔聲明：DTD 規定了使用通用標記語言的網頁語法。

④三種XHTML文檔類型：STRICT （嚴格性） TRANSITIONAL （過渡類型） FRAMESET （框架類型）

XHTML元素：

①XHTML元素必須正確嵌套。

②XHTML元素必須始終關閉。

③XHTML元素必須小寫。

④XHTML文檔必須有一個根元素。

XHTML屬性：

①XHTML屬性必須使用小寫。

②XHTML屬性值必須用引號包圍。

③XHTML屬性最小化也是禁止的。

第二部分，CSS3基礎

一，入門基礎知識。

1，CSS3樣式

①CSS背景: css允許應用純色作爲背景，也允許使用背景圖像創建相當複雜的效果。

background-attachment：背景圖像是否固定或者隨着頁面滾動。

background-color：設置原色的背景顏色。

background-image：把圖片設置爲背景。

background-position：設置背景圖片的起始位置。

background-repeat：設置背景圖片是否及如何重複。

background-size: 規定背景圖片的尺寸。

background-origin ：規定背景圖片的定位區域。

background-clip:規定背景的繪製區域。

②CSS文本：

color：文本顏色。

direction：文本方向。

line-height：行高。

letter-spacing：字符間距。

text-align：對齊元素中的文本。

text-decoration：向文本添加修飾。

text-indent：縮進元素中文本的首行。

text-transform：元素中的字母。

Unicode-bidi：設置文本的方向。

white-space：元素中的空白的處理方式。

word-spacing：字間距。

③CSS字體：

css字體屬性定義文本的字體系列，大小，加粗，風格和變形。

font-family：設置字體的系列。

font-size：設置字體的尺寸。

font-style：設置字體的風格。

font-variant：以小型大寫字體或正常字體顯示文本。

font-weight：設置字體的粗細。

normal	默認值。定義標準的字符。
bold	定義粗體字符。
bolder	定義更粗的字符。
lighter	定義更細的字符。
100 200 300 400 500 600 700 800 900	定義由粗到細的字符。400 等同於 normal，而 700 等同於 bold。
inherit	規定應該從父元素繼承字體的粗細。

尺寸

單位	描述
%	百分比
in	英寸
cm	釐米
mm	毫米
em	1em 等於當前的字體尺寸。 2em 等於當前字體尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 CSS 中，em 是非常有用的單位，因爲它可以自動適應用戶所使用的字體。
ex	一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。)
pt	磅 (1 pt 等於 1/72 英寸)
pc	12 點活字 (1 pc 等於 12 點)
px	像素 (計算機屏幕上的一個點)

顏色

單位	描述
(顏色名)	顏色名稱 (比如 red)
rgb(x,x,x)	RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)	RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb	十六進制數 (比如 #ff0000)

④CSS鏈接：

四種狀態：link 普通的，未被訪問的鏈接。

visited 用戶已訪問的鏈接。

hover 鼠標指針位於鏈接的上方。

active 鏈接被點擊的時刻。

⑤CSS列表：

CSS列表屬性允許你放置，改變列表標誌，或者將圖像作爲列表項標誌。

list-style：簡單列表項。

list-style-image：列表項圖像。

list-style-postion：列表標誌位置。

list-style-type：列表類型。

⑥CSS表格：

CSS表格屬性可以幫助我們極大改善表格的外觀。

表格的邊框。

摺疊邊框。

表格寬高。

表格文本對齊。

表格內邊距。

表格顏色。

⑦CSS輪廓：

輪廓主要是用來突出元素的作用。

outline 設置輪廓的屬性。

outline-color 設置輪廓的顏色。

outline-style 設置輪廓的樣式。

outline-width 設置輪廓的寬度。

⑧css !important作用是提高指定CSS樣式規則的應用優先權。

二， CSS基本樣式

1，CSS介紹和語法

①概述：CSS指層疊樣式表。CSS樣式表極大提高了工作效率。

格式：selector {

properly：value

}

例如：h1 { color : red ; font-size: 14px; }

屬性大於1個之後，屬性之間用分號隔開。

如果值大於1個單詞，則需要加上引號。

例如：p { font-family: "sans serif"; }

②CSS高級語法

選擇器的分組：h1，h2，h3，h4，h5，h6 { color ：red ; }

繼承：body {

color：green；

}

凡是在body體內的內容，如無設置其標籤屬性都將繼承body樣式。

2，css派生選擇器

派生選擇器：通過依靠元素在其位置的上下文關係來定義樣式。

派生選擇器以空格來定義。

3，css id選擇器

id選擇器：可以標有id的HTML元素指定特定的樣式。

id選擇器以“#”來定義。

目前比較常用的方式是id選擇器常常用於建立派生選擇器。

4，css類選擇器

類選擇器以一個點顯示。

class也可以用作派生選擇器。

5，屬性選擇器

屬性選擇器：對帶有指定屬性的HTML元素設置樣式。

屬性和值選擇器。

三，CSS盒子模型。

1，概述

盒子模型的內容範圍包括：margin，border，padding，content部分組成。

2，內邊距

內邊距在content外，邊框內

padding 所有邊距

padding-bottom 底邊距

padding-left 左邊距

padding-right 右邊距

padding-top 上邊距

3，邊框

創建出邊框，並且可以應用於任何元素。

border-style：定義了10個不同的非繼承樣式，包括none。

單邊樣式：border-top-style ； border-left-style ； border-right-style ； border-bottom-style ；

CSS3邊框：border-radius ：圓角邊框； box-shadow：邊框陰影； border-image ：邊框圖片；

4，外邊距

圍繞在內容邊框的區域就是外邊距，外邊距默認爲透明區域。

外邊距接受任何長度單位，百分數值。

margin 所有邊距

margin -bottom 底邊距

margin -left 左邊距

margin -right 右邊距

margin -top 上邊距

5，外邊距合併

外邊距合併就是一個疊加的概念。

遵循多的邊距

6，盒子模型應用

四，CSS定位。

1，CSS定位

CSS定位：改變元素在頁面上的位置。

定位機制：普通流（元素按照其在HTML中的位置順序決定排布的過程）；浮動；絕對佈局。

定位屬性：

postion 把元素放在一個靜態的，相對的，絕對是，或者固定的位置中。

其屬性值：static；relative；absolute；fixed

top 向上的偏移

left 向左的偏移

right 向右的偏移

bottom 向下的偏移

overflow 設置元素溢出其區域發生的事情

clip 設置元素顯示的形狀

verical-align 設置元素垂直對其方式

z-index 設置元素的堆疊順序

2，CSS浮動

float屬性可用的值：

left 元素向左浮動。

right 元素向右浮動。

none 元素不浮動。

inherit 從父級繼承浮動屬性。

clear屬性：

去掉浮動屬性（包括繼承來的屬性）

clear屬性值：left，right 去掉元素向左，向右浮動。both 左右兩側均去掉浮動。inherit 從父級繼承來的clear的值。

五，CSS選擇器

1，元素選擇器

最常見的選擇器就是元素選擇器，文檔的元素就是最基本的選擇器。

例如：h1 { }；a{ } ;

2，選擇器分組

例如：h1,h2 { }

通配符：* { }

3，類選擇器詳解

①類選擇器允許以一種獨立與文檔元素的方式來指定樣式。

例如：.class { }

② 結合元素選擇器。

例如：a.class { }

③多類選擇器

例如：.class.class { }

④ID 選擇器詳解

ID選擇器類似於類選擇器，不過也有一些重要差別。

例如：#id { }

區別：

ID只能在文檔中使用一次，而類可以多次使用。

ID選擇器不能結合使用。

當使用js時候，需要用到id。

⑤屬性選擇器詳解

簡單屬性選擇：例如：[ title] { }

根據具體屬性值選擇：除了選擇擁有某些的元素，還可以進一步縮小選擇範圍，值選擇有特定屬性值的元素。例如：a [ href="http://www.baidu.com"] { }

屬性和屬性值必須完全匹配

根據部分屬性值選擇

⑥後代選擇器

後代選擇器可以選擇作爲某元素後代的元素。例如：p strong { };

⑦子元素選擇器

與後代選擇器相比，子元素選擇器只能選擇作爲某元素子元素的元素。

例如：h1>strong { };

⑧相鄰兄弟選擇器

可以選擇緊接着另一個元素後的元素，且二者有相同父元素。

例如：h1 + p { };

六，CSS常用操作

1，對齊

①使用margin屬性進行水平對齊。

②使用position屬性進行左右對齊。

③使用Float屬性進行左右對齊。

2，尺寸

①屬性

height 設置元素的高度；

width 設置元素寬度；

line-height 設置行高；

max-height 設置元素最大高度；

min-height 設置元素最小高度；

max-width 設置元素最大寬度；

min-width 設置元素最小寬度；

3，分類

①屬性

clear 設置一個元素的側面是否允許其他的浮動元素；

cursor 規定當指向某元素之上時顯示的指針類型；

display 設置是否及如何顯示元素；

Float 定義元素在那個方向浮動；

position 把元素放置到一個靜態的，相對的，絕對的，固定的位置；

visiblity 設置元素是否可見或不可見；

4，導航欄

①垂直導航欄

17x29x51

17x31x45

24x32

②水平導航欄

③導航欄效果

5，圖片

七，css動畫

1，2D,3D轉換

①通過css3轉換，我們能夠對元素進行移動，縮放，轉動，拉長或伸拉轉換是使元素改變形狀，尺寸和位置的一種效果。

②2D轉換方法：

translate()

rotate()

scale()

skew()

matrix()

③3D轉換方法：

rotateX()

rotateY()

2，過渡

①通過使用css3，可以給元素添加一些效果。

②css3過渡是元素從一種樣式轉換成另一種樣式。

動畫效果的css

動畫執行的時間

③屬性：

transition 設置四個過渡屬性

transition-property 過渡是名稱

transition-duration 過渡效果花費的時間

transition-timing-function 過渡效果的時間曲線

transition-delay 過渡效果開始時間

3，動畫

①通過css3，也可以進行創建動畫了。

②css3的動畫需要遵循@keyframes規則。

規定動畫的時長

規定動畫的名稱

4，多列

①在css3中，可以創建多列來對文本或者區域進行佈局。

②屬性：

column-count 行的個數

column-gap 間距

column-rule

5，瀑布流效果

第三部分，Javascript基礎

一，JavaScript基礎教程

1，Javascript基礎-介紹、實現、輸出

①介紹

JavaScript 是互聯網上最流行的腳本語言，這麼語言可用於web和HTML，更可廣泛用於服務器，PC端，移動端。

JavaScript是一種輕量級的編程語言。是可插入HTML頁面的編程代碼。插入HTML頁面後，可由所有的瀏覽器執行。

②實現

用法：

HTML中的腳本必須位於<script></script>標籤之間。

腳本可被放置在HTML頁面的<body>和<head>部分中。

標籤：

在HTML中插入JavaScript，使用<script>標籤

在<script></script>之間書寫代碼。

使用限制：

在HTML中，不限制腳本數量。

通常會把腳本放置於<head>標籤中，以不干擾頁面內容。

③輸出

JavaScript通常用來操作HTML。

文檔輸出：document.write("<p>this is my first JavaScript </p>");

2，JavaScript基礎-語法和註釋

①語法

語句：

JavaScript語句向瀏覽器發出是命令，語句的作用是告訴瀏覽器該做什麼。

分號：

語句之間的分割是分號（；）

注意：分號是可選項，有時候看到不以分號隔開的。

代碼：按照編寫順序依次執行。

標示符：必須以字母，下劃線或美元符號開始。

JavaScript關鍵字。

JavaScript對大小寫敏感。

空格：忽略多餘的空格。

代碼換行：禁止。

保留字：

②註釋

單行註釋：//

多行註釋： /* */

3，Javascript基礎-變量和數據類型

①變量：是用來存儲信息的“容器”。

例如：var x=10;

var y=10.1;

var z="hello";

②數據類型：

字符串（String）數字（Number）布爾（Boolean）數組（Array）對象（Object）空（null）未定義可以通過賦值爲null的方式清除變量。

二，JavaScript語法詳解

1，運算符

①算數運算符：+，-，*，/,++,--

②賦值運算符：=，+=，-=，*=，/=，%=

③ 字符串操作

④比較運算符：==，===，！=，！==，>，<，>=，<=

⑤邏輯運算符：&&，||，！

⑥條件運算符：例：x<10? "x比10小"："x比10大"；

2，條件語句

①if（條件）{

代碼塊

}else{

}

②switch(值){

case 0：

break；

default：

break；

}

③循環for

for（var i=0；i<arr.length; i++）{

循環體

}

for （i in j）{ 循環體 }

④循環while

while(條件){
循環體;

迭代條件；

}

⑤跳轉語句

break；結束整個循環

continue; 結束當前循環

三，JavaScript函數

1，函數的用途

函數是由事件驅動或者當它被調用時執行的可重複使用的代碼塊。

例：實現10組數字的和；

2，定義函數：

function 函數名（）{

函數體；

}

注意：JavaScript對大小寫敏感，必須注意函數名一致。

3，函數調用

函數在定義好之後。不能自定執行，需要進行調用。

調用方式：

在<script>標籤內調用

在HTML文件中調用

4，帶參數的函數

在函數的調用中，也可以傳遞值，這些值被稱爲參數。例：demo（arg1 ，arg2）;

參數的個數可以爲任意多，每個參數通過“，”隔開。

注意：參數在傳遞時，其順序必須一致。

意義：通過傳遞參數的個數以及參數的類型不同完成不同的功能。

5，帶返回值的函數

有時，我們需要將函數的值返回調用他的地方；

通過return語句就可以實現。

注意：在使用return語句時，函數會停止執行，同時返回值。

6，局部變量和全局變量

四，JavaScript異常處理和事件處理

1，異常捕獲

異常：當JavaScript引擎執行JavaScript代碼時，發生了錯誤。導致程序停止運行。

異常拋出：當異常產生，並且將這個異常生成一個錯誤信息。

異常捕獲：

try { 發生異常的代碼塊；

}catch(err) {

錯誤信息處理；

}

Throw語句：

通過throw語句創建一個自定義的錯誤。

2，事件

事件是可以被JavaScript偵測到的行爲。

常見事件：

onClick 單擊事件

onMouseOver 鼠標經過事件

onMouseOut 鼠標移除事件

onChange 文本內容改變事件

onSelect 文本框選中事件

onFocus 光標聚集事件

onBlur 移開光標事件

onLoad 網頁加載事件

onUnload 關閉網頁事件

五，DOM對象

1，簡介

①HTML_DOM

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）

②DOM操作HTML:

改變頁面中所有HTML元素。

改變頁面中所有HTML屬性。

改變頁面中所有CSS樣式。

對頁面中的所有事件作出反應。

2，操作HTML

①改變HTMLs輸出流：絕對不要在文檔加載完成之後使用 document.write()。會覆蓋該文檔。

②尋找元素：通過id找到HTML元素。通過標籤找到HTML元素。

③改變HTML內容：使用屬性 innerHTML;

④改變HTML屬性：使用attribute

3，操作css

①通過DOM對象改變css

語法：document.getElementById( id ).style.property=new style

4，DOM EventListener：

方法：

addEventListener(); 用於向指定元素添加事件句柄。

removeEventListener(); 移除方法添加的事件句柄。

六，javaScript事件詳解

1，事件流

①事件流：描述的是在頁面中接受事件的順序。

②事件冒泡：由最具體的元素接收，然後逐漸向上傳播至最不具體的元素的節點（文檔）。

③事件捕獲：最不具體的節點先接收事件，而最具體的節點應該是最後接收事件。

2，事件處理

①HTML事件處理：直接添加到HTMl結構中。

②DOM0級事件處理：把一個函數賦值給一個事件處理程序屬性。

③DOM2級事件處理：

addEventListener（“事件名”，“事件處理函數”，“布爾值”）；

true ：事件捕獲。

false：事件冒泡。

removeEventListener();

④IE事件處理程序：

attachEvent

detachEvent

3，事件對象

①事件對象：在觸發DOM事件的時候都會產生一個對象。

②事件對象event：

type：獲取事件類型。

target：獲取事件目標。

stopPropagation（）：阻止事件冒泡。

preventDefault（）：阻止事件默認行爲。

七，JavaScript內置對象

1，什麼是對象

①對象

JavaScript中的所有的事物都是對象：字符串，數值，數組，函數。。。。

每個對象帶有屬性和方法。

JavaScript允許自定義對象。

②自定義對象

定義並創建對象實例。

使用函數來定義對象，然後創建新的對象實例。

2，String字符串對象

①Strin對象

String對象用於處理已有的字符串。

字符串可以使用雙引號或單引號。

②在字符串中查找字符串：indexOf（）

③內容匹配：match（）

④替換內容：replace（）

⑤字符串大小寫轉換：toUpperCase() /toLowerCase()

⑥字符串轉爲數組：strong>split

⑦字符串屬性和方法：

屬性：length，prototype，constructor

方法：charAt（），charCodeAt（），concat（），fromCharCode（），indexOf（），lastIndexOf（），match（），replace（），search（），slice（），substring（），substr（），valueOf（），toLowerCase（），toUpperCase（），split（）

3，Date日期對象

①Date對象：日期對象用於處理日期和時間。

②獲得當日的日期。

③常用方法：

getFullYear（）: 獲取年份。

getTime() ：獲取毫秒。

setFullYear() ：設置具體的日期。

getDay() ：獲取星期。

4，Array數組對象。

①Array對象：使用單獨的變量名來存儲一系列的值。

②數組的創建：例：var myArray=[ "Hello", "iwen", "ime" ] ;

③數組的訪問：通過指定數組名以及索引號碼，你可以訪問某個特定的元素。

注意: [0]是數組的第一個元素，[1] 是數組的第二個元素。

④數組常用方法：

concat(): 合併數組。

sort(): 排序。

push(): 末尾追加元素。

reverse(): 數組元素翻轉。

5，Math對象

①Math對象：執行常見的算數任務。

②常用方法：

round（）：四捨五入。

random（）：返回0~1之間的隨機數。

max() : 返回最高值。

min(): 返回中的最低值。

abs() : 返回覺得值。

八，JavaScript對象控制HTML元素詳解

方法：

getElementByName() : 獲取name。

getElementByTagName() : 獲取元素。

getAttribute() : 獲取元素屬性。

setAttribute() : 設置元素屬性。

childNodes() ：訪問子節點。

parentNode() : 訪問父節點。

createElement() : 創建元素節點。

createTextNode() : 創建文本節點。

insertBefore() : 插入節點。

removeChild() :刪除節點。

offsetHeight() :網頁尺寸。

scrollHeight() : 網頁尺寸。

九，Js瀏覽器對象

1，Window對象

①對象：是BOM的核心，window對象指當前的瀏覽器窗口，所有JavaScript全局對象，函數以及變量均自動成爲window對象的成員。

全局變量是window對象的屬性。

全局函數是window對象的方法。

甚至HTML DOM的document也是window對象的屬性之一。

②尺寸：

window.innerHeight : 瀏覽器窗口的內部高度。

window.innerWidth : 瀏覽器窗口的內部寬度。

2，計時器

①計時事件：通過使用JavaScript，我們有能力做到在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行，我們稱之爲計時事件。

②計時方法：

setInterval(): 間隔指定的毫秒數不停地執行指定代碼。

clearInterval(): 方法用於停止setInterval()方法執行的函數代碼。

setTimeout() : 暫停指定的毫秒數後執行指定的代碼。

clearTImeout() 方法用於停止執行setTimeout()方法的函數代碼。

3，History對象

①History對象：window.history 對象包含瀏覽器的歷史（url）的集合。

②History方法：

history.back() 與在瀏覽器點擊後退鍵相同。

history.forward() 與在瀏覽器中點擊按鈕向前相同。

History.go() 進入歷史中的某個頁面。

4，Location對象

①window.location 對象用於獲得當前頁面的地址（UrL）,並把瀏覽器重定向到新的頁面。

②location對象的屬性：

location.hostname 返回web主機的域名。

location.pathname 返回當前頁面的路徑和文件名。

location.port 返回web主機的端口。

location.protocol 返回所使用的web協議（Http：// 或者https://）。

location.href 屬性返回當前頁面的URL。

location.assign() 方法加載新的文檔。

5，Screen對象

①Screen對象包含有關用戶屏幕的信息。

②屬性：

screen.availWidth 可用的屏幕寬度。

screen.avaiHeight 可用的屏幕高度。

screen.Height 屏幕高度。

screen.Width 屏幕寬度。

十，JS面向對象

1，認識面向對象。

①概念：

一切事物皆對象。

對象具有封裝和繼承特性。

信息隱藏。

2，JS面向對象1。

/* 相當於類 */

(function(){//封裝信息

var n="ime";

function Person(name){

this.name=name;

}

Person.prototype.say=function(){

alert("peo_Hello:"+this.name+n);

}

window.Person=Person;//賦值給頂級window

}());

(function(){

function Student(name){

this.name=name;

}

Student.prototype=new Person();

var supers=Student.prototype.say;

Student.prototype.say=function(){

supers.call(this);//子類調用父類內容。

alert("Stu_hello:"+this.name);

}

window.Student=Student;

}());//此處加個小括號！！！！！！！！！！！！！

var s =new Student("iwen");

s.say();//彈出hello

3，JS面向對象2

/* 相當於類2 */

(function(){

var n ="ime1";

function Peple(name){

var _this={}

_this.name=name;

_this.sayHello=function(){

alert("PHello"+_this.name+n);

}

return _this;

}

window.Peple=Peple;

}());

(function (){

function Teacher(name){

var _this=Peple(name);//帶小括號的--對象

_this.name=name;

var superSay=_this.sayHello;//不能帶括號--方法

_this.sayHello=function(){

superSay.call(_this);

alert("Thello"+_this.name);

}

return _this;

}

window.Teacher=Teacher;

}());

var t =Teacher("zhangsan");

t.sayHello();//彈出Hello

十一，JavaScript瀑布流

1，佈局

第四部分，HTML5新特性基礎

1，HTML5音頻視頻

1，音頻播放

①Audio: HTML5提供了播放音頻文件的標準。

②control(控制器)：添加播放，暫停和音量控件。

③標籤：<audio> 定義聲音。

<source> 規定多媒體資源，可以是多個。

2，編解碼工具

①FFmpeg

②官方網址：www.ffmpeg.org

3，視頻播放

①Video: HTML5提供了播放音頻文件的標準。

②control(控制器)：添加播放，暫停和音量控件。

③標籤：<video> 定義聲音。

<source> 規定多媒體資源，可以是多個。

④屬性：width：寬

height：高

2, HTML5拖放

1，拖放

①拖放（Drag和drop）是HTML5標準的組成部分。

②拖動開始：ondragstart: 調用了一個函數，drag(event) 它規定了被拖動的數據。

③設置拖動數據：setData(): 設置被拖動數據的數據類型和值。

④放入位置：ondragover: 事件規定在何處放置被拖動的數據。

⑤放置：ondrog:當放置被拖動數據時，會發生drop事件。

2，拖放本地資源

3，HTML5Canvas標籤

1，創建canvas

①Canvas標籤：HTML5<canvas> 元素用於圖形的繪製。通過腳本（通常是JavaScript）來完成。<canvas>標籤只是圖形容器，必須使用腳本來繪製圖形。

通過多種方法使用Canvas繪製路徑，盒，圓，字符以及添加圖想。

②標籤：<canvas>

2，繪製圖形：canvas 元素本身沒有繪圖能力的，所有的繪圖工作必須在JavaScript內部完成。

3，繪製圖片：

4，HTML5Canvas應用

1，認識createjs：下載第三方包網址：createjs.com

2，炫酷效果

5，SVG

1，什麼是SVG?

①SVG指可伸縮矢量圖形（Scalable Vector Graphics）

②SVG用來定義用於網絡的基於矢量的圖形。

③SVG使用XML格式定義圖形。

④SVG圖像在放大或改變尺寸的情況下其圖形質量不會有損失。

⑤SVG是萬維網聯盟的標準。

2，SVG優勢

①SVG圖像可通過文本編輯器來創建和修改。

②SVG圖像可被搜索，索引，腳本化或壓縮。

③SVG是可伸縮的。

④SVG圖像可在任意的分辨率下被高質量地打印。

⑤SVG可在圖像質量不下降的情況下被放大。

3，引入SVG外部文件

①創建一個svg.svg是一個xml,加一個頭文件<?xml version="1.0"?>

②網站：developer.mozilla.org

https://developer.mozilla.org/zh-CN/docs/Web/SVG

6，Web儲存

1，客戶端儲存數據的新方法

①localStorage：沒有時間限制的數據存儲。

②sessionStorage: 針對一個session的數據存儲。

2，LocalStorage

①特點：沒有時間限制。

3，sessionStorage

①特點：對一個session進行數據存儲。當用戶關閉時數據會被刪除。

7，HTML5應用緩存與Web Workers

1，應用緩存

①什麼是應用緩存：

HTML5引入應用緩存，這一位子web應用可進行緩存，並可在沒有聯網時進行訪問。

②應用緩存的優勢：

離線瀏覽：用戶可在應用離線時使用它們。

速度：已緩存資源加載得更快。

減少服務器負擔：瀏覽器將只從服務器下載更新過或更改過的資源。

③實現緩存：

如需啓動應用緩存，請在文檔的<html>標籤中包含manifest屬性

mainfest文件的擴展名是：“.appcache”

③Manifest文件：

CACHE MANIFEST: 在此標題下列出的文件將首次下載或進行緩存。

NETWORK: 此標題下列出的文件需要與服務器的連接，不會被緩存。

FALLBACK: 此標題下列出的文件規定當前頁面無法訪問時的回退頁面。

2，Web Workers

①web worker 是運行在後臺的JavaScript，獨立於其他腳本，不會影響頁面的性能。

②方法: postMessage() : 它用於向HTML頁面傳回一段消息。

terminate() : 終止web worker, 並釋放瀏覽器/計算機資源。

③事件： onmessage

8，服務器推送事件

1，介紹

①HTML5服務器推送事件

服務器推送事件（Server-sent Events）是HTML5規範中的一個組成部分，可以用來從服務端實時推送數據到瀏覽器端。

②傳統服務器端推送技術

webSocket: WebSocket 規範HTML5中的一個重要組成部分。已經被主流瀏覽器所支持，也有不少基於WebSocket開發的應用。

webSocket使用的是嵌套字鏈接，基於TCP協議，使用webSocket 之後，實際上在服務端和瀏覽器之間建立一個套接鏈接。可以進行雙向的數據傳輸，

webSocket的功能很強大，使用起來也靈活，可以適應不同的場景。

不過，webSocket技術也比較複雜，包括服務器端和瀏覽器端的實現都不同於一般的web應用。

③HTTP協議：簡單輪詢，即瀏覽器定時向服務端發送請求，來查詢是否有數據更新。這種做法比較簡單，可以在一定程度上解決問題，不過對於輪詢的時間間隔需要進行考慮，間隔過長，會導致用戶不能及時接收更新的數據，間隔過短，會導致查詢請求過多，增加服務端的負擔。

2，實現

①服務器代碼頭：

header（‘ Content-Type: text/event-stream’）；

②EventSource事件：

onopen : 服務器的鏈接被打開。

onmessa: 接收消息。

onerror: 錯誤發生。

第五部分，響應式佈局

一，響應式佈局基礎。

1，介紹。

①響應佈局：響應式佈局是2010年5月提出的一個概念，就是一個網站能夠兼容多個終端，是爲了解決移動互聯網瀏覽而誕生的，其目的是爲用戶提供更加舒適的界面和更好的用戶體驗。

②優缺點：

優點：面對不同分辨率的設備靈活性強。能夠快捷解決多設備顯示適應問題。

缺點：兼容各種設備工作量大，效率低下。代碼累贅，會出現隱藏無用的元素，加載時間過長。

2，佈局效果。

①CSS中的Media Query(媒介查詢)

設備寬高：device-width，device-height；

渲染窗口的寬和高：width，height；

設備的手持方向：orientation;

設備的分辨率：resolution;

②使用方法：

外聯。

內嵌樣式。

3，實例操作。

①在頁面放置元素，隨頁面改變而改變。

二，響應式佈局之Bootstrap

1，Bootstap介紹

①瞭解Bootstap:簡潔，直觀，強悍的前端開發框架，讓web開發更迅速，簡單。

②優點：快速，簡單，靈活的柵格系統，小而強大，響應式佈局，跨平臺等。

③下載：http://getbootstrap.com

2，Bootstrap CSS，組件與JavaScript插件

3，應用例子：http://getbootstrap.com/examples/jumbotron/

第六部分，jQuery基礎

一，jQuery簡介及語法

1，簡介。

①jQuery：jQuery 庫可以通過一行簡單的標記被添加到網頁中。

②什麼是jQuery：是一個JavaScrip函數庫。

③jQuery庫的功能：

HTML元素選取

HTML元素操作

CSS操作

HTML事件函數

Javascript 特效和動畫

HTML DOM遍歷和修改

AJax : 不刷新頁面修改內容。

Utilities

2，引入jQuery的方法。

①網頁中添加jQuery

從jquery.com下載jQuery庫。

從CDN中載入jQuery，如從Google中加載jQuery

百度和新浪的服務器存有jQuery：http：//libs.baidu.com/jquery/1.1.02/jquery.min.js

谷歌和微軟的服務器存有jQuery：http：//ajax.googleapis.com/ajax/libs/jquery/jquery.min.js

②版本介紹

v1.11.1 ： 1.x支持IE6+

v2.1.1 ：2.x支持IE0+

3，語法。

①jQuery語法

基礎語法：$(selector).action()

網頁加載完成：$(document).ready(function(){}）;

美元符號定義jQuery

選擇符（selector）“查詢”和“查找”HTML元素。

jQuery的action（）執行對元素的操作。

例如：$(this).hide() : 隱藏當前元素

$("p").hide() ：隱藏所有段落

二，jQuery選擇器和事件

1，選擇器

①修改指定元素內容：

例如：$("button").click(function(){

$(".pcalss").text("p元素被修改了");//元素選擇器，指定修改元素

});

2，事件常用方法

①可以根據元素類型，id，class，標籤進行修改內容。

3，綁定，解除事件

使用 .bind() 和unbind()方法。

例如：

$("#clickMeBtn").bind("click",clickHandler);

$("#clickMeBtn").bind("click",clickHandler1);

$("#clickMeBtn").unbind("click",clickHandler1);//解除指定的綁定，方法---不帶（）

/*jquery 1.7之後 on代替 bind */

$("#clickMeBtn").on("click",clickHandler);

$("#clickMeBtn").on("click",clickHandler1);

$("#clickMeBtn").off("click");//解除所有綁定。方法---不帶（）

4，事件目標與冒泡

阻止冒泡方法：

e.stopPropagation();//阻止父級事件冒泡，body不再打印信息

e.stopImmediatePropagation();//阻止所有事件冒泡

5，自定義事件

例如：

clickBtn= $("#clickBtn");

clickBtn.click(function(){

var e =jQuery.Event("MyEvent");//創建自己的事件

clickBtn.trigger(e);//觸發

});

clickBtn.bind("MyEvent",function(e){//事件要傳遞進來

conlog(e);

});

三，jQuery效果之隱藏，顯示，淡入淡出，滑動，回調

1，隱藏與顯示

例如：

$("#hide").click(function (){

$("#phide").hide(1000);//點擊隱藏--動畫1s

});

$("#show").click(function (){

$("#phide").show(1000);//點擊顯示--動畫1s

});

$("#toggle").click(function (){

$("#phide").toggle(1000);//點擊顯示--動畫1s

});

2，淡入淡出

例如：

/*淡入淡出*/

$("#in").click(function(){

$("#div1").fadeIn(1000);

$("#div2").fadeIn(1000);

$("#div3").fadeIn(1000);

});

$("#out").click(function(){

$("#div1").fadeOut(1000);

$("#div2").fadeOut(1000);

$("#div3").fadeOut(1000);

});

$("#fadetoggle").click(function(){//開關

$("#div1").fadeToggle(1000);

$("#div2").fadeToggle(1000);

$("#div3").fadeToggle(1000);

});

$("#fadeto").click(function(){//透明度

$("#div1").fadeTo(1000,0.5);

$("#div2").fadeTo(1000,0.7);

$("#div3").fadeTo(1000,0.3);

});

3，滑動

$("#flipshow").click(function(){//顯示（之前在樣式中displayed：nono）

$("#content").slideDown(500);

});

$("#fliphide").click(function(){//隱藏

$("#content").slideUp(500);

});

$("#fliptoggle").click(function(){//開關

$("#content").slideToggle(500);

});

4，回調

/*回調*/

$("#btn").click(function(){

// $("p").hide(1000,function(){//單獨執行

// alert("動畫結束，方法回調")

// });

$("p").css("color","red").slideUp(500).slideDown(500);//多個設置和動畫

});

四，HTML之捕獲，設置，元素添加，元素刪除

1，HTML-捕獲

例：

/*獲取*/

$("#btn1").click(function(){

// alert("text:"+$("#text").text());//text()獲取內容

// alert("text:"+$("#text").html());//html()獲取全部內容，包含標籤

alert("text:"+$("#input").val());//val()獲取輸入框內容

});

$("#btn2").click(function(){

alert("網址:"+$("#aid").attr("href")+",ID:"+$("#aid").attr("id"));//attr()獲取屬性

});

2，HTML-設置

例：

/*設置*/
$("#btn3").click(function(){
$("#p1").text("極客學院");//修改P標籤內容
});
$("#btn4").click(function(){
$("#p2").t("<a href='http://www.jikexueyuan.com'>極客學院2</a>");//給p標籤添加a標籤
});

$("#btn5").click(function(){
$("#i3").val("jikexueyuan");//修改input的內容
});
$("#btn6").click(function(){
// $("#a").attr("href","http://www.jikexueyuan.com");//修改input的內容
$("#a").attr({
"href":"http://www.jikexueyuan.com",
"title":"hello"
});
$("#a").text("極客學院");
});
$("#btn7").click(function(){
$("#p5").text(function(i,ot){//顯示不斷返回的數據，新的和舊的。
return "old:"+ot+", new:"+i;
});
});

3，HTML-添加元素

例如：

/*添加*/

/*說明：

* append:在元素結尾添加;

* before，prepend:在元素之前添加;

* after：在元素之後添加

* */

$("#btn8").click(function(){

// $("#p6").append("this is a web");//結尾

$("#p6").prepend("this is a web");//之前

});

$("#btn9").click(function(){

// $("#p7").before("this is a web");//在上一行

$("#p7").after("this is a web");//在下一行

});

function appendText(){

/*三種方式添加內容：

*html,jQuery,DOM

* */

var text1="<p>iwen</p>";

var text2=$("<p></p>").text("iwe");

var text3=document.createElement("p");

text3.innerHTML="iw";

$("body").append(text1,text2,text3);

}

4，HTMl-刪除元素

例：

/*刪除*/

/*方法：

* remove，empty

* */

$("#btn10").click(function(){

$("#div").remove();//全刪除

// $("#div").empty();//刪除元素內容

});

五，CSS操作及jQuery的盒子模型

1，jQuery CSS方法

例：

/*css 方法*/

var div=$("#div1");

// div.css("width","100px");//單個設置屬性

// div.css("height","100px");

// div.css("background","#FF0000");

// div.css({//設置多個屬性

// width:"100px",height:"100px",backgroundColor:"#00FF00"

// });

div.addClass("style1");//加載一個class樣式。

div.click(function(){

// $(this).addClass("style2");

// $(this).removeClass("style1");//點擊移除樣式

$(this).toggleClass("style2");//更換

});

2，jQuery 盒子模型

/*盒子模型*/

var d= $("#div2");//獲得div高度

d.click(function(){

// alert(d.height());//寬 100

// alert(d.innerHeight());//高+邊距 200

alert(d.outerHeight());// 高+邊距+外邊框 204

alert(d.outerHeight(true));// 高+邊距+外邊框+外邊距 304

});

六，元素的遍歷與過濾

1，向下遍歷

/*向下遍歷

* children, find

* */

// $("#div1").children().css({//指向下延伸一級

// border:"3px solid #FF0000"

// });

$("#div1").find("a").css({//必填元素，修改指定元素

border:"3px solid #FF0000"

});

2，向上遍歷

/*向上遍歷

* parent, parents, parentUntil

* */

// $("p").parent().css({//父邊框一級變

// border:"3px solid #FF0000"

// });

// $("p").parents().css({//外面的所有變

// border:"3px solid #FF0000"

// });

$("a").parentsUntil("#div1").css({//指定元素之間區間變

border:"3px solid #FF0000"

});

3，同級遍歷

/*同級遍歷

* sibings,next,nextALl,nextUntil,preAll,preUntil

* */

// $("h4").siblings().css({//修改其他所有同級元素