html+css+js總結
- html
- css
- JavaScript
-
- API
- 函數
- 匿名函數
- 事件
- 循環
- 對象概述
- 建構函數
- 對象原型
- JSON
學習過程總結，便于自己查閱。
html
<!DOCTYPE html> -文檔類型
<html></html> -根元素（整個頁面）
<head></head> -設定之類，關鍵字和頁面描述，css樣式等
<meta charset="utf-8">
<title></title> -頁面标題
<body></body> -顯示的整個頁面内容
<h1></h1> -主标題
<h2></h2> -頂層标題 <h3>以此類推
<p></p> -段落
<ul></ul> -無序清單
<ol><ol> -有序清單
<a></a> -連結
<a href="" target="_blank" rel="external nofollow" >Mozilla 宣言</a> href(超文本引用)
<em></em>對文字斜體化
<input>輸入文本
<strong></strong> 粗體顯示
<span></span>元素是短語内容的通用行内容器，并沒有任何特殊語義。
<!-- 内容 --> 注釋
<div></div>定義HTML中的一個分割塊
塊級元素和内聯元素 空元素
class:定義元素的類名
例:<p class="important">注意：這是一個很重要的段落。 :)</p>
元素屬性
空格：在屬性和元素名稱之間
屬性名稱：後面跟一個等于号
屬性值：由一對引号引起來
例：<p class="editor-note">我的貓咪脾氣爆:)</p>
實體引用：在HTML中包含特殊字元
<link>
經常位于文檔的頭部，用來連結css和和js,例：<link rel="stylesheet" href="my-css-file.css" target="_blank" rel="external nofollow" >
<script></script>
它放在文檔的尾部（在 </body>标簽之前）是一個更好的選擇, 例：<script src="script.js" async></script> 注：1、async異步，告知浏覽器在遇到<script>元素時不要中斷後續HTML的加載/2、defer 腳本将按照在頁面中出現的順序加載和運作。
可設定網頁語言 如果腳本無需等待頁面解析，且無依賴獨立運作，那麼應使用 async。
如果腳本需要等待頁面解析，且依賴于其它腳本，調用這些腳本時應使用 defer，将關聯的腳本按所需順序置于 HTML 中
css
格式：
選擇器{
聲明：屬性屬性的值:
}
- width ：元素的寬度
- background-color ：元素内容和内邊距底下的顔色
- color ：元素内容（通常是文本）的顔色
- text-shadow ：為元素内的文本設定陰影
- display ：設定元素的顯示模式（暫略）
JavaScript
- 簡介：是一種腳本，一門程式設計語言，可以在網頁上實作複雜的功能，
- 功能：1、在變量中儲存有用的值。2、操作一段文本。3、運作代碼以相應網頁中發生的特定時間
API
應用程式接口，已經建立好的一套代碼元件
1、文檔對象模型API (DOM): 将 web 頁面與到腳本或程式設計語言連接配接起來。進而操縱HTML和css.
2、地理位置API:擷取地理資訊
3、畫布（Canvas） 和 WebGL API :可以建立生動的 2D 和 3D 圖像。
4、 HTMLMediaElement 和 WebRTC 等 影音類 API: 讓你可以利用多媒體做一些非常有趣的事，比如在網頁中直接播放音樂和影片，
動态代碼：按需生成新内容來更新web頁面
document.addEventListener("DOMContentLoaded", function() {
});
/**
事件監聽器：監聽浏覽器的DOMContentLoaded事件，即 HTML 文檔體加載、解釋完畢事件。事件觸發時将調用 " . . ." 處的代碼
例：document.querySelector("#demo");
擷取文檔中id="demo"的元素。
**/
函數
function checkGuess() {
alert('我是一個占位符');
}
匿名函數
沒有函數名，自己也不會做任何事情，通常将匿名函數與事件處理程式一起使用
例：var myButton = document.querySelector('button');
myButton.onclick = function() {
alert('hello');
}
事件
事件是你正在編寫的系統中發生的動作或事件，系統告訴你的是這些動作或事件，如果需要的話，你可以以某種方式對它們做出反 應。例如，如果使用者單 擊網頁上的按鈕
我們可以通過調用代碼來響應事件，偵聽事件發生的結構為事件監聽器，響應事件觸發而運作的代碼塊被稱為事件處理器
例：guessSubmit.addEventListener('click', checkGuess);
這裡為 guessSubmit 按鈕添加了一個事件監聽器。addEventListener() 方法包含兩個可輸入值（稱為“參 數 ”（argument）），監聽事件的類 型（本例中為“click”），和當事件發生時我們想要執行的代碼（ 本例中為 checkGuess() 函數）。注意，數的函數名不加括号。
例：const btn = document.querySelector('button');
btn.onclick = function() {}
按鈕點選是就觸發事件，進而執行相應的函數
addEventListener() 和removeEventListener()
在addEventListener() 函數中, 我們具體化了兩個參數——我們想要将處理器應用上去的事件名稱，和包含我們用來回應事件的函 數的代碼。btn.addEventListener('click', function()
循環
for循環
for (let i = 1; i < 21; i++) { console.log(i); }
對象：例一：const guessField = document.querySelector(’.guessField’);
建立一個guessField常量來存儲對HTML中文本輸入表單域的引用
例二：let dog = { name : ‘Spot’, breed : ‘Dalmatian’ };
dog.name
prompt:輸入文本
例let name = prompt(‘What is your name?’);
字元串：可以将字元串看成對象，進而對其進行操作
對象概述
var objectName = {
member1Name : member1Value,
member2Name : member2Value,
member3Name : member3Value
}
點表示法：
name : {
first : 'Bob',
last : 'Smith'
}
name.first
括号表示法：
name['first']
可以建立新成員：
name['second']=ming;
this使用：
本類的變量
建構函數
JavaScript 用一種稱為建構函數的特殊函數來定義對象和它們的特征。建構函數提供了建立您所需對象（執行個體）的有效方 法，将對象的資料和特征函數按需聯結至相應對象。
function Person(name) {
this.name = name;
this.greeting = function() {
alert('Hi! I\'m ' + this.name + '.');
};
}
var person1 = new Person('Bob');
var person2 = new Person('Sarah');
Object()構造函數：
var person1 = new Object();這樣就建立了一個空對象
使用create()方法構造對象：
可以基于現有的對象來建立新的對象
var person2 = Object.create(person1);
這樣person2就可以繼承person1的屬性和方法
對象原型
在javascript中，函數可以有屬性。 每個函數都有一個特殊的屬性叫作原型（prototype），通過原型鍊可以允許對象之 間的繼承
JSON
JSON 是一種按照JavaScript對象文法的資料格式,用于将結構化資料表示為JavaScript對象的标準格式，通常用于在網站上表示和 傳輸資料
JSON可以作為一個對象或者字元串存在，前者用于解讀 JSON 中的資料，後者用于通過網絡傳輸 JSON 資料。
一個 JSON 對象可以被儲存在它自己的檔案中，這基本上就是一個文本檔案，擴充名為 .json
擷取JSON過程參考：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON
parse(): 以文本字元串形式接受JSON對象作為參數，并傳回相應的對象。。
stringify(): 接收一個對象作為參數，傳回一個對應的JSON字元串。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)