整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
avaScript 是世界上最流行的編程語言之一。
我相信這是您第一個絕佳選擇的編程語言。
我們主要使用JavaScript來創建：
我們的網站：https://www.icoderoad.com
但 JavaScript 不限于這些東西，它還可以用于：
它基本上可以做任何事情。它非常流行，以至于出現的所有新事物都會在某個時候能集成某種 JavaScript。
JavaScript 是一種編程語言，它是：
如您所知，JavaScript 與 Java 無關，這是一個糟糕的名稱選擇，但我們必須忍受它。
手冊摘要
歷史
JavaScript 創建于 1995 年，自其不起眼的開始以來已經走過了很長的路。
它是 Web 瀏覽器原生支持的第一種腳本語言，因此它獲得了優于任何其他語言的競爭優勢，今天它仍然是我們可以用來構建 Web 應用程序的唯一腳本語言。
也存在其他語言，但都必須編譯為 JavaScript - 或者最近編譯為 WebAssembly，但這是另一回事。
最初 JavaScript 還沒有今天那么強大，它主要用于花哨的動畫和當時被稱為動態 HTML奇跡。
隨著 Web 平臺（并且繼續要求）不斷增長的需求，JavaScript也有責任發展，以適應世界上使用最廣泛的生態系統之一的需求。
JavaScript 現在也在瀏覽器之外廣泛使用。Node.js 在過去幾年的興起開啟了后端開發的大門，曾經是 Java、Ruby、Python、PHP 和更傳統的服務器端語言的領域。
JavaScript 現在也是支持數據庫和更多應用程序的語言，甚至可以開發嵌入式應用程序、移動應用程序、電視應用程序等等。最初是瀏覽器中的一種小語言，現在是世界上最流行的語言。
JavaScript
有時很難將 JavaScript 與使用它的環境的特性區分開來。
例如，console.log()您可以在許多代碼示例中找到的那行代碼不是 JavaScript。相反，它是瀏覽器中提供給我們的龐大 API 庫的一部分。
同樣，在服務器上，有時很難將 JavaScript 語言功能與 Node.js 提供的 API 分開。
React 或 Vue 是否提供特定功能？還是通常所說的“普通 JavaScript”？
在本手冊中，我將討論 JavaScript 這種語言。
不會因外部生態系統提供的事物而使您的學習過程復雜化。
JavaScript 語法簡介
在這個簡短的介紹中，我想告訴大家 5 個概念：
空白空間
JavaScript 不認為空白是有意義的。至少在理論上，可以以您可能喜歡的任何方式添加空格和換行符。
在實踐中，您很可能會保持明確定義的樣式并遵守人們常用的樣式，并使用 linter 或Prettier等樣式工具強制執行此操作。
例如，我總是為每個縮進使用 2 個空格字符。
區分大小寫
JavaScript 區分大小寫。一個名為something的變量不同于Something.
其它標識符也是如此。
字面量
我們將字面量定義為在源代碼中寫入的值，例如，數字、字符串、布爾值或更高級的構造，如 Object 字面量 或 Array 字面量：
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}標識符
標識符是可用于標識變量、函數或對象的字符序列。它可以以字母、美元符號$或下劃線開頭_，并且可以包含數字。使用 Unicode，字母可以是任何允許的字符，例如，表情符號 ?。
Test
test
TEST
_test
Test1
$test美元符號通常用于引用 DOM 元素。
有些名稱是為 JavaScript 內部使用而保留的關鍵字，我們不能將它們用作標識符。
注釋
注釋是任何編程語言中最重要的部分之一。它們很重要，因為它們讓我們可以注釋代碼并添加重要信息，否則其他人（或我們自己）閱讀代碼時無法獲得這些信息。
在 JavaScript 中，我們可以使用//進行注釋. JavaScript 解釋器不會將//之后的所有內容視為代碼。
像這樣：
// a comment
true //another comment另一種類型的注釋是多行注釋。它以 /*開頭和*/結尾。
兩者之間的所有內容均被認為注釋：
/* some kind
of
comment
*/分號
JavaScript 程序中的每一行都可選地使用分號終止。
我說可選，因為 JavaScript 解釋器足夠聰明，可以為您引入分號。
在大多數情況下，您可以在程序中完全省略分號，甚至無需考慮它。
這個事實是非常有爭議的。一些開發人員將始終使用分號，而另一些開發人員則從不使用分號，并且您總是會發現使用分號的代碼和不使用分號的代碼。
我個人的偏好是避免使用分號，所以我在書中的示例不會包含它們。
值類型
字符串hello是一個值。像一個數字12是一個值。
hello和12是值。string 和 number是這些值的類型。
類型是值的種類，它的類別。JavaScript 中有許多不同的類型，稍后我們將詳細討論它們。每種類型都有自己的特點。
當我們需要一個值的引用時，我們將它分配給一個變量。變量可以有一個名稱，而值是存儲在變量中的內容，因此我們稍后可以通過變量名稱訪問該值。
變量
變量是分配給標識符的值，因此您可以稍后在程序中引用和使用它。
這是因為 JavaScript 是弱類型的，這是您經常聽到的概念。
必須先聲明變量，然后才能使用它。
我們有兩種主要的方式來聲明變量。首先是使用const：
const a = 0第二種方法是使用let：
let a = 0有什么不同？
const定義對值的常量引用。這意味著不能更改引用。不能為其重新分配新值。
使用letp聲明的變量可以為其分配一個新值。
例如，不能這樣做：
const a = 0
a = 1因為會得到一個錯誤：TypeError: Assignment to constant variable..
另一方面，可以使用letp聲明變量：
let a = 0
a = 1const并不像 C 等其他語言那樣表示“常量”。特別是，這并不意味著該值不能改變 - 這意味著它不能被重新分配。如果變量指向一個對象或數組（我們稍后會看到更多關于對象和數組的內容），那么對象或數組的內容可以自由改變。
const變量必須在聲明時初始化：
const a = 0但let值可以稍后初始化：
let a
a = 0可以在同一語句中一次聲明多個變量：
const a = 1, b = 2
let c = 1, d = 2但是不能多次重新聲明同一個變量：
let a = 1
let a = 2否則會收到“重復聲明”錯誤。
我的建議是始終使用const聲明產量，僅在您知道需要為該變量重新分配值時使用let。為什么？因為我們的代碼的功能越少越好。如果我們知道一個值不能被重新分配，那么它就少了一個錯誤來源。
既然我們已經了解了如何使用const和 let，我想提一下var。
直到 2015 年，var這是我們在 JavaScript 中聲明變量的唯一方法。今天，現代代碼庫很可能只使用const和 letp聲明變量。我在這篇文章中詳細介紹了一些基本差異，但如果你剛剛開始學習JavaScript ，可能不會關心它們。只需使用const和letp聲明變量即可。
類型
JavaScript 中的變量沒有附加任何類型。
它們是無類型的。
將具有某種類型的值分配給變量后，可以稍后重新分配該變量以承載任何其他類型的值，而不會出現任何問題。
在 JavaScript 中，我們有 2 種主要類型：原始類型和對象類型。
原始類型
原始類型是
還有兩種特殊類型：null和undefined。
對象類型
任何不是原始類型（字符串、數字、布爾值、null 或未定義）的值都是對象。
對象類型有屬性，也有可以作用于這些屬性的方法。
稍后我們將更多地討論對象。
表達式
表達式是 JavaScript 引擎可以評估并返回值的單個 JavaScript 代碼單元。
表達式的復雜性可能會有所不同。
我們從非常簡單的開始，稱為初級表達式：
2
0.02
'something'
true
false
this //the current scope
undefined
i //where i is a variable or a constant算術表達式是接受一個變量和一個運算符的表達式（稍后將詳細介紹運算符），并產生一個數字：
1 / 2
i++
i -= 2
i * 2字符串表達式是產生字符串的表達式：
'A ' + 'string'邏輯表達式使用邏輯運算符并解析為布爾值：
a && b
a || b
!a更高級的表達式涉及對象、函數和數組，我稍后會介紹它們。
運算符
運算符允許獲得兩個簡單的表達式并將它們組合成一個更復雜的表達式。
我們可以根據它們使用的操作數對運算符進行分類。一些運算符使用 1 個操作數。大多數使用 2 個操作數。只有一個運算符可以處理 3 個操作數。
在對運算符的第一次介紹中，我們將介紹您最可能熟悉的運算符：具有 2 個操作數的運算符。
我在談論變量時已經介紹了一個：賦值運算符=。您用=為變量賦值：
let b = 2現在讓我們介紹另一組在基礎數學中已經熟悉的二元運算符。
加法運算符 (+)
const three = 1 + 2
const four = three + 1如果使用字符串，+運算符也會進行字符串連接，因此請注意：
const three = 1 + 2
three + 1 // 4
'three' + 1 // three1減法運算符 (-)
const two = 4 - 2除法運算符 (/)
返回第一個運算符和第二個運算符的商：
const result = 20 / 5 //result === 4
const result = 20 / 7 //result === 2.857142857142857如果除以零，JavaScript 不會引發任何錯誤，但會返回該Infinity值（或者-Infinity如果該值為負數）。
1 / 0 //Infinity
-1 / 0 //-Infinity余數運算符 (%)
在許多用例中，余數是非常有用的計算：
const result = 20 % 5 //result === 0
const result = 20 % 7 //result === 6NaN余數總是為零，這是一個表示“非數字”的特殊值：
1 % 0 //NaN
-1 % 0 //NaN乘法運算符 (*)
將兩個數字相乘
1 * 2 //2
-1 * 2 //-2冪運算符 (**)
將第一個操作數提高到第二個操作數的冪
1 ** 2 //1
2 ** 1 //2
2 ** 2 //4
2 ** 8 //256
8 ** 2 //64優先規則
在同一行中包含多個運算符的每個復雜語句都會引入優先級問題。
舉個例子：
let a = 1 * 2 + 5 / 2 % 2結果是 2.5，但為什么呢？
哪些操作先執行，哪些需要等待？
某些操作比其他操作具有更高的優先級。下表列出了優先規則：
操作員 | 描述 |
同一級別的操作（如+和-）按照它們被發現的順序從左到右執行。
按照這些規則，上面的操作可以這樣解決：
let a = 1 * 2 + 5 / 2 % 2
let a = 2 + 5 / 2 % 2
let a = 2 + 2.5 % 2
let a = 2 + 0.5
let a = 2.5比較運算符
在賦值和數學運算符之后，我要介紹的第三組運算符是條件運算符。
可以使用以下運算符來比較兩個數字或兩個字符串。
比較運算符總是返回一個布爾值，即true或false)。
這些是不等式比較運算符：
例子：
let a = 2
a >= 1 //true除此之外，我們還有 4 個相等運算符。它們接受兩個值，并返回一個布爾值：
請注意，我們在 JavaScript 中也有==和 !=，但我強烈建議只使用===和!==，因為它們可以防止一些微妙的問題。
條件語句
有了比較運算符，我們就可以討論條件語句了。
if語句用于使程序根據表達式求值的結果選擇一條路徑或另一條路徑。
這是最簡單的例子，它總是執行：
if (true) {
//do something
}相反，這將永遠不會執行：
if (false) {
//do something (? never ?)
}條件檢查傳遞給它的表達式的真值或假值。如果傳遞一個數字，除非它是 0，否則它總是計算為真。如果傳遞一個字符串，它總是計算為真，除非它是一個空字符串。這些是將類型轉換為布爾值的一般規則。
注意到花括號了嗎？這稱為塊，它用于對不同語句的列表進行分組。
塊可以放在任何可以有單個語句的地方。如果在條件句之后有一條語句要執行，可以省略該塊，只寫語句：
if (true) doSomething()但我總是喜歡用花括號，這樣的語句更清楚。
else可以為if語句提供第二部分。
if如果條件為假，則附加將要執行的語句：
if (true) {
//do something
} else {
//do something else
}由于else接受一個語句，可以在其中嵌套另一個 if/else 語句：
if (a === true) {
//do something
} else if (b === true) {
//do something else
} else {
//fallback
}數組
數組是元素的集合。
JavaScript 中的數組本身并不是一種類型。
數組是對象。
我們可以通過以下兩種不同的方式初始化一個空數組：
const a = []
const a = Array()第一種是使用數組文字語法。第二個使用 Array 內置函數。
您可以使用以下語法預填充數組：
const a = [1, 2, 3]
const a = Array.of(1, 2, 3)數組可以保存任何值，甚至是不同類型的值：
const a = [1, 'Flavio', ['a', 'b']]由于我們可以將數組添加到數組中，因此我們可以創建多維數組，這些數組有非常有用的應用（例如矩陣）：
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
matrix[0][0] //1
matrix[2][0] //7可以通過引用從零開始的索引來訪問數組的任何元素：
a[0] //1
a[1] //2
a[2] //3可以使用以下語法使用一組值初始化一個新數組，該語法首先初始化一個由 12 個元素組成的數組，并用數字0填充每個元素：
Array(12).fill(0)可以通過檢查其length屬性來獲取數組中元素的數量：
const a = [1, 2, 3]
a.length //3請注意，可以設置數組的長度。如果分配的數字大于陣列當前容量，則不會發生任何事情。如果分配較小的數字，則在該位置切割數組：
const a = [1, 2, 3]
a //[ 1, 2, 3 ]
a.length = 2
a //[ 1, 2 ]如何將項目添加到數組
我們可以使用push()方法在數組末尾添加一個元素：
a.push(4)我們可以使用unshift()方法在數組的開頭添加一個元素：
a.unshift(0)
a.unshift(-2, -1)如何從數組中刪除一個項目
我們可以使用pop()方法從數組末尾刪除一個項目：
a.pop()我們可以使用shift()方法從數組的開頭刪除一個項目：
a.shift()如何連接兩個或多個數組
可以使用concat()方法連接多個數組：
const a = [1, 2]
const b = [3, 4]
const c = a.concat(b) //[1,2,3,4]
a //[1,2]
b //[3,4]還可以通過使用擴展運算符 ( ...)：
const a = [1, 2]
const b = [3, 4]
const c = [...a, ...b]
c //[1,2,3,4]如何在數組中查找特定項
可以使用數組的find()方法：
a.find((element, index, array) => {
//return true or false
})返回第一個返回 true 的項目，如果未找到該元素則返回undefined。
一個常用的語法是：
a.find(x => x.id === my_id)上面的行將返回數組中id === my_id的第一個元素。
findIndex()與 find()類似，但返回第一個為true 的項目的索引，如果未找到，則返回undefined：
a.findIndex((element, index, array) => {
//return true or false
})另一種方法是includes()：
a.includes(value)a如果包含則返回真value。
a.includes(value, i)如果在 position 之后包含value，則返回 true 。
字符串
字符串是一個字符序列。
它也可以定義為字符串文字，用引號或雙引號括起來：
'A string'
"Another string"我個人一直更喜歡單引號，只在 HTML 中使用雙引號來定義屬性。
將字符串值分配給如下變量：
const name = 'Flavio'length可以使用它的屬性來確定字符串的長度：
'Flavio'.length //6
const name = 'Flavio'
name.length //6''這是一個空字符串. 它的長度屬性為 0：
''.length //0可以使用+運算符連接兩個字符串：
"A " + "string"可以使用+運算符來插入變量：
const name = 'Flavio'
"My name is " + name //My name is Flavio定義字符串的另一種方法是使用在反引號內定義的模板文字。它們對于使多行字符串更簡單特別有用。使用單引號或雙引號，您無法輕松定義多行字符串 - 您需要使用轉義字符。
使用反引號打開模板文字后，只需按 Enter 鍵即可創建一個新行，沒有特殊字符，并且按原樣呈現：
const string = `Hey
this
string
is awesome!`模板文字也很棒，因為它們提供了一種將變量和表達式插入字符串的簡單方法。
您可以使用以下${...}語法來執行此操作：
const var = 'test'
const string = `something ${var}`
//something test在${}里面可以添加任何東西，甚至是表達式：
const string = `something ${1 + 2 + 3}`
const string2 = `something
${foo() ? 'x' : 'y'}`循環
循環是 JavaScript 的主要控制結構之一。
使用循環，我們可以自動化并重復一段代碼，無論我們希望它運行多少次，甚至無限期地運行。
JavaScript 提供了許多迭代循環的方法。
我想專注于3種方式：
while
while 循環是 JavaScript 提供給我們的最簡單的循環結構。
我們在關鍵字之后添加一個條件while，并提供一個運行塊，直到條件評估為true。
例子：
const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
}您可以使用關鍵字中斷while循環，如下所示：break
while (true) {
if (somethingIsTrue) break
}如果您決定在循環中間跳過當前迭代，則可以使用以下命令跳轉到下一個迭代continue：
while (true) {
if (somethingIsTrue) continue
//do something else
}非常類似于while，我們有do..while循環。它與 基本相同while，只是在執行代碼塊之后評估條件。
這意味著塊總是至少執行一次。
例子：
const list = ['a', 'b', 'c']
let i = 0
do {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
} while (i < list.length)for
JavaScript 中第二個非常重要的循環結構是for 循環。
我們使用for關鍵字并傳遞一組 3 條指令：初始化、條件和增量部分。
例子：
const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
console.log(list[i]) //value
console.log(i) //index
}就像while循環一樣，您可以使用 中斷for循環，并且可以使用 快進到循環break的下一次迭代。forcontinue
for...of
這個循環是相對較新的（2015 年引入），它是for循環的簡化版本：
const list = ['a', 'b', 'c']
for (const value of list) {
console.log(value) //value
}函數
在任何中等復雜的 JavaScript 程序中，一切都發生在函數內部。
函數是 JavaScript 的核心，必不可少的部分。
什么是函數？
函數是一個自包含的代碼塊。
這是一個函數聲明：
function getData() {
// do something
}一個函數可以通過調用它隨時運行，如下所示：
getData()一個函數可以有一個或多個參數：
function getData() {
//do something
}
function getData(color) {
//do something
}
function getData(color, age) {
//do something
}當我們可以傳遞參數時，我們調用傳遞參數的函數：
function getData(color, age) {
//do something
}
getData('green', 24)
getData('black')請注意，在第二次調用中，我將black字符串參數作為color參數傳遞，但沒有傳遞age. 在這種情況下，age函數內部是undefined.
我們可以使用以下條件檢查值是否未定義：
function getData(color, age) {
//do something
if (typeof age !== 'undefined') {
//...
}
}typeof是一個一元運算符，它允許我們檢查變量的類型。
您也可以通過以下方式檢查：
function getData(color, age) {
//do something
if (age) {
//...
}
}雖然如果ageis或空字符串null，條件也將為真。0
您可以為參數設置默認值，以防它們未傳遞：
function getData(color = 'black', age = 25) {
//do something
}您可以將任何值作為參數傳遞：數字、字符串、布爾值、數組、對象以及函數。
一個函數有一個返回值。默認情況下，函數返回undefined，除非您添加return帶有值的關鍵字：
function getData() {
// do something
return 'hi!'
}我們可以在調用函數時將此返回值分配給變量：
function getData() {
// do something
return 'hi!'
}
let result = getData()result現在保存一個帶有hi!值的字符串。
您只能返回一個值。
要返回多個值，您可以返回一個對象或數組，如下所示：
function getData() {
return ['Flavio', 37]
}
let [name, age] = getData()函數可以在其他函數中定義：
const getData = () => {
const dosomething = () => {}
dosomething()
return 'test'
}嵌套函數不能從封閉函數的外部調用。
你也可以從一個函數中返回一個函數。
箭頭函數
箭頭函數是最近對 JavaScript 的介紹。
它們經常被用來代替我在前一章中描述的“常規”函數。您會發現這兩種形式隨處可見。
從視覺上看，它們允許您使用更短的語法編寫函數，來自：
function getData() {
//...
}到
() => {
//...
}但是..注意我們這里沒有名字。
箭頭函數是匿名的。我們必須將它們分配給一個變量。
我們可以將常規函數分配給變量，如下所示：
let getData = function getData() {
//...
}當我們這樣做時，我們可以從函數中刪除名稱：
let getData = function() {
//...
}并使用變量名調用函數：
let getData = function() {
//...
}
getData()這與我們對箭頭函數所做的事情相同：
let getData = () => {
//...
}
getData()如果函數體只包含一條語句，則可以省略括號并將所有內容寫在一行上：
const getData = () => console.log('hi!')參數在括號中傳遞：
const getData = (param1, param2) =>
console.log(param1, param2)如果您有一個（并且只有一個）參數，則可以完全省略括號：
const getData = param => console.log(param)箭頭函數允許您有一個隱式返回 - 無需使用return關鍵字即可返回值。
它在函數體中有一行語句時起作用：
const getData = () => 'test'
getData() //'test'與常規函數一樣，我們可以為參數設置默認值，以防它們未傳遞：
const getData = (color = 'black',
age = 2) => {
//do something
}和常規函數一樣，我們只能返回一個值。
箭頭函數還可以包含其他箭頭函數，甚至是常規函數。
這兩種函數非常相似，所以你可能會問為什么要引入箭頭函數。與常規函數的最大區別在于它們用作對象方法時。這是我們將很快研究的事情。
對象
任何不是原始類型（字符串、數字、布爾值、符號、null 或未定義）的值都是對象。
下面是我們定義對象的方式：
const car = {
}這是對象字面量語法，它是 JavaScript 中最好的東西之一。
您還可以使用以下new Object語法：
const car = new Object()另一種語法是使用Object.create()：
const car = Object.create()new您還可以在帶有大寫字母的函數之前使用關鍵字初始化對象。此函數用作該對象的構造函數。在那里，我們可以初始化我們作為參數接收的參數，以設置對象的初始狀態：
function Car(brand, model) {
this.brand = brand
this.model = model
}我們使用以下方法初始化一個新對象：
const myCar = new Car('Ford', 'Fiesta')
myCar.brand //'Ford'
myCar.model //'Fiesta'對象總是通過引用傳遞。
如果您為一個變量分配與另一個變量相同的值，如果它是像數字或字符串這樣的原始類型，則它們是按值傳遞的：
舉個例子：
let age = 36
let myAge = age
myAge = 37
age //36
const car = {
color: 'blue'
}
const anotherCar = car
anotherCar.color = 'yellow'
car.color //'yellow'即使是數組或函數，在底層也是對象，因此了解它們的工作原理非常重要。
對象屬性
對象具有屬性，這些屬性由與值關聯的標簽組成。
屬性的值可以是任何類型，這意味著它可以是數組、函數，甚至可以是對象，因為對象可以嵌套其他對象。
這是我們在上一章看到的對象字面量語法：
const car = {
}我們可以color這樣定義一個屬性：
const car = {
color: 'blue'
}在這里，我們有一個car對象，其屬性名為color，其值為blue。
標簽可以是任何字符串，但要注意特殊字符 - 如果我想在屬性名稱中包含一個無效的字符作為變量名，我將不得不在它周圍使用引號：
const car = {
color: 'blue',
'the color': 'blue'
}無效的變量名字符包括空格、連字符和其他特殊字符。
如您所見，當我們有多個屬性時，我們用逗號分隔每個屬性。
我們可以使用 2 種不同的語法來檢索屬性的值。
第一個是點符號：
car.color //'blue'第二個（這是我們唯一可以用于名稱無效的屬性）是使用方括號：
car['the color'] //'blue'如果您訪問不存在的屬性，您將獲得以下undefined值：
car.brand //undefined如前所述，對象可以具有嵌套對象作為屬性：
const car = {
brand: {
name: 'Ford'
},
color: 'blue'
}在此示例中，您可以使用訪問品牌名稱
car.brand.name或者
car['brand']['name']您可以在定義對象時設置屬性的值。
但是您以后可以隨時更新它：
const car = {
color: 'blue'
}
car.color = 'yellow'
car['color'] = 'red'您還可以向對象添加新屬性：
car.model = 'Fiesta'
car.model //'Fiesta'給定對象
const car = {
color: 'blue',
brand: 'Ford'
}您可以使用從該對象中刪除一個屬性
delete car.brand對象方法
我在前一章中談到了函數。
可以將函數分配給函數屬性，在這種情況下，它們稱為方法。
在這個例子中，start屬性分配了一個函數，我們可以使用我們用于屬性的點語法來調用它，括號在末尾：
const car = {
brand: 'Ford',
model: 'Fiesta',
start: function() {
console.log('Started')
}
}
car.start()在使用function() {}語法定義的方法中，我們可以通過引用來訪問對象實例this。
在以下示例中，我們可以使用and訪問brand和model屬性值：this.brandthis.model
const car = {
brand: 'Ford',
model: 'Fiesta',
start: function() {
console.log(`Started
${this.brand} ${this.model}`)
}
}
car.start()重要的是要注意常規函數和箭頭函數之間的這種區別——this如果我們使用箭頭函數，我們就無法訪問：
const car = {
brand: 'Ford',
model: 'Fiesta',
start: () => {
console.log(`Started
${this.brand} ${this.model}`) //not going to work
}
}
car.start()這是因為箭頭函數沒有綁定到對象。
這就是為什么經常將常規函數用作對象方法的原因。
方法可以接受參數，如常規函數：
const car = {
brand: 'Ford',
model: 'Fiesta',
goTo: function(destination) {
console.log(`Going to ${destination}`)
}
}
car.goTo('Rome')類
我們討論了對象，這是 JavaScript 中最有趣的部分之一。
在本章中，我們將通過介紹類來提升一個層次。
什么是類？它們是一種為多個對象定義通用模式的方法。
讓我們看一個人對象：
const person = {
name: 'Flavio'
}我們可以創建一個名為Person（注意大寫P，使用類時的約定）的類，它有一個name屬性：
class Person {
name
}現在從這個類中，我們像這樣初始化一個flavio對象：
const flavio = new Person()flavio稱為 Person 類的實例。
我們可以設置name屬性的值：
flavio.name = 'Flavio'我們可以使用
flavio.name就像我們對對象屬性所做的那樣。
類可以保存屬性，例如name和方法。
方法是這樣定義的：
class Person {
hello() {
return 'Hello, I am Flavio'
}
}我們可以在類的實例上調用方法：
class Person {
hello() {
return 'Hello, I am Flavio'
}
}
const flavio = new Person()
flavio.hello()當我們創建一個新的對象實例時，我們可以使用一個特殊的方法 constructor()來初始化類屬性。
它是這樣工作的：
class Person {
constructor(name) {
this.name = name
}
hello() {
return 'Hello, I am ' + this.name + '.'
}
}注意我們如何使用this來訪問對象實例。
現在我們可以從類中實例化一個新對象，傳入一個字符串，當我們調用時，hello我們會得到一條個性化的消息：
const flavio = new Person('flavio')
flavio.hello() //'Hello, I am flavio.'初始化對象時，將constructor使用傳遞的任何參數調用該方法。
通常方法是在對象實例上定義的，而不是在類上。
可以定義一個 static 方法以允許它在類上執行：
class Person {
static genericHello() {
return 'Hello'
}
}
Person.genericHello() //Hello這有時非常有用。
繼承
一個類可以擴展另一個類，使用該類初始化的對象繼承這兩個類的所有方法。
假設我們有一個類Person：
class Person {
hello() {
return 'Hello, I am a Person'
}
}我們可以定義一個新類，Programmer擴展Person：
class Programmer extends Person {
}現在，如果我們用 class 實例化一個新對象Programmer，它就可以訪問該hello()方法：
const flavio = new Programmer()
flavio.hello() //'你好, 我是一個人。'在子類中，可以通過調用 super() 來引用父類方法：
class Programmer extends Person {
hello() {
return super.hello() +
'我也是一名程序員。'
}
}
const flavio = new Programmer()
flavio.hello()上面的程序打印你好，我是一個人。我也是一名程序員。
異步編程和回調
大多數時候，JavaScript 代碼是同步運行的。
這意味著執行一行代碼，然后執行下一個代碼，以此類推。
一切都如您所愿，這是它在大多數編程語言中的工作方式。
但是，有時不能只等待一行代碼執行。
不能只等待 2 秒鐘來加載一個大文件，然后完全停止程序。
不能只等待下載網絡資源后再做其他事情。
JavaScript 通過使用回調解決了這個問題。
如何使用回調的最簡單示例之一是使用計時器。計時器不是 JavaScript 的一部分，但它們由瀏覽器和 Node.js 提供。讓我談談我們擁有的一個計時器：setTimeout()函數。
該setTimeout()函數接受 2 個參數：一個函數和一個數字。該數字是在函數運行之前必須經過的毫秒數。
例子：
setTimeout(() => {
// 2秒以后執行
console.log('inside the function')
}, 2000)包含該console.log('inside the function')行的函數將在 2 秒后執行。
如果在函數之前添加一個 console.log('before') 日志，函數之后添加一個console.log('after')日志：
console.log('before')
setTimeout(() => {
// runs after 2 seconds
console.log('inside the function')
}, 2000)
console.log('after')將在控制臺中看到這種情況：
before
after
inside the function回調函數是異步執行的。
當在瀏覽器中使用文件系統、網絡、事件或 DOM 時，這是一種非常常見的模式。
我提到的所有東西都不是“核心”JavaScript，因此本手冊中沒有解釋它們，但會在https://flaviocopes.com上的其他手冊中找到很多示例。
以下是我們如何在代碼中實現回調。
我們定義一個接受callback參數的函數，它是一個函數。
當代碼準備好調用回調時，我們通過傳遞結果來調用它：
const doSomething = callback => {
//do things
//do things
const result = /* .. */
callback(result)
}使用此函數的代碼將像這樣使用它：
doSomething(result => {
console.log(result)
})Promise
Promise 是處理異步代碼的另一種方法。
正如我們在前一章中看到的，通過回調我們將一個函數傳遞給另一個函數調用，該函數將在函數完成處理時調用。
像這樣：
doSomething(result => {
console.log(result)
})當doSomething()代碼結束時，它調用作為參數接收的函數：
const doSomething = callback => {
//do things
//do things
const result = /* .. */
callback(result)
}這種方法的主要問題是，如果我們需要在其余代碼中使用這個函數的結果，我們所有的代碼都必須嵌套在回調中，如果我們必須進行 2-3 次回調，我們輸入的是通常定義“回調地獄”，將許多級別的函數縮進到其他函數中：
doSomething(result => {
doSomethingElse(anotherResult => {
doSomethingElseAgain(yetAnotherResult => {
console.log(result)
})
})
})Promise 是處理這個問題的一種方法。
而不是這樣做：
doSomething(result => {
console.log(result)
})我們以這種方式調用基于 Promise 的函數：
doSomething()
.then(result => {
console.log(result)
})我們首先調用函數，然后我們有一個在函數結束時調用的then()方法。
縮進無關緊要，但為了清晰起見，通常會使用這種樣式。
使用以下catch()方法檢測錯誤很常見：
doSomething()
.then(result => {
console.log(result)
})
.catch(error => {
console.log(error)
})現在，為了能夠使用這種語法，doSomething()函數實現必須有點特殊。它必須使用 Promises API。
而不是將其聲明為普通函數：
const doSomething = () => {
}我們將它聲明為一個 Promise 對象：
const doSomething = new Promise()我們在 Promise 構造函數中傳遞一個函數：
const doSomething = new Promise(() => {
})該函數接收 2 個參數。第一個是我們調用來解析Promise 的函數，第二個是我們調用來拒絕 Promise 的函數。
const doSomething = new Promise(
(resolve, reject) => {
})解決一個 Promise 意味著成功完成它（這導致then()在任何使用它的地方調用該方法）。
拒絕一個 Promise 味著以一個錯誤結束它（這導致catch()在任何使用它的地方調用該方法）。
就是這樣：
const doSomething = new Promise(
(resolve, reject) => {
//some code
const success = /* ... */
if (success) {
resolve('ok')
} else {
reject('this error occurred')
}
}
)我們可以將參數傳遞給我們想要的任何類型的解析和拒絕函數。
異步和等待
異步函數是 Promise 的更高層次的抽象。
一個異步函數返回一個 Promise，如下例所示：
const getData = () => {
return new Promise((resolve, reject) => {
setTimeout(() =>
resolve('some data'), 2000)
})
}任何想要使用此函數的代碼都將在函數之前使用 await 關鍵字：
const data = await getData()這樣做，Promise返回的任何數據都將被分配給data變量。
在我們的例子中，數據是“一些數據”字符串。
有一個特別的警告：每當我們使用await關鍵字時，我們必須在定義為 async 的函數中這樣做。
像這樣：
const doSomething = async () => {
const data = await getData()
console.log(data)
}async/await 讓我們擁有更簡潔的代碼和簡單的思維模型來處理異步代碼。
正如在上面的示例中看到的，我們的代碼看起來非常簡單。將其與使用Promise或回調函數的代碼進行比較。
這是一個非常簡單的例子，當代碼復雜得多時，主要的好處就會出現。
例如，以下是使用 Fetch API 獲取 JSON 資源并使用 Promise 解析它的方法：
const getFirstUserData = () => {
// get users list
return fetch('/users.json')
// parse JSON
.then(response => response.json())
// pick first user
.then(users => users[0])
// get user data
.then(user =>
fetch(`/users/${user.name}`))
// parse JSON
.then(userResponse => response.json())
}
getFirstUserData()這是使用 await/async 提供的相同功能：
const getFirstUserData = async () => {
// get users list
const response = await fetch('/users.json')
// parse JSON
const users = await response.json()
// pick first user
const user = users[0]
// get user data
const userResponse =
await fetch(`/users/${user.name}`)
// parse JSON
const userData = await user.json()
return userData
}
getFirstUserData()變量范圍
當我介紹變量時，我談到了使用const、let和var。
范圍是對程序的一部分可見的變量集。
在 JavaScript 中，我們有全局作用域、塊作用域和函數作用域。
如果變量是在函數或塊之外定義的，它會附加到全局對象并且它具有全局范圍，這意味著它可以在程序的每個部分中使用。
let 、const 和var聲明變量之間有一個非常重要的區別。
在函數內部定義的變量var僅在該函數內部可見，類似于函數的參數。
另一方面，定義為const或 let 的變量僅在定義它的塊內可見。
塊是組合成一對花括號的一組指令，就像我們可以在if語句、for循環或函數中找到的指令一樣。
重要的是要理解一個塊沒有為 定義一個新的范圍var，但它為let和 const 定義了一個新的范圍。
這具有非常實際的意義。
假設在函數的 if 條件內定義了一個 var 變量
function getData() {
if (true) {
var data = 'some data'
console.log(data)
}
}如果調用此函數，ome data打印到控制臺。
如果嘗試將 console.log(data) 移動到if語句之后，它仍然有效：
function getData() {
if (true) {
var data = 'some data'
}
console.log(data)
}但是如果切換var data到let data：
function getData() {
if (true) {
let data = 'some data'
}
console.log(data)
}會得到一個錯誤：ReferenceError: data is not defined。
這是因為var是函數作用域，這里發生了一種特殊的事情，稱為提升。簡而言之，JavaScript 在運行代碼之前將聲明var移動到最近的函數的頂部。這或多或少是這個函數在 JS 內部的樣子：
function getData() {
var data
if (true) {
data = 'some data'
}
console.log(data)
}這就是為什么也可以console.log(data)在函數的頂部，甚至在它被聲明之前，會得到undefined該變量的值：
function getData() {
console.log(data)
if (true) {
var data = 'some data'
}
}但是如果切換到let，會得到一個錯誤ReferenceError: data is not defined，因為 let 聲明不會發生提升。
const和let 遵循相同的規則：它們是塊范圍的。
一開始可能會很棘手，但一旦你意識到這種差異，你就會明白為什么var現在被認為是一種不好的做法——它們的活動部件更少，而且它們的范圍僅限于塊，這也使它們非常好作為循環變量，因為它們在循環結束后不再存在：
function doLoop() {
for (var i = 0; i < 10; i++) {
console.log(i)
}
console.log(i)
}
doLoop()當您退出循環時，i將是一個值為 10 的有效變量。
如果切換到let，當你嘗試切換到時console.log(i)會導致錯誤ReferenceError: i is not defined。
結論
非常感謝您閱讀完本手冊。
我希望它能激發您更多地了解 JavaScript。
本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。
標簽 | 英文全拼 | 作用 | 特點 |
?<html></html>?? | html | 網頁的根標簽 | 所有的標簽都要寫在這一對根標簽里面 |
??<head></head>?? | head | 網頁的頭標簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網頁的主題 | 包含文檔的所有內容 |
??<div></div>?? | division | 定義一個區域 | 瀏覽器通常會在??<div>??前后放置一個換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標簽 |
??<br>或<br/>?? | break | 換行 | 單標簽，不會在其前后創建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標簽 |
??<img src="">?? | image | 添加圖片 | 單標簽 |
??<embed src="">?? | embed | 嵌入外部應用 | 單標簽 |
??<meta>?? | meta | 提供有關頁面的元信息 | 單標簽，??<meta>???標簽通常位于??<head>??區域內 |
??<link>?? | link | 定義文檔與外部資源的關系 | 單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。 |
??<p></p>?? | paragraph | 定義段落 | 自動在其前后創建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標題 | h1在一個頁面里只能出現一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標簽一起使用 |
??<li></li>?? | list item | 創建列表項 | 可與各種列表定義標簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項目 |
??<dd></dd>?? | definition description | 定義描述 | 對描述列表中的項目進行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽 |
??<th></th>?? | table headline | 定義表格每一列的標題 | 該標簽的文本通常呈現為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數據 | 該標簽的文本呈現為普通且左對齊 |
??<caption>表格標題</caption>?? | caption | 定義整個表格的標題 | ??<caption>???標簽必須直接放在??<table>??標簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標簽定義了列表中的可用選項 |
??<option></option>?? | option | 定義下拉列表中的可用項 | ??<option>??標簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項組 | ??<optgroup>??標簽用于把相關的選項組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標題 | ??<legend>??通過css設定樣式 |
??<progress></progress>?? | progress | 定義運行中的任務進度 | ??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標簽是HTML5的新標簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標簽是HTML5的新標簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標簽是HTML5中的新標簽 |
普通用法
錨點鏈接
錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設置
在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網頁自動跳轉
無序列表
無序列表使用粗體圓點進行標記。簡單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。
<dl>
<dt>A</dt> <!-- 小標題 -->
<dd>A1</dd> <!-- 解釋標題 -->
<dd>A2</dd> <!-- 解釋標題 -->
<dt>B</dt> <!-- 小標題 -->
<dd>B1</dd> <!-- 解釋標題 -->
<dd>B2</dd> <!-- 解釋標題 -->
</dl>基礎表格
簡單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數據 -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個單選框只能有一個被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網址控件
<input type="date">日期控件
<input type="time">時間控件
<!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??
??<progress>??
簡單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對照表??
TML是用來制作網頁的標記語言，Hypertext Markup Language的英文縮寫，即超文本標記語言，它是一種標記語言,不需要編譯，直接由瀏覽器執行，它的文件文件是一個文本文件，包含了一些HTML元素、標簽等，文件必須使用html或htm為文件名后綴。它是結合層疊樣式表CSS而用的，前者控制網頁的結構，后者控制網頁的樣式。
自學它的難度大嗎？
HTML本身難度不大，自學更是沒問題！不過我們要先了解清楚它的三個概念：
概念1：標記
“HTML”、“BODY”、“TABLE”等是HTML用于描述功能的符號也就是標記，使用標價時，必須用放括號“<>”括起來并成對出現，沒有"/"的標價表示開始，反之表示標記的結束。
概念2：語法
用一些屬性參數來描述標記，是為了明確它的功能，而這些參數就是語法，例如："align"與"class"，“align”定義段的位置，默認值靠左；"class"定義所屬的類型，大致如此
概念3：特殊字符
方括號與英文雙引號提示HTML的標記及參數值，在網頁中要顯示方括號和英文引號只能用其它的符號來代替。
自學攻略
一、上網站看看
w3c網站官網是全球最大的中文 Web 技術教程。其中包括w3c的標準技術:HTML、CSS、XML，在這上面可以輕松的學習html（html5）等各種Web技術知識，在線測試，邊寫邊運行十分直觀，而且內附HTML學習手冊，學習起來有效率又簡單。
w3cshool官網
二、一本好書
找一本好書，直觀的照上面教的學習閱讀，最好是紙質書籍不要電子版的，因為你的大腦與眼睛對紙質書籍上的信息接受度更高！推薦書籍有：
① 《HTML5與CSS3權威指南》
② 《HTML 5開發精要與實例詳解》
③ 《HTML+5+從入門到精通》
三、常去CSDN或博客園逛逛看
這些博客有很多編程大神總結的經驗與技巧，新人也可以在上面發表自己的代碼，讓他們挑毛病，能解決你很多問題，順便提升自己的實力。
四、找些HTML的Q群
加入HTML的學習群，里面有很多和你一樣的新手，一起探討一起提升，何樂而不為呢？
五、html+css與移動框架、react組件等
學習DIV+CSS的基礎知識，掌握網頁布局技巧，能夠用DIV+CSS完成帶交互的企業網站的布局；掌握html特性、css特性；流行的移動框架學習，如bootstrap；react組件的學習、nodejs&bower&gulp。這些掌握后，你基本就是個合格的HTML人了。
以上便是小編對“html的學習有什么方法嗎？”的大致介紹，希望對您有所幫助！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
