整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
avaScript（簡(jiǎn)稱(chēng)JS）是一種廣泛用于Web開(kāi)發(fā)的腳本語(yǔ)言，用于為網(wǎng)頁(yè)添加交互性和動(dòng)態(tài)內(nèi)容。它是一種高級(jí)、解釋性、基于對(duì)象和事件驅(qū)動(dòng)的編程語(yǔ)言，由Netscape公司首先引入并在1995年推出。JavaScript通常嵌入在HTML文檔中，并通過(guò)Web瀏覽器在客戶(hù)端執(zhí)行。
JavaScript的語(yǔ)法基于C語(yǔ)言，但也借鑒了Java和其他編程語(yǔ)言的特點(diǎn)。它支持動(dòng)態(tài)類(lèi)型，允許在運(yùn)行時(shí)更改變量的類(lèi)型，不需要提前聲明變量的類(lèi)型。JavaScript也是一種弱類(lèi)型語(yǔ)言，它會(huì)自動(dòng)進(jìn)行類(lèi)型轉(zhuǎn)換，使得在一些情況下比較靈活，但也需要小心處理類(lèi)型相關(guān)的問(wèn)題。
JavaScript可以用于處理各種任務(wù)，包括但不限于網(wǎng)頁(yè)動(dòng)態(tài)交互、表單驗(yàn)證、動(dòng)畫(huà)效果、數(shù)據(jù)處理、服務(wù)器端開(kāi)發(fā)（如Node.js）、移動(dòng)應(yīng)用開(kāi)發(fā)（如React Native）等。JavaScript具有豐富的標(biāo)準(zhǔn)庫(kù)，提供了很多內(nèi)置對(duì)象和函數(shù)，同時(shí)也支持通過(guò)第三方庫(kù)（如jQuery、React、Vue等）擴(kuò)展其功能。
JavaScript具有事件驅(qū)動(dòng)的編程模型，可以對(duì)用戶(hù)的操作或其他事件做出響應(yīng)。通過(guò)事件處理器，可以捕捉和處理用戶(hù)的鼠標(biāo)點(diǎn)擊、鍵盤(pán)輸入、頁(yè)面加載完成等事件，從而實(shí)現(xiàn)豐富的交互體驗(yàn)。
導(dǎo)讀：
JavaScript腳本語(yǔ)言(JS)的特點(diǎn)：
JavaScript是一種網(wǎng)頁(yè)腳本語(yǔ)言，被廣泛用于Web應(yīng)用開(kāi)發(fā)。可以使用JS添加、刪除、修改網(wǎng)頁(yè)上的所有元素及屬性；在HTML網(wǎng)頁(yè)中動(dòng)態(tài)寫(xiě)入文本、數(shù)字和插入圖表；響應(yīng)網(wǎng)頁(yè)中的事件，并做出相應(yīng)處理。了解JS編程后，可以輕松調(diào)用各類(lèi)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)庫(kù)函數(shù)和在網(wǎng)頁(yè)上統(tǒng)計(jì)數(shù)據(jù)處理或分析。
一、JavaScript嵌入HTML文檔
1、JavaScript代碼嵌入HTML文檔
【#Code 101】：JavaScript代碼嵌入HTML文檔案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
網(wǎng)頁(yè)內(nèi)部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
</script>
</head>
<body>
文檔體HTML代碼
</body>
</html>注：JavaScript腳本代碼在<script language="JavaScript">...</script>標(biāo)簽之間
2、JavaScript代碼運(yùn)行方式
(1) 網(wǎng)頁(yè)打開(kāi)時(shí)自動(dòng)調(diào)用JS代碼
【#Code 102】：網(wǎng)頁(yè)打開(kāi)時(shí)自動(dòng)調(diào)用JS代碼案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
網(wǎng)頁(yè)內(nèi)部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
function init() {
alert("加載網(wǎng)頁(yè)時(shí)提示我!");
}
</script>
</head>
<body onload="init()">
文檔體HTML代碼
</body>
</html>注：可復(fù)制代碼到WINDOWS記事本，保存為HTML文檔。例如，“jsTest1.html”。鼠標(biāo)雙擊該文件觀察效果
代碼【#Code 102】中，瀏覽器解析完HTML文檔體代碼后，觸發(fā)body標(biāo)簽的onload網(wǎng)頁(yè)加載事件，從而運(yùn)行JS函數(shù)init()。
(2) 用頁(yè)面按鈕或超鏈接觸發(fā)JS代碼
【#Code No.103】：用頁(yè)面按鈕或超鏈接觸發(fā)JS代碼案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
網(wǎng)頁(yè)內(nèi)部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
function init() {
alert("加載網(wǎng)頁(yè)時(shí)提示我!");
}
</script>
</head>
<body>
<button onclick="init()">運(yùn)行JS函數(shù)init()</button>
<p><i>用鼠標(biāo)左鍵點(diǎn)擊命令按鈕JS函數(shù)。</i></p><br/>
<a href="#" onclick="init()">運(yùn)行JS函數(shù)init()</a>
<p><i>
由于href="#"沒(méi)有指定連接文件，用鼠標(biāo)左鍵點(diǎn)擊超鏈接時(shí)onclick事件運(yùn)行運(yùn)行JS函數(shù)init()。
</i></p><br/>
</body>
</html>注：JavaScript腳本代碼中的標(biāo)點(diǎn)符號(hào)都必須為半角英文字符。JavaScript腳本可以插入注釋語(yǔ)句，注釋語(yǔ)句增加代碼可讀性，不被瀏覽器解析執(zhí)行。符號(hào)"/.../"為單行注釋?zhuān)?hào)"/*...*/"為多行行注釋
例如：
<script language="JavaScript">
//這是單行注釋
/*
這是多行注釋?zhuān)?
銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程。
*/
}
</script>二、JavaScript語(yǔ)法
1、第一個(gè)實(shí)例
打開(kāi)網(wǎng)頁(yè)時(shí)，瀏覽器中顯示"Hello World!
【#Code 104】：第一個(gè)網(wǎng)頁(yè)“Hello World!”案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style></style>
<script language="JavaScript">
function init() {
document.write("Hello World!");
}
</script>
</head>
<body onload="init()">
</body>
</html>2、JavaScript的三種對(duì)話(huà)框
（1）提醒對(duì)話(huà)框，不能對(duì)腳本產(chǎn)生任何改變，腳本樣例：
alert("提醒對(duì)話(huà)框");在網(wǎng)頁(yè)中的運(yùn)用參見(jiàn)#Code 102。
（2）確認(rèn)對(duì)話(huà)框，返回true或者false，可以用于if...else...判斷用戶(hù)的選擇，腳本樣例：
confirm("你確信要學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)嗎？")confirm函數(shù)返回true或者false，網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用實(shí)例，
【#Code 105】：JavaScript確認(rèn)對(duì)話(huà)框案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程 </title>
<style> </style>
<script language="JavaScript">
function init() {
document.write("Hello World!");
firm()；
}
function firm() {
//利用對(duì)話(huà)框返回的值（true或者false）
if(confirm("你確信要學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)嗎？")) {
alert("我確信要學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)！");
} else {
alert("我學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)有困難！");
}
}
</script>
</head>
<body onload="init()">
</body>
</html>（3）輸入對(duì)話(huà)框，可以返回用戶(hù)填入的字符串或數(shù)值，腳本樣例：
var name=prompt("請(qǐng)輸入您的名字",""); //將輸入的內(nèi)容賦給變量name注：腳本中符號(hào)“//”為注釋符，可在“//”符號(hào)后面加入腳本解釋
prompt函數(shù)返回用戶(hù)填入的字符串或數(shù)值，網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用實(shí)例，
【#Code 106】：JavaScript輸入對(duì)話(huà)框案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
<script language="JavaScript">
function init() {
document.write("Hello World!");
prom()；
}
function prom() {
var name=prompt("請(qǐng)輸入您的名字","張三"); //將輸入的內(nèi)容賦給變量name
if(name) { //如果返回的有內(nèi)容
alert("歡迎您："+ name)
}
}
</script>
</head>
<body onload="init()">
</body>
</html>注:prompt有兩個(gè)參數(shù)，前面是提示的信息，后面是當(dāng)對(duì)話(huà)框出來(lái)后，在對(duì)話(huà)框里的默認(rèn)值
3、定義JavaScript變量
JavaScript是弱類(lèi)型語(yǔ)言，聲明變量時(shí)用var關(guān)鍵字（注意var要全部小寫(xiě)）就可以了。而很多編程語(yǔ)言聲明變量時(shí)，需要指明變量的類(lèi)型，如：int, double, string, boolean, date, array, object等；而且變量類(lèi)型一旦指定，就不能改變了。但在JavaScript中不同，只需用var，且數(shù)據(jù)類(lèi)型可以改變。但要請(qǐng)注意變量的命名規(guī)：
通常使用var（或let）關(guān)鍵字定義變量，如:
var total=346; //定義整數(shù)變量（int）
var value=45.7865 //定義浮點(diǎn)型變量（double）
var notNull=true; //定義邏輯型變量（boolean）
var name="張三", gender="男"; //用逗號(hào)分隔，同行定義兩個(gè)字符型變量（string）
var i=j=0; //同時(shí)定義兩個(gè)變量（int）
var hobby=["聽(tīng)音樂(lè)","看電影"]; //定義數(shù)組變量（array）
var d=new Date(); //定義日期時(shí)間變量（date）注：代碼中關(guān)鍵字var可以替換為let，但let關(guān)鍵字在同一作用域不能重復(fù)定義
【#Code 107】：JavaScript變量使用案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style></style>
<script language="JavaScript">
var myName="銀河統(tǒng)計(jì)學(xué)"; //myName是全局變量
function init() {
var total=346;
var value=45.7865;
var notNull=true;
var name="張三", gender="男";
var i=j=0;
var hobby=["聽(tīng)音樂(lè)","看電影"];
hobby[2]="打籃球"; //數(shù)組賦值
stdId=2016; //全局變量
var d=new Date(); //定義日期時(shí)間變量（date）
document.write("變量i="+i+"<br/>");
document.write("變量j="+j+"<br/>");
document.write("變量name="+name+"<br/>");
document.write("變量gender="+gender+"<br/>");
document.write("變量notNull="+notNull+"<br/>");
document.write("變量hobby="+hobby+"<br/>");
document.write("變量hobby[0]="+hobby[0]+"<br/>");
document.write("變量hobby[1]="+hobby[1]+"<br/>");
document.write("變量hobby[2]="+hobby[2]+"<br/>");
document.write("變量hobby[3]="+hobby[3]+"<br/>");
document.write("變量d="+d+"<br/>");
document.write("變量d.getFullYear()="+d.getFullYear()+"<br/>"); //參見(jiàn)JS日期對(duì)象
var ostr="<p/><i>下面調(diào)用函數(shù)test()，輸出該函數(shù)體內(nèi)的全局和局部變量。";
ostr+="<br/>全局可以輸出，局部變量局部變量total無(wú)法輸出。</i><p/>";
document.write( ostr);
test();
}
function test() {
document.write("全局變量myName="+myName+"<br/>");
document.write("全局變量stdId="+stdId+"<br/>");
document.write("局部變量total="+total+"<br/>");
}
</script>
</head>
<body onload="init()">
</body>
</html>注：代碼中"+="為連加運(yùn)算符，將一行過(guò)長(zhǎng)代碼分段代碼連接起來(lái)；"變量name="+name+"<br/>"中符號(hào)"+"連接字符串和變量
4、JavaScript運(yùn)算符和操作符
JavaScript操作符比較復(fù)雜，下面介紹JS運(yùn)算符和常用操作符。
（1）算數(shù)操作符
除了加號(hào)（+）之外，如果操作數(shù)不是Number類(lèi)型，會(huì)自動(dòng)先調(diào)用Number()將其轉(zhuǎn)換為Number類(lèi)型再進(jìn)行計(jì)算；除號(hào)（/）和取模（%）并不會(huì)區(qū)分整數(shù)和浮點(diǎn)數(shù)，都會(huì)自動(dòng)轉(zhuǎn)化為浮點(diǎn)數(shù)。
（2）字符串操作符
字符串連接符號(hào)（+）相當(dāng)于concat()函數(shù)，會(huì)將操作數(shù)據(jù)轉(zhuǎn)化為字符串再連接。在字符串和數(shù)值型進(jìn)行+號(hào)運(yùn)算時(shí)，會(huì)將數(shù)值型轉(zhuǎn)為字符串。
（3）布爾操作符
布爾邏輯操作符！（非、not）、&&（與、and）、||（或、or）常和if等條件函數(shù)一起判斷一個(gè)變量或?qū)傩允欠裼卸x。
【#Code 108】：JavaScript運(yùn)算符和操作符案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style></style>
<script language="JavaScript">
document.write("<p><b>//算術(shù)操作符</b></p>");
var x=11;
var y=5;
with (document) { //注意with關(guān)鍵字用法，其用于簡(jiǎn)化代碼
write("x=11, y=5");
write("<br>x + y 是 ", x + y);
write("<br>x - y 是 ", x - y);
write("<br>x * y 是 ", x * y);
write("<br>x / y 是 ", x / y);
write("<br>x % y 是 ", x % y);
write("<br>++ x 是 ", ++ x);
write("<br>-- y 是 ", -- y);
write("<br>x 是 ", x);
write("<br>y 是 ", y);
write("<br>x-- 是 ", x--);
write("<br>y-- 是 ", y--);
}
document.write("<p><b>//++運(yùn)算練習(xí)</b></p>");
var x=y=3;
with (document) {
write("y++=",(y++),"<br>");
write("++y=",(++y),"<br>");
write("x=3, y=5 <br>");
write("若x=y++ 運(yùn)算之后：");
x=y++;//y→x，y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x=++y 運(yùn)算：");
x=++y;//y+1→x，y+1→y
write("x 是 ", x, "; y 是 ", y);
}
document.write("<p><b>//++運(yùn)算練習(xí)</b></p>");
var t=true;
var f=false;
with(document) {
write("true && true 的結(jié)果是 ", t && t);
write("<br>true && false 的結(jié)果是 ", t && f);
write("<br>false && true 的結(jié)果是 ", f && t);
write("<br>false && false 的結(jié)果是 ", f && f);
write("<br>true && (1==1) 的結(jié)果是 ", t && (1==1));
write("<br>false && 'A' 的結(jié)果是 ", f && 'A');
write("<br>'A' && false 的結(jié)果是 ", 'A' && f);
write("<br>true && 'A' 的結(jié)果是 ", t && 'A');
write("<br>'A' && true 的結(jié)果是 ", 'A' && t);
write("<br>'A' && 'B' 的結(jié)果是 ", 'A' && 'B');
write("<br>1 && 1 的結(jié)果是 ", 1 && 1);
write("<br>1 && 0 的結(jié)果是 ", 1 && 0);
write("<br>true && 0 的結(jié)果是 ", true && 0);
write("<br>true && 1 的結(jié)果是 ", true && 1);
write("<br>true && '0' 的結(jié)果是 ", true && '0');
}
document.write('<p><b>//邏輯運(yùn)算符"||"</b></p>');
var t=true;
var f=false;
with(document) {
write("true || true 的結(jié)果是 ", t || t);
write("<br>true || false 的結(jié)果是 ", t || f);
write("<br>false || true 的結(jié)果是 ", f || t);
write("<br>false || false 的結(jié)果是 ", f || f);
write("<br>true || (1==1) 的結(jié)果是 ", t || (1==1));
write("<br>false || 'A' 的結(jié)果是 ", f || 'A');
write("<br>'A' || false 的結(jié)果是 ", 'A' || f);
write("<br>true || 'A' 的結(jié)果是 ", t || 'A');
write("<br>'A' || true 的結(jié)果是 ", 'A' || t);
write("<br>'A' || 'B' 的結(jié)果是 ", 'A' || 'B');
write("<br>1 || 1 的結(jié)果是 ", 1 || 1);
write("<br>1 || 0 的結(jié)果是 ", 1 || 0);
write("<br>true || 0 的結(jié)果是 ", true || 0);
write("<br>true || 1 的結(jié)果是 ", true || 1);
write("<br>true || '0' 的結(jié)果是 ", true || '0');
}
document.write('<p><b>////輯運(yùn)算符"!"</b></p>');
with(document) {
write("!true 的結(jié)果是 ", !true);
write("<br>!false 的結(jié)果是 ", !false);
write("<br>!'A' 的結(jié)果是 ", !'A');
write("<br>!0 的結(jié)果是 ", !0);
write("<br>!1 的結(jié)果是 ", !1);
write("<br>!2 的結(jié)果是 ", !2);
write("<br>!'0' 的結(jié)果是 ", !'0');
write("<br>!'1' 的結(jié)果是 ", !'1');
write("<br>!-1 的結(jié)果是 ", !-1);
}
</script>
</head>
<body>
</body>
</html>三、JavaScript的轉(zhuǎn)義字符
可以在 JavaScript 中使用反斜杠來(lái)向文本字符串添加特殊字符。對(duì)于某些特殊的字符，無(wú)法用鍵盤(pán)直接鍵入，這時(shí)就需要使用轉(zhuǎn)義字符。還有一些字符（符號(hào)）用于特殊的用途，比如引號(hào)，如果要在字符串內(nèi)包含引號(hào)，就需要使用轉(zhuǎn)義字符。切記，每一個(gè)轉(zhuǎn)義字符都是以反斜杠“\”開(kāi)始的。
1、無(wú)法用鍵盤(pán)錄入的轉(zhuǎn)義字符
轉(zhuǎn)義字符 | 字符 | 轉(zhuǎn)義字符 | 字符 |
\b | 退格符 | \f | 換頁(yè)符 |
\n | 換行符 | \r | 回車(chē)符 |
\t | 制表符 | \" | 雙引號(hào) |
\' | 單引號(hào) | \ | 反斜杠 |
2、特殊用途符號(hào)轉(zhuǎn)義字符
字符 | 轉(zhuǎn)義字符 |
點(diǎn)的轉(zhuǎn)義：. | \u002E |
美元符號(hào)的轉(zhuǎn)義：$ | \u0024 |
乘方符號(hào)的轉(zhuǎn)義：^ | \u005E |
左大括號(hào)的轉(zhuǎn)義：{ | \u007B |
左方括號(hào)的轉(zhuǎn)義：[ | \u005B |
左圓括號(hào)的轉(zhuǎn)義：( | \u0028 |
豎線(xiàn)的轉(zhuǎn)義：| | \u007C |
右方括號(hào)轉(zhuǎn)義：] | \u005D |
右圓括號(hào)的轉(zhuǎn)義：) | \u0029 |
星號(hào)的轉(zhuǎn)義：* | \u002A |
加號(hào)的轉(zhuǎn)義：+ | \u002B |
問(wèn)號(hào)的轉(zhuǎn)義：? | \u003F |
反斜杠的轉(zhuǎn)義：\ | \u005C |
JavaScript代碼如下：
<script type="text/javascript">
var oStr="我的名字叫\(zhòng)“張三\”，這段文字已經(jīng)被雙引號(hào)，按JS語(yǔ)法規(guī)則，";
oStr+="雙引號(hào)中不能包括雙引號(hào)。為了顯示是姓名被雙引號(hào)，在姓名雙引號(hào)前加反斜杠。";
document.write(oStr);
</script>將script標(biāo)簽內(nèi)的JavaScript腳步代碼復(fù)制、粘貼到銀河統(tǒng)計(jì)JavaScript腳本測(cè)試工具，運(yùn)行結(jié)果如下：
我的名字叫“張三”，這段文字已經(jīng)被雙引號(hào)，按JS語(yǔ)法規(guī)則，雙引號(hào)中不能包括雙引號(hào)。為了顯示是姓名被雙引號(hào)，在姓名雙引號(hào)前加反斜杠。
注：這段文字為引號(hào)嵌套，但姓名的引號(hào)前使用了轉(zhuǎn)移符號(hào)“\”，使得document.write(oStr)可以正確顯示
HTML+CSS+JS是前端網(wǎng)頁(yè)開(kāi)發(fā)的基礎(chǔ)，JS(JavaScript)在HTML網(wǎng)頁(yè)中動(dòng)態(tài)寫(xiě)入文本、數(shù)字和插入圖表。掌握J(rèn)avaScript編程可以輕松調(diào)用各類(lèi)統(tǒng)計(jì)學(xué)庫(kù)函數(shù)和在網(wǎng)頁(yè)上進(jìn)行統(tǒng)計(jì)數(shù)據(jù)處理或分析。
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）；
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。**
首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類(lèi)型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）
（2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見(jiàn)的空元素：
<img><input><link><meta>
鮮為人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶(hù)端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱(chēng)MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲(chóng)也依賴(lài)于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
在用戶(hù)沒(méi)有連網(wǎng)時(shí)，可以正常訪(fǎng)問(wèn)站點(diǎn)或應(yīng)用，在用戶(hù)與網(wǎng)絡(luò)連接時(shí)更新用戶(hù)機(jī)器上的緩存文件。
原理：HTML5的離線(xiàn)存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線(xiàn)存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線(xiàn)狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線(xiàn)存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。
如何使用：
頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性；
在cache.manifest文件的編寫(xiě)離線(xiàn)存儲(chǔ)的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在離線(xiàn)狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
在線(xiàn)的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪(fǎng)問(wèn)app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線(xiàn)存儲(chǔ)。如果已經(jīng)訪(fǎng)問(wèn)過(guò)app并且資源已經(jīng)離線(xiàn)存儲(chǔ)了，那么瀏覽器就會(huì)使用離線(xiàn)的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線(xiàn)存儲(chǔ)。
離線(xiàn)的情況下，瀏覽器就直接使用離線(xiàn)存儲(chǔ)的資源。
iframe會(huì)阻塞主頁(yè)面的Onload事件；
搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO;
iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript
動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題。
label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶(hù)選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>WebSocket、也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式，還可以使用頁(yè)面的路有參數(shù)傳遞
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，
我們通過(guò)監(jiān)聽(tīng)事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信；
14.如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
map+area或者svg
border-radius
純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等
title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響；
strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：會(huì)重讀，而是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；
h5新增的屬性
可以通過(guò)ele.dataset獲取到標(biāo)簽上的data-x的屬性
返回一個(gè)對(duì)象
解決：解決方案是做成PNG8.
解決：方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。
解決：解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。 接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
解決：解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.
解決方法：（條件注釋?zhuān)┤秉c(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
解決：可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
該標(biāo)簽可聲明三種 DTD 類(lèi)型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類(lèi)型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類(lèi)型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。
1）所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
2）所有標(biāo)簽的元素和屬性的名字都必須使用小寫(xiě)
3）所有的XML標(biāo)記都必須合理嵌套
4）所有的屬性必須用引號(hào)""括起來(lái)
5）把所有<和&特殊符號(hào)用編碼表示
6）給所有屬性賦一個(gè)值
7）不要在注釋內(nèi)容中使“--”
8）圖片必須有說(shuō)明文字
title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示。
alt是<img>的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無(wú)法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪(fǎng)問(wèn)性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。
改版的時(shí)候更方便 只要改css文件。
頁(yè)面加載速度更快、結(jié)構(gòu)化清晰、頁(yè)面顯示簡(jiǎn)潔。
表現(xiàn)與結(jié)構(gòu)相分離。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。
派生選擇器（用HTML標(biāo)簽申明）
id選擇器（用DOM的ID申明）
類(lèi)選擇器（用一個(gè)樣式類(lèi)名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴(kuò)展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號(hào)間隔，比如p,div,#a{ }）
那么問(wèn)題來(lái)了，CSS選擇器的優(yōu)先級(jí)是怎么樣定義的？
一般而言，選擇器越特殊，它的優(yōu)先級(jí)越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級(jí)就越高。
復(fù)雜的計(jì)算方法：
用1表示派生選擇器的優(yōu)先級(jí)
用10表示類(lèi)選擇器的優(yōu)先級(jí)
用100標(biāo)示ID選擇器的優(yōu)先級(jí)
div.test1 .span var 優(yōu)先級(jí) 1+10 +10 +1
span#xxx .songs li 優(yōu)先級(jí)1+100 + 10 + 1
xxx li 優(yōu)先級(jí) 100 +1
那么問(wèn)題來(lái)了，看下列代碼，<p>標(biāo)簽內(nèi)的文字是什么顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先后順序有關(guān)，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關(guān)系無(wú)關(guān)。
塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問(wèn)題來(lái)了，瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
外邊距重疊就是margin-collapse。
在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱(chēng)為折疊，并且因而所結(jié)合成的外邊距稱(chēng)為折疊外邊距。
折疊結(jié)果遵循下列計(jì)算規(guī)則：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。
rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果！）
* 1.id選擇器（ # myid）
2.類(lèi)選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel="external"]）
9.偽類(lèi)選擇器（a: hover, li: nth - child）
* 可繼承： font-size font-family color, UL LI DL DD DT;
* 不可繼承 ：border padding margin width height ;
* 優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn);
* 載入樣式以最后載入的定位為準(zhǔn);優(yōu)先級(jí)為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高CSS3新增偽類(lèi)舉例：
p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;}
居中一個(gè)浮動(dòng)元素
確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
* IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；
* png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。
* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。
接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
* IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.
* IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;
Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性.
* （條件注釋?zhuān)┤秉c(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
* Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪(fǎng)問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪(fǎng)問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
!important > id > class > 標(biāo)簽
!important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴(kuò)展的標(biāo)記語(yǔ)言，所謂可擴(kuò)展就是它可以描述任何結(jié)構(gòu)化的數(shù)據(jù)，它是一棵樹(shù)！
document.write只能重繪整個(gè)頁(yè)面
innerHTML可以重繪頁(yè)面的一部分
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)
getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() //通過(guò)元素Id，唯一性
attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性；
property就是dom元素在js中作為對(duì)象擁有的屬性。
所以：
對(duì)于html的標(biāo)準(zhǔn)屬性來(lái)說(shuō)，attribute和property是同步的，是會(huì)自動(dòng)更新的，
但是對(duì)于自定義的屬性來(lái)說(shuō)，他們是不同步的，
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫(xiě)，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加<script src="js.js"></script>瀏覽器會(huì)暫停其他資源的下載和處理,直到該資源加載,編譯,執(zhí)行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當(dāng)前元素,href用于在當(dāng)前文檔和引入資源之間建立聯(lián)系。
cookie 本身不是用來(lái)做服務(wù)器端存儲(chǔ)的（計(jì)算機(jī)領(lǐng)域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設(shè)計(jì)用來(lái)在服務(wù)器和客戶(hù)端進(jìn)行信息傳遞的，因此我們的每個(gè) HTTP 請(qǐng)求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲(chǔ)的能力（例如記住用戶(hù)名和密碼），因此就被開(kāi)發(fā)者用上了。
使用起來(lái)也非常簡(jiǎn)單，document.cookie=....即可。
但是 cookie 有它致命的缺點(diǎn)：
存儲(chǔ)量太小，只有 4KB
所有 HTTP 請(qǐng)求都帶著，會(huì)影響獲取資源的效率
API 簡(jiǎn)單，需要封裝才能用
后來(lái)，HTML5 標(biāo)準(zhǔn)就帶來(lái)了sessionStorage和localStorage，先拿localStorage來(lái)說(shuō)，它是專(zhuān)門(mén)為了瀏覽器端緩存而設(shè)計(jì)的。
存儲(chǔ)量增大到 5MB
不會(huì)帶到 HTTP 請(qǐng)求中
API 適用于數(shù)據(jù)存儲(chǔ) localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區(qū)別就在于它是根據(jù) session 過(guò)去時(shí)間而實(shí)現(xiàn)，而localStorage會(huì)永久有效，應(yīng)用場(chǎng)景不同。例如，一些需要及時(shí)失效的重要信息放在sessionStorage中，一些不重要但是不經(jīng)常設(shè)置的信息，放在localStorage中。
標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶(hù)所訪(fǎng)問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪(fǎng)問(wèn)、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性；
的想法：如果我要構(gòu)建快速可靠的網(wǎng)站，需要真正了解瀏覽器渲染網(wǎng)頁(yè)的每個(gè)步驟機(jī)制，這樣就可以在開(kāi)發(fā)過(guò)程中對(duì)每個(gè)步驟進(jìn)行優(yōu)化。這篇文章是我在較高水平上對(duì)端到端過(guò)程的學(xué)習(xí)總結(jié)。
好了，廢話(huà)不多說(shuō)，我們開(kāi)始吧。這個(gè)過(guò)程可以分為以下幾個(gè)主要階段：
當(dāng)瀏覽器通過(guò)網(wǎng)絡(luò)接收頁(yè)面的HTML數(shù)據(jù)時(shí)，它會(huì)立即設(shè)置解析器將HTML轉(zhuǎn)換為文檔對(duì)象模型(DOM)。
文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪(fǎng)問(wèn)，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象（包含屬性和方法的對(duì)象）組成的結(jié)構(gòu)集合。簡(jiǎn)言之，它會(huì)將web頁(yè)面和腳本或程序語(yǔ)言連接起來(lái)。
解析過(guò)程的第一步是將HTML分解并表示為開(kāi)始標(biāo)記、結(jié)束標(biāo)記及其內(nèi)容標(biāo)記，然后它可以構(gòu)造DOM。
當(dāng)解析器遇到外部資源（如CSS或JavaScript文件）時(shí)，解析器將提取這些文件。解析器在加載CSS文件時(shí)繼續(xù)運(yùn)行，此時(shí)會(huì)阻止頁(yè)面渲染，直到資源加載解析完（稍后會(huì)詳細(xì)介紹）。
JavaScript 文件略有不同-默認(rèn)情況下，解析器會(huì)在加載 JS 文件然后進(jìn)行解析同時(shí)會(huì)阻止對(duì)HTML的解析。可以將兩個(gè)屬性添加到腳本標(biāo)簽中以減輕這種情況：defer 和async。兩者都允許解析器在后臺(tái)加載JavaScript 文件的同時(shí)繼續(xù)運(yùn)行，但是它們的執(zhí)行方式不同。關(guān)于這一點(diǎn)后面還會(huì)再講一點(diǎn)，但總的來(lái)說(shuō)：
defer表示文件的執(zhí)行將被延遲，直到文檔的解析完成為止。如果多個(gè)文件具有defer屬性，則將按照頁(yè)面放置的順序依次執(zhí)行。
<script type="text/javascript" src="script.js" defer>
async 意味著文件將在加載后立即執(zhí)行，這可能是在解析過(guò)程中或在解析過(guò)程之后執(zhí)行的，因此不能保證異步腳本的執(zhí)行順序。
<script type="text/javascript" src="script.js" async>
<link> 元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁(yè)面中 <head>元素內(nèi)部書(shū)寫(xiě)一些聲明式的資源獲取請(qǐng)求，可以指明哪些資源是在頁(yè)面加載完成后即刻需要的。
對(duì)于這種即刻需要的資源，你可能希望在頁(yè)面加載的生命周期的早期階段就開(kāi)始獲取，在瀏覽器的主渲染機(jī)制介入前就進(jìn)行預(yù)加載。這一機(jī)制使得資源可以更早的得到加載并可用，且更不易阻塞頁(yè)面的初步渲染，進(jìn)而提升性能。
<link href="style.css" rel="preload" as="style" />
你可能很早就知道DOM，但對(duì)**CSSOM（CSS對(duì)象模型）**可能聽(tīng)得少，反正我也沒(méi)聽(tīng)過(guò)幾次。
CSS 對(duì)象模型 (CSSOM) 是樹(shù)形形式的所有CSS選擇器和每個(gè)選擇器的相關(guān)屬性的映射，具有樹(shù)的根節(jié)點(diǎn)，同級(jí)，后代，子級(jí)和其他關(guān)系。CSSOM 與 文檔對(duì)象模型(DOM) 非常相似。兩者都是關(guān)鍵渲染路徑的一部分，也是正確渲染一個(gè)網(wǎng)站必須采取的一系列步驟。
CSSOM 與 DOM一起構(gòu)建渲染樹(shù)，瀏覽器依次使用渲染樹(shù)來(lái)布局和繪制網(wǎng)頁(yè)。
與HTML文件和DOM相似，加載CSS文件時(shí)，必須將它們解析并轉(zhuǎn)換為樹(shù)-這次是CSSOM。它描述了頁(yè)面上的所有CSS選擇器，它們的層次結(jié)構(gòu)和屬性。
CSSOM 與 DOM的不同之處在于它不能以增量方式構(gòu)建，因?yàn)镃SS規(guī)則由于特定性而可以在各個(gè)不同的點(diǎn)相互覆蓋。這就是CSS 阻塞渲染的原因，因?yàn)樵诮馕鏊蠧SS并構(gòu)建CSSOM之前，瀏覽器無(wú)法知道每個(gè)元素在屏幕上的位置。
不同的瀏覽器有不同的 JS 引擎來(lái)執(zhí)行此任務(wù)。從計(jì)算機(jī)資源的角度來(lái)看，解析 JS 可能是一個(gè)昂貴的過(guò)程，比其他類(lèi)型的資源更昂貴，因此優(yōu)化它對(duì)于獲得良好的性能是如此重要。
加載的JS和DOM被完全解析并準(zhǔn)備就緒后就會(huì) emit document.DOMContentLoaded事件。對(duì)于需要訪(fǎng)問(wèn)DOM的任何腳本，例如以某種方式進(jìn)行操作或偵聽(tīng)用戶(hù)交互事件，優(yōu)良作法是在執(zhí)行腳本之前先等待此事件。
document.addEventListener('DOMContentLoaded', (event) => {
// 這里面可以安全地訪(fǎng)問(wèn)DOM了
});
在所有其他內(nèi)容（例如異步JavaScript，圖像等）完成加載后，將觸發(fā)window.load事件。
window.addEventListener('load', (event) => {
// 頁(yè)面現(xiàn)已完全加載
});
渲染樹(shù)是DOM和CSSOM的組合，表示將要渲染到頁(yè)面上的所有內(nèi)容。這并不一定意味著渲染樹(shù)中的所有節(jié)點(diǎn)都將在視覺(jué)上呈現(xiàn)，例如，將包含opacity: 0或visibility: hidden的樣式的節(jié)點(diǎn)，并仍然可以被屏幕閱讀器等讀取，而display: none不包括任何內(nèi)容。此外，諸如<head>之類(lèi)的不包含任何視覺(jué)信息的標(biāo)簽將始終被忽略。
與 JS 引擎一樣，不同的瀏覽器具有不同的渲染引擎。
現(xiàn)在我們有了完整的渲染樹(shù)，瀏覽器知道了要渲染什么，但是不知道在哪里渲染。因此，必須計(jì)算頁(yè)面的布局（即每個(gè)節(jié)點(diǎn)的位置和大小）。渲染引擎從頂部開(kāi)始一直向下遍歷渲染樹(shù)，計(jì)算應(yīng)顯示每個(gè)節(jié)點(diǎn)的坐標(biāo)。
完成之后，最后一步是獲取布局信息并將像素繪制到屏幕上。
作者：James Starkie 譯者：前端小智 來(lái)源：dev
原文：https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ah
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
