行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、hr、link、input、img、meta
jpg是有損壓縮格式，png是無損壓縮格式。所以，相同的圖片，jpg體積會小。比如我們一些官網的banner圖，一般都很大，所以適合用jpg類型的圖片。但png分8位的和24位的，8位的體積會小很多，但在某些瀏覽器下8位的png圖片會有鋸齒。
<a target="_blank">鏈接</a>
target用法：_blank表示在新窗口打開被鏈接的文檔；_self表示在相同的框架中打開被鏈接文檔，這也是默認值；_parent表示在父框架打開被鏈接文檔；_top表示在整個窗口中打開被鏈接文檔。
strong:粗體強調標簽，強調，表示內容的重要性；
em:斜體強調標簽，更強烈強調，表示內容的強調點；
● src是引入外部資源下載到文檔，會暫停其他資源的下載
● href是鏈接外部資源，不會暫停其他資源的下載
<form action="http://localhost8080/xxx/register" method="post">
用戶名<input type="text" name="username" />
密碼<input type="password" name="userpwd" />
確認密碼<input type="password" />
性別<input type="radio" name="sex" value="male" checked="checked" />男
<input type="radio" name="sex" value="female" />女<br />
興趣愛好<input type="checkbox" name="hobby" value="singing" />唱歌
<input type="checkbox" name="hobby" value="dancing" />跳舞
<input type="checkbox" name="hobby" value="running" checked="checked" />跑步
<input type="checkbox" name="hobby" value="swimming" />游泳
<input type="checkbox" name="hobby" value="climbing" />攀爬<br />
學歷<select name="education">
<option value="gz">高中</option>
<option value="dz">大專</option>
<option value="bk" selected="selected">本科</option>
<option value="ss">碩士</option>
<option value="bs">博士</option>
</select><br />
簡介<textarea rows="5" cols="30" name="briefIntroduction"></textarea><br />
<input type="submit" value="注冊" />
<input type="reset" value="重置" /><br />
</form>
<tableborder="1"width="100%">
<!-- 補全代碼 -->
<caption>bjpowernode</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
<img alt="img" src="xxx" title="title" />
CSS2選擇器：元素選擇器，id選擇器，群組選擇器，類選擇器，*通配符選擇器，后代選擇器
CSS2偽類選擇器：a:link/visited/hover/active
CSS3選擇器：空格 > +相鄰兄弟選擇器 ~通用選擇器（查找后面所有）
一個css盒子從外到內可以分成四個部分：margin(外邊距),border(邊框),padding(內邊距),content（內容）
默認情況下，盒子的width和height屬性只是設置content（內容）的寬和高
盒子真正的寬應該是：內容寬度+左右填充+左右邊距+左右邊框
盒子真正的高應該是：內容高度+上下填充+上下邊距+上下邊框;
position 的常見四個屬性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及"bottom” 屬性使用。
1]static：默認位置，（static 元素會忽略任何top、bottom、left 或right 聲明）一般不常用。
2]relative：位置被設置為relative 的元素，偏移的top，right，bottom，left 的值都以它原來的位置為基準偏移。注意relative 移動后的元素在原來的位置仍占據空間。
3]absolute：位置設置為absolute 的元素，可定位于相對于包含它的元素的指定坐標。意思就是如果它的父容器設置了position 屬性，并且position 的屬性值為absolute 或者relative，那么就會依據父容器進行偏移。如果其父容器沒有設置position 屬性，那么偏移是以body為依據。注意設置absolute 屬性的元素在標準流中不占位置。
4]fixed：位置被設置為fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否，元素都會留在那個位置。它始終是以body 為依據的。注意設置fixed 屬性的元素在標準流中不占位置。
總結：position設置為absolute和fixed的元素都脫離了文檔標準流;
px實際上就是像素，用PX設置字體大小時，比較穩定和精確。
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
em的值并不是固定的；
em會繼承父級元素的字體大小。
rem是CSS3新增的一個相對單位（root em，根em），使用rem為元素設定字體大小時，相對的是HTML根元素。
基本類型：null、undefined、boolean、number、string、symbol
對象（Object）：引用類型（也稱為復雜類型）
注意: NaN 也屬于 number 類型，并且 NaN 不等于自身。
NaN（Not a Number，非數字）是計算機科學中數值數據類型的一類值，表示未定義或不可表示的值。
雖然 NaN 是“Not a Number”，但是它的類型還是數值類型
console.log(typeof NaN === "number"); ?//true
NaN 和任何東西都不相等——甚至是它自己本身!
console.log(NaN === NaN); ?//false
undefined是undefined類型。表示"缺少值"，就是此處應該有一個值，但是還沒有定義
(1)作為函數的參數，表示該函數的參數不是對象。
(2)作為對象原型鏈的終點。
null是object類型，代表“空值”，代表一個空對象指針
(1)變量被聲明了，但沒有賦值時，就等于undefined。
(2)調用函數時，應該提供的參數沒有提供，該參數等于undefined。
(3)對象沒有賦值的屬性，該屬性的值為undefined。
(4)函數沒有返回值時或者return后面什么也沒有，返回undefined。
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事 件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對 象層次的最頂層，即document對象（有些瀏覽器是window）。
打個比方說：你在地方法院要上訴一件案子，如果地方沒有處理此類案件的法院，地方相關部門會幫你繼續往上級法院上訴，比如從市級到省級，直至到中央法院，最終使你的案件得以處理。
同步會阻塞，異步不會阻塞
同步：程序運行從上而下，瀏覽器必須把這個任務執行完畢，才能繼續執行下一個任務
異步：程序運行從上而下，瀏覽器任務沒有執行完，但是可以繼續執行下一行代碼，當被調用者得到結果之后會通過回調函數主動通知調用者。
前者是切割成數組的形式，后者是將數組轉換成字符串；
"=="會自動轉換類型，因此直接判斷兩邊的值
"==="先判斷左右兩邊的數據類型，然后再判斷兩邊的值
原型鏈繼承，借用構造函數繼承，組合繼承，寄生式繼承，寄生組合繼承
如果說放在body的封閉之前，將會阻塞其他資源的加載；
如果放在body封閉之后，不會影響body內元素的加載；
document.write 只能重繪整個頁面；
innerHTML 可以重繪頁面的一部分；
閉包就是能夠讀取其他函數內部變量的函數。
閉包的缺點：濫用閉包函數會造成內存泄露，因為閉包中引用到的包裹函數中定義的變量都永遠不會被釋放，所以我們應該在必要的時候，及時釋放這個閉包函數。
document.getElementById(“ID”).value;
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的所有的checkbox
var len = domList.length; //緩存到局部變量
while (len--) { //使用while的效率會比for循環更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”;
dom.style.color = “#000”;
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
//Math.random()就是獲取0-1之間的隨機數（永遠獲取不到1）
for(var i=0; i<10; i++){
var result= getRandom(10,100);
iArray.push(result);
}
iArray.sort();
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
1)創建新節點
createDocumentFragment(); //創建一個DOM片段
createElement(); //創建一個具體的元素
createTextNode(); //創建一個文本節點
2)添加、移除、替換、插入
appendChild(); ?//添加
removeChild(); ?//移除
replaceChild(); //替換
insertBefore(); //插入
3)查找
getElementsByTagName(); //通過標簽名稱
getElementsByName(); //通過元素的Name屬性的值
getElementById(); //通過元素Id，唯一性
//思路：先將字符串轉換為數組 split()，利用數組的反序函數 reverse()顛倒數組，再利用 join() 轉換為字符串
var str = '12345678';
str = str.split('').reverse().join('');
//思路：先將數字轉為字符， str= str + '' ;
//利用反轉函數，每三位字符加一個 ','最后一位不加； re()是自定義的反轉函數，最后再反轉回去！
for(var i = 1; i <= re(str).length; i++){
tmp += re(str)[i - 1];
if(i % 3 == 0 && i != re(str).length){
tmp += ',';
}
}
//思路：5個不同的數，每生成一次就和前面的所有數字相比較，如果有相同的，則放棄當前生成的數字！
var num1 = [];
for(var i = 0; i < 5; i++){
num1[i] = Math.floor(Math.random()*10) + 1; //范圍是 [1, 10]
for(var j = 0; j < i; j++){
if(num1[i] == num1[j]){
i--;
}
}
}
//思路：每遍歷一次就和之前的所有做比較，不相等則放入新的數組中！
rray.prototype.unique = function(){
var len = this.length,
newArr = [],
flag = 1;
for(var i = 0; i < len; i++, flag = 1){
for(var j = 0; j < i; j++){
if(this[i] == this[j]){
flag = 0; //找到相同的數字后，不執行添加數據
}
}
flag ? newArr.push(this[i]) : '';
}
return newArr;
}
AJAX（Asynchronous Javascript And XML）其實就是異步的javaScript和XML。它是一組用于異步顯示數據的相關技術。換句話說，它在不重新加載網頁的情況下發送和檢索數據。
1.頁面局部刷新。在讀取數據的過程中，用戶所面對的不是白屏，而是原來頁面的轉臺，或者正在更新的信息提示狀態，只有當接收到全部數據后才能更新相應的內容，而這種更新也是瞬間的用戶幾乎感受不到。
2.可以充分利用客戶端閑置的處理能力，減輕服務器和網絡傳輸的負擔。
3.使得web中界面與應用相分離 也可以說是數據與呈現相分離。
1.AJAX干掉了Back和History功能，即對瀏覽器機制的破壞。
2.AJAX安全問題
3.對搜索引擎支持較弱
4.不好調試
5.違背了URL和資源定位的初衷
6.AJAX不是很好支持移動設備
AJAX模塊在處理網絡請求的時候包括以下四個步驟
①通過XMLHttpRequest類創建xhr對象
②為xhr對象添加屬性與回調方法
③令xhr對象執行open()方法，指明請求被發往某處
④令xhr對象執行send()方法，發出請求。
補充：Ajax可以發出同步請求，也可以發出異步請求。但大多數情況下指的是異步請求，因為同步的Ajax請求對瀏覽器會產生‘阻塞效應。
//創建 XMLHttpRequest 對象
var ajax = new XMLHttpRequest(); //規定請求的類型、URL 以及是否異步處理請求。
ajax.open('GET',url,true); //發送信息至服務器時內容編碼類型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //發送請求
ajax.send(null); //接受服務器響應數據
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
//業務處理
}
};
常用的post,get,delete。不常用copy、head、link等等。
區別：
(1)post比get安全 (因為post參數在請求體中。get參數在url上面)
(2)get傳輸速度比post快 根據傳參決定的。(post通過請求體傳參，后臺通過數據流接收。速度稍微慢一些。而get通過url傳參可以直接獲取)
(3)post傳輸文件大理論沒有限制 get傳輸文件小大概7-8k ie4k左右
(4)get獲取數據 post上傳數據(上傳的數據比較多 而且上傳數據都是重要數據。所以不論在安全性還是數據量級 post是最好的選擇)。
同步請求會阻止用戶，直到檢索到響應，而異步不會阻止用戶。
回調函數將函數作為參數傳遞給另一個函數。如果我們必須在網站上執行各種AJAX任務，那么我們可以創建一個用于執行XMLHttpRequest的函數和一個用于執行每個AJAX任務的回調函數。
有幾種用于調試AJAX應用程序的工具。
● 適用于Mozilla Firefox的Firebug
● 適用于IE的Fiddler（Internet Explorer）
● JavaScript HTML調試器
● MyEclipse AJAX工具
● 腳本調試器
在AJAX中有5個請求的就緒狀態。
● 0：意味著未被發現
● 1：表示已打開
● 2：表示HEADERS_RECEIVED
● 3：表示裝載
● 4：表示完成
其實美元符號$只是jQuery的別名，它是jQuery的選擇器
1.我們可以在頁面中使用多個document.ready()，但只能使用一次onload()。
2.document.ready()函數在頁面DOM元素加載完以后就會被調用，而onload()函數則要在所有的關聯資源（包括圖像、音頻）加載完畢后才會調用。
正常是有9中，但我們常用的就3種：
1.基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。
2.層次選擇器：也叫做路徑選擇器，可以根據路徑層次來選擇相應的DOM元素。
3.過濾選擇器：在前面的基礎上過濾相關條件，得到匹配的dom元素。
jQuery對象是一個包含了dom對象的數組 可以通過jQuery對象[下標]獲取dom對象
將dom對象放入$("")中轉為jQuery對象
如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用delegate（）了，代碼如下：
$("ul").delegate("li","click",function(){$(this).hide();}) 當元素在當前頁面不可用時，可以使用delegate()
<script language="javascript" type="text/javascript">
$("*").css("border", "2px dotted red");
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
alert($('#inputField').attr("value"));
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR
window.history.forward(-1);
});
</script>
官方微信
官方抖音
京公網安備 11030102010736號