整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML從入門到精通!
<br> <!--換行-->
歡迎學(xué)習(xí)HTML技術(shù)
<hr>
<p>
超級(jí)文本標(biāo)記語言是 標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種 標(biāo)準(zhǔn)，
HTML
HTML(16)
它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁 文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴 瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。 瀏覽器按順序閱讀網(wǎng)頁 文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的 瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全 相 同的解釋，因而可能會(huì)有不同的顯示效果。
</p>
<p>
簡易性：超級(jí)文本標(biāo)記語言 版本升級(jí)采用 超集方式，從而更加靈活方便。
</p>
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h4>四級(jí)標(biāo)題</h4>
<h6>六級(jí)標(biāo)題</h6>
<hr>
<pre>
<<HTML從入門到精通>>
歡迎學(xué)習(xí)HTML技術(shù)
</pre>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例4.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:400px;height:100px;background:red">導(dǎo)航部分</div>
<div style="width:400px;height:500px;background:yellow">正文部分</div>
<div style="width:400px;height:100px;background:blue">版權(quán)部分</div>
<hr>
iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98
</span>
</body>
</html>123456789101112131415效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-qqLIPRpW-1593240920357)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例5.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年網(wǎng)絡(luò)游戲排行榜</h3>
<ol type="a" start="3">
<li>吃雞</li>
<li>王者農(nóng)藥</li>
<li>LOL</li>
<li>WOL</li>
</ol>
<hr>
<h3>親愛的同學(xué)們</h3>
<ul type="disc">
<li>馮樂</li>
<li>趙寧</li>
<li>木木</li>
<li>丹丹</li>
</ul>
<hr>
<h3>術(shù)語的解釋</h3>
<dl>
<dt>LOL</dt>
<dd>它是由騰訊公司代理的一款網(wǎng)絡(luò)游戲，中文稱為叫英雄聯(lián)盟</dd>
<dd>它分為pc端和移動(dòng)端</dd>
<dt>HTML</dt>
<dd>是一種用來制作網(wǎng)頁的標(biāo)記語言</dd>
<dt>JAVA</dt>
<dd>是一種跨平臺(tái)的編程語言</dd>
</dl>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-CZHuTwuN-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例6.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="#FF7300" size="10px">
<hr color="red">
<hr color="blue" width="400">
<hr color="#00FF00" width="50%">
<div style="width:600px;height:300px;background:#FF7300">
<hr color="red" width="50%" size="9px" align="right">
</div>
</body>
</html>12345678910111213141516效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-7sI2hPAB-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例7.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="google.png" alt="圖片加載失敗...."title="只是一個(gè)標(biāo)志">
<hr>
<div style="width:800px;height:800px;background:red">
<img src="mac(1).jpg" alt=""width="50%">
<div style="width:500px;height:500px;background:#CCCCCC">
<img src="mac(1).jpg" alt=""width="50%">
</div>
</div>
<img src="mac(1).jpg" alt=""width="50%"> 父容器body
</body>
</html>123456789101112131415161718192021效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-yU93yyiJ-1593240920360)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例8.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i>HTML! <br>
welcome <em>to</em>HTML! <br>
welcome to <address>上海市南京東路</address>
<hr>
HTML從<b>入門</b>到精通！
HTML從<strong>入門</strong>到精通！
<br>
原價(jià)：<del>188元</del>, 優(yōu)惠價(jià)：<span style="font-size:40px;color:#FF7300">
98元</span>
<hr>
主講:<ins>hector</ins>
<br>
<hr>
水的分子表達(dá)式:H<sub>2</sub>0 <br>
2<sup>3</sup>=8
<hr>
</body>
</html>1234567891011121314151617181920212223242526效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-XdmsP4or-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例9.png)]
<!DOCTYPE html>
<html lang="en">
<!-- 設(shè)置字符編號(hào) -->
<meta charset="UTF-8">
<!-- 設(shè)置關(guān)鍵字 -->
<meta name="keywords"content="IT教育，JAVA開發(fā)，WEB前端，
Aandroid開發(fā)，python">
<!-- 設(shè)置描述信息 -->
<meta name="descaription" content="做專業(yè)的IT教育.....">
<!-- 設(shè)置網(wǎng)站作者 -->
<meta name="author" content="hector">
<!-- 設(shè)置網(wǎng)站的跳轉(zhuǎn) -->
<!-- <meta http-equiv="refrest" content="2";url=https://www.
baidu.com -->
<title>頭部標(biāo)簽</title>
<!-- 定義內(nèi)部的CSS樣式 -->
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS樣式文件 -->
<link rel="stylesheet" href="CSS樣式文件的路徑">
<!-- 定義或引用腳本 -->
<<script>
alert("歡迎登錄")
</script>
<!-- 定義一個(gè)基礎(chǔ)路徑 -->
<base href="../image/">
</head>
<body>
IT教育，計(jì)算機(jī)等級(jí)考試--Hrctor
<img src="../image/google.png" alt="">
<img src="../image/p1.jpg" alt="">
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-445E4McR-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例10.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("哈哈！ ");
</script>
</head>
<body>
<div style="width:200px;height:200px;background:red">
<p>
hello
</p>
</div>
<p style="width:300px;height:300px;background:green">
<div style="width:200px;height:200px;background:blue">
worid
</div>
</body>
</html>1234567891011121314151617181920效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-IoPZWeC1-1593240920363)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例11.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<hr>
<a href="d:/b.html" target="_self">b</a>
<hr>
<a href="c.html" target="_blank">c</a>
<hr>
<a href="../d.html">d</a>
<hr>
<a href="../../e.html">e</a>
</body>
</html>1234567891011121314151617效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-xsXKs86m-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例12.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">1 簡介</a></li>
<li><a href="#second">2 HTML版本</a></li>
<li><a href="#three">3 特點(diǎn)</a></li>
<li><a href="#four">4 編輯方式</a></li>
<li><a href="#five">5 整體結(jié)構(gòu)</a></li>
<li><a href="#six">6 相關(guān)要求</a></li>
</ol>
<p>
<a name="first">簡介</a>
</p>
<P>
HTML的英文全稱是 Hypertext Marked Language，即超文本標(biāo)記語言。HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言，它是標(biāo)準(zhǔn)通用化標(biāo)記語言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX， Windows等)。使用HTML語言，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識(shí)別，并將這些HTML文件“翻譯”成可以識(shí)別的信息，即現(xiàn)在所見到的網(wǎng)頁。
</p>
<p>
自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網(wǎng)頁文件的語言，通過標(biāo)記式的指令(Tag)，將影像、聲音、圖片、文字動(dòng)畫、影視等內(nèi)容顯示出來。事實(shí)上，每一個(gè)HTML文檔都是一種靜態(tài)的網(wǎng)頁文件，這個(gè)文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，只是一種排版網(wǎng)頁中資料顯示位置的標(biāo)記結(jié)構(gòu)語言，易學(xué)易懂，非常簡單。HTML的普遍應(yīng)用就是帶來了超文本的技術(shù)―通過單擊鼠標(biāo)從一個(gè)主題跳轉(zhuǎn)到另一個(gè)主題，從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面，與世界各地主機(jī)的文件鏈接超文本傳輸協(xié)議規(guī)定了瀏覽器在運(yùn)行HTML文檔時(shí)所遵循的規(guī)則和進(jìn)行的操作。HTTP協(xié)議的制定使瀏覽器在運(yùn)行超文本時(shí)有了統(tǒng)一的規(guī)則和標(biāo)準(zhǔn)。
</P>
<p><a name="second">HTML版本</a></p>
<p>HTML是用來標(biāo)記Web信息如何展示以及其他特性的一種語法規(guī)則，它最初于1989年由GERN的Tim Berners-Lee發(fā)明。HTML基于更古老一些的語言SGML定義，并簡化了其中的語言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數(shù)據(jù)，所以很早就得到各個(gè)Web瀏覽器廠商的支持。
</p>
<p>HTML歷史上有如下版本：
①HTML 1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。<br>
②HTML 2.0：1995年1 1月作為RFC 1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)。 <br>
③HTML 3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)。 <br>
④HTML 4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。<br>
⑤HTML 4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。<br>
⑥HTML 5：HTML5是公認(rèn)的下一代Web語言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力，被喻為終將改變移動(dòng)互聯(lián)網(wǎng)的重要推手。<br>
</p>
<p><a name="three">特點(diǎn)</a></p>
<p>
超級(jí)文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特點(diǎn)如下： [4]
簡易性：超級(jí)文本標(biāo)記語言版本升級(jí)采用超集方式，從而更加靈活方便。 [4]
可擴(kuò)展性：超級(jí)文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 [4]
平臺(tái)無關(guān)性：雖然個(gè)人計(jì)算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超級(jí)文本標(biāo)記語言可以使用在廣泛的平臺(tái)上，這也是萬維網(wǎng)（WWW）盛行的另一個(gè)原因。 [4]
通用性：另外，HTML是網(wǎng)絡(luò)的通用語言，一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。
</p>
<p><a name="four">編輯方式</a></p>
<p>
HTML其實(shí)是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：
基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉懀?dāng)然，如果你用WPS來編寫，也可以。不過存盤時(shí)請(qǐng)使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。 [7]
半所見即所得軟件，如：FCK-Editer、E-webediter等在線網(wǎng)頁編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開發(fā)，Sublime Text2收費(fèi)但可以無限期試用）。 [7]
所見即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識(shí)就可以做出網(wǎng)頁，如：AMAYA（出品單位：萬維網(wǎng)聯(lián)盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見即所得軟件與半所見即所得的軟件相比，開發(fā)速度更快，效率更高，且直觀的表現(xiàn)更強(qiáng)。任何地方進(jìn)行修改只需要刷新即可顯示。缺點(diǎn)是生成的代碼結(jié)構(gòu)復(fù)雜，不利于大型網(wǎng)站的多人協(xié)作和精準(zhǔn)定位等高級(jí)功能的實(shí)現(xiàn)。
</p>
<p><a name="five">整體結(jié)構(gòu)</a></p>
<p>
一個(gè)網(wǎng)頁對(duì)應(yīng)多個(gè)HTML文件，超文本標(biāo)記語言文件以.htm（磁盤操作系統(tǒng)DOS限制的外語縮寫）為擴(kuò)展名或.html（外語縮寫）為擴(kuò)展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產(chǎn)生超文本標(biāo)記語言文件，只用修改文件后綴即可。標(biāo)準(zhǔn)的超文本標(biāo)記語言文件都具有一個(gè)基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對(duì)出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實(shí)體兩大部分。有三個(gè)雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。 [10]
標(biāo)記符<html>，說明該文件是用超文本標(biāo)記語言（本標(biāo)簽的中文全稱）來描述的，它是文件的開頭;而</html>，則表示該文件的結(jié)尾，它們是超文本標(biāo)記語言文件的開始標(biāo)記和結(jié)尾標(biāo)記。
</p>
<p><a name="six">相關(guān)要求</a></p>
<p>
在編輯超文本標(biāo)記語言文件和使用有關(guān)標(biāo)記符時(shí)有一些約定或默認(rèn)的要求。 [9]
文本標(biāo)記語言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤操作系統(tǒng)DOS限制的外語縮寫為擴(kuò)展名）或
html（外語縮寫為擴(kuò)展名），以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名。在使用文本編輯器時(shí)，注意修改擴(kuò)展名。而常用的圖像文件的擴(kuò)展名為gif和jpg。 [9]
超文本標(biāo)記語言源程序?yàn)槲谋疚募淞袑捒刹皇芟拗疲炊鄠€(gè)標(biāo)記可寫成一行，甚至整個(gè)文件可寫成
一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標(biāo)記指定除外）；對(duì)文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號(hào)（實(shí)體符）“ （注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時(shí)使用符號(hào)“/”分隔，文件名及路徑描述可用雙引號(hào)也可不用引號(hào)括起。 [9]
標(biāo)記符中的標(biāo)記元素用尖括號(hào)括起來，帶斜杠的元素表示該標(biāo)記說明結(jié)束；大多數(shù)標(biāo)記符必須成對(duì)使用，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號(hào)“ （注意此字母必須小寫，方可空格）”；許多標(biāo)記元素具有屬性說明，可用參數(shù)對(duì)元素作進(jìn)一步的限定，多個(gè)參數(shù)或?qū)傩皂?xiàng)說明次序不限，其間用空格分隔即可；一個(gè)標(biāo)記元素的內(nèi)容可以寫成多行。 [9]
標(biāo)記符號(hào)，包括尖括號(hào)、標(biāo)記元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。 [9]
HTML注釋由"<!--"號(hào)開始，由符號(hào)”-->“結(jié)束結(jié)束，例如<!--注釋內(nèi)容-->。注釋內(nèi)容可插入文本中任何位置。任何標(biāo)記若在其最前插入驚嘆號(hào)，即被標(biāo)識(shí)為注釋，不予顯示。
</p>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-nQwkft9w-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例13.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="13.錨點(diǎn)鏈接.html#first" target="_blank">
簡介</a></li>
<li><a href="13.錨點(diǎn)鏈接.html#second" target="_blank">
HTML版本</a></li>
<li><a href="13.錨點(diǎn)鏈接.html#three" target="_blank">
特點(diǎn)</a></li>
<li><a href="13.錨點(diǎn)鏈接.html#four" target="_blank">
編輯方式</a></li>
<li><a href="13.錨點(diǎn)鏈接.html#five" target="_blank">
整體結(jié)構(gòu)</a></li>
<li><a href="13.錨點(diǎn)鏈接.html#six" target="_blank">
相關(guān)要求</a></li>
</body>
</html>123456789101112131415161718192021效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-4Z1Yrksq-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例14.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../image/hh.gif">點(diǎn)擊此處下載圖片</a>
<br>
<a href="mailto:422133899@qq.com">聯(lián)系我們</a>
</body>
</html>123456789101112效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例15.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="2" width="400px" height="300px" align="
center" bordercolor="red" bgcolor="#cccccc" backgroud
="../..image/timg (1).jpg" cellspacing="0" cellpading="1">
<tr alige="center" bgcolor="cyain">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="right">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="leign" valign="top">
<td>hello</td>
<td align="right" bgcolor="blue">hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="right" valign="bottom" background="
../../image/hh.gif">
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-b7NrHKsq-1593240920367)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例01.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>tb{hello$}*4)*4 -->
<table border="1" width="500px" height="300px">
<tr>
<td colspan="4" align="center">hello1</td>
</tr>
<tr>
<td rowspan="3">hello</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr>
<td>hello2</td>
<td rowspan="2" colspan="2">hello3</td>
</tr>
<tr>
<td>hello2</td>
</tr>
</table>
</body>
</html>123456789101112131415161718192021222324252627效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-53fwwown-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例02.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>td*4)*6 -->
<table border="1" width="500px" height="300px" align="
center">
<caption><h2>學(xué)生基本信息表</h2></caption>
<<thead bgcolor="cyan">
<td>學(xué)號(hào)</td>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</thead>
<tbody align="center" bgcolor="yellow">
<tr>
<td>1001</td>
<td>小明</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>小花</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>1003</td>
<td>小張</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1004</td>
<td>小狗</td>
<td>19</td>
<td>男</td>
</tr>
</tbody>
<tfoot bgcolor="#FF7300" align="center">
<td width="%25">合計(jì)</td>
<td colspan="3">4</td>
</tfoot>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態(tài)網(wǎng)頁2\案例\result\案例03.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用戶注冊(cè)</h2>
<form action="" method="get" enctype="multipart/form-data">
用戶名：<input type="text" name="usname" maxlength="4" value="
碧瑤" readonly="readonly">
<br>
密 碼：<input type="password" name="pwd" size="6">
<br>
年 齡：<input type="text" name="age" value="18" disabled="">
<br>
性 別: <input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女
<br>
愛 好: <input type="checkbox" name="hobby" value="eat" checked>吃飯
<input type="checkbox" name="hobby" value="sleep">睡覺
<input type="checkbox" name="hobby" value="doudou">打豆豆
<hr>
頭 像: <input type="file" name="head" accept="image/jpg">
<input type="hidden" name="usr_id" value="8888">
<br>
<input type="submit" value="注 冊(cè)">
<input type="reset" value="重 置">
<hr>
<input type="image" src="../../image/tijiao.gif">
<input type="image" src="../../image/chongtian.gif">
<hr>
<input type="button" value="普通按鈕">
</form>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-X2qAPVMq-1593240920368)(C:\Users\lenovo\Desktop\project\result\案例04-2.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
學(xué) 歷：
<select name="degree">
<option value="0">--請(qǐng)選擇你的學(xué)歷--</option>
<option value="dazhuan">大專</option>
<option value="benke" selected>本科</option>
<option value="yanjiusheng">研究生</option>
<option value="shuoshi">碩士</option>
</select>
<br>
城 市：
<select name="city">
<optgroup label="山西省>"
<option value="taiyuan">太原</option>
<option value="datong">大同</option>
<option value="changzhi">長治</option>
</optgroup>
<optgroup label="山東省">
<option value="jinan">濟(jì)南</option>
<option value="qingdao">青島</option>
<option value="rizhao">日照</option>
</optgroup>
<optgroup label="江蘇省">
<option value="nanjing">南京</option>
<option value="suzhou">蘇州</option>
<option value="yangzhou">揚(yáng)州</option>
</optgroup>
</select>
<br>
服務(wù)協(xié)議；
<textarea name="introduce" rows="10" cols="100" readonly>
請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國家的法律法規(guī)...
請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國家的法律法規(guī)...
請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國家的法律法規(guī)...
請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國家的法律法規(guī)...
請(qǐng)遵守本網(wǎng)站的相關(guān)協(xié)議和國家的法律法規(guī)...
</textarea>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-slxqIosF-1593240920370)(C:\Users\lenovo\Desktop\project\result\案例05.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>個(gè)人信息</legend>
<label for="name">用戶名</label>
<input type="text" name="ursname" id="name"><br>
<label for="email">郵 箱</label>
<input type="text" name="email" id="email"><br>
</fieldset>
<hr>
<input type="submit" value="提交按鈕">
<input type="reset" value="重置按鈕">
<input type="image" src="../../image/tijiao.gif">
<input type="button" value="普通按鈕">
<hr>
<button type="submit">提交按鈕</button>
<button type="reset">重置按鈕</button>
<button type="button">普通按鈕</button>
<button><img src="../../image/tijiao.gif" alt=""></button>
<hr>
<fieldset>
<legend>院校信息</legend>
學(xué)號(hào)：<input type="text" name="stuld"><br>
學(xué)校：<input type="text" name="stuSchool"><br>
專業(yè)：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-hlv43r7m-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例06.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="top.html" width="100%" height="200px" frameborder="0"
scrolling="auto"></iframe>
<h3>主體部分</h3>
<br>
<a href="01.表格.html" target="hello">01.html</a>
<a href="02.合并單元格.html" target="hello">02.html</a>
<br>
<iframe src="./foot.html" width="600px" height="600px" frameborder
="0" name="hello"></iframe>
</body>
</html>1234567891011121314151617效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-BvKrpi8R-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例07.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>標(biāo)題</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>腳注</footer>
</article>
<aside>廣告</aside>
<figure>
<figcaption>log標(biāo)識(shí)</figcaption>
<img src="../../image/facebook.png" alt="">
<img src="../../image/google.png" alt="">
</figure>
<nav>
<ul>
<li>網(wǎng)頁</li>
<li>咨訊</li>
<li>視頻</li>
<li>圖片</li>
<li>知道</li>
<li>貼吧</li>
<li>采購</li>
<li>地圖</li>
</ul>
</nav>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-AR5V99DS-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例01…png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <mark>to</mark> html!
<hr>
我在<time datetime="2020年2月14日">情人節(jié)</time>有個(gè)會(huì)!
<hr>
<details>
<summary>HTML簡介</summary>
<p>HTML是一門用來制作網(wǎng)頁的標(biāo)簽語言</p>
<p>HTML可以包含文本、圖像、音頻、視頻等各種多媒體信息</p>
</details>
<meter max="100" min="1" value="30"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="65" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="40" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="70" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
<hr>
<progress value="10" max="50"></progress>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-PcuZlH7Z-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例02.。.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" autocomplete="on" id="myform">
<label for="email">郵箱</label>
<input type="email" name="email" id="email">
<br>
<label for="home">個(gè)人主頁:</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">電話：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keywords">關(guān)鍵字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">數(shù)字：</label>
<input type="range" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期：</label>
<input type="datetime" name="birthday" id="birthday">
<br>
<label for="color">顏色：</label>
<input type="color" name="color" id="color">
<br>
<label for="name">用戶名:</label>
<input type="text" name="usrname" id="name" placeholder="請(qǐng)輸入用戶名" required="" autocomplete="on" autofocus="">
<br>
<label for="age">年齡：</label>
<input type="text" name="age id="age pattern="\d{1,2}">
<br>
<label for="city">城市：</label>
<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
<datalist id="citylist">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">廣州</option>
</datalist>
<hr>
<input type="submit" form="myform">
</form>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ul7yIjAz-1593240920374)(C:\Users\lenovo\Desktop\project\result\案例03…png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的瀏覽器不支持audio標(biāo)簽，請(qǐng)更換瀏覽器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster
="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-vpMsaoe7-1593240920375)(C:\Users\lenovo\Desktop\project\result\案例04…png)]
<input type="url" name="home" id="home">
<br>
<label for="phone">電話：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keywords">關(guān)鍵字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">數(shù)字：</label>
<input type="range" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期：</label>
<input type="datetime" name="birthday" id="birthday">
<br>
<label for="color">顏色：</label>
<input type="color" name="color" id="color">
<br>
<label for="name">用戶名:</label>
<input type="text" name="usrname" id="name" placeholder="請(qǐng)輸入用戶名" required="" autocomplete="on" autofocus="">
<br>
<label for="age">年齡：</label>
<input type="text" name="age id="age pattern="\d{1,2}">
<br>
<label for="city">城市：</label>
<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
<datalist id="citylist">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">廣州</option>
</datalist>
<hr>
<input type="submit" form="myform">
</form>
1234567891011121314151617181920212223242526272829303132333435363738394041```
效果
[外鏈圖片轉(zhuǎn)存中…(img-ul7yIjAz-1593240920374)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的瀏覽器不支持audio標(biāo)簽，請(qǐng)更換瀏覽器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster
="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外鏈圖片轉(zhuǎn)存中…(img-vpMsaoe7-1593240920375)]
原文鏈接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者：WanXuang
出處：從CSDN
文同步本人掘金平臺(tái)的文章：https://juejin.cn/post/6844903569317953550
許多的OO語言都支持兩種繼承方法：接口繼承和實(shí)現(xiàn)繼承。接口繼承只繼承方法簽名，而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。由于函數(shù)沒有簽名，在ECMAScript中無法實(shí)現(xiàn)接口繼承。ECMAScript只支持實(shí)現(xiàn)繼承，而且實(shí)現(xiàn)主要是依靠原型鏈來實(shí)現(xiàn)的。[p162]
原型鏈的基本思想是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。回顧下構(gòu)造函數(shù)、原型和實(shí)例的關(guān)系: 每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
}
function SubType(){
this.subProperty = false;
}
// 繼承了SuperType,重點(diǎn)哦
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.subProperty;
}
var instance = new SubType();
console.log(instance.getSuperValue()); // true
復(fù)制代碼原型鏈繼承帶來兩個(gè)問題：一是原型實(shí)際上變成了另一個(gè)類型的實(shí)例，于是，原先的實(shí)例屬性也就變成了現(xiàn)在原型的屬性，共享了屬性。二是在創(chuàng)建子類型的實(shí)例時(shí)，不能在沒有影響所有對(duì)象實(shí)例的情況下向超類型的構(gòu)造函數(shù)傳遞參數(shù)。
借用構(gòu)造函數(shù)解決原型鏈繼承帶來的不能向構(gòu)造函數(shù)傳遞倉鼠的問題。這里使用到了apply()或者call()方法在新創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)。
function SuperType(){
this.colors = ['red','blue','green'];
}
function SubType(){
// 繼承SuperType
SuperType.call(this); // SuperType.apply(this)同效
}
var instance1 = new SubType();
instance1.color.push('black');
console.log(instance1.colors); // 'red,blue,green,black'
var instance2 = new SubType();
console.log(instance2.colors); // 'red,blue,green'
復(fù)制代碼上面的例子中，我在父類型構(gòu)造函數(shù)中沒有傳參數(shù)，看者感興趣的話可以自己加下參數(shù)來實(shí)驗(yàn)一番咯。
借用構(gòu)造函數(shù)解決了原型鏈繼承的確定，但是又沒有接納原型鏈的優(yōu)點(diǎn)：共享。下面的組合繼承結(jié)合了原型鏈和借用構(gòu)造函數(shù)，容納了兩者的優(yōu)點(diǎn)。
組合繼承的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。
function SuperType(name){
this.name = name;
this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
console.log(this.name);
}
function SubType(name,age){
// 繼承屬性
SuperType.call(this,name);
this.age = age;
}
// 繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor =SubType; // 避免重寫構(gòu)造函數(shù)指向錯(cuò)誤
SubType.prototype.sayAge = function(){
console.log(this.age);
}
var instance1 = new SubType('nicholas' , 29);
instance1.colors.push('black');
console.log(instance1.colors); // 'red,blue,green,black'
instance1.sayName(); // 'nicholas'
instance1.sayAge(); // 29
var instance2 = new SubType('greg' , 27);
console.log(instance2.colors); // 'red,blue,green'
instance2.sayName(); // 'greg'
instance2.sayAge(); // 27
復(fù)制代碼組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，融合了它們的優(yōu)點(diǎn)，成為了JavaScript中最常用的繼承模式。而且，instanceof和isPrototypeOf()也能夠用于識(shí)別基于組合繼承創(chuàng)建的對(duì)象。
原型式繼承是借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象，同時(shí)還不必因此創(chuàng)建自定義的類型。
function object(o){ // 傳入一個(gè)對(duì)象
function F(){};
F.prototype = o;
return new F();
}
var person = {
name : 'nicholas',
friends: ['shelby','court','van']
};
var anotherPerson = object(person);
anotherPerson.name = 'greg';
anotherPerson.friends.push('rob');
var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'linda';
yetAnotherPerson.friends.push('barbie');
console.log(person.friends); // 'shelby,court,van,rob,barbie'
復(fù)制代碼寄生式繼承是與原型繼承緊密相關(guān)的一種思路。寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似，即是創(chuàng)建了一個(gè)僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來增強(qiáng)對(duì)象，最后再像真的做了所有工作一樣返回對(duì)象。
function object(o){ // 傳入一個(gè)對(duì)象
function F(){};
F.prototype = o;
return new F();
}
function createAnother(original){
var clone = object(original);
clone.sayHi = function(){
console.log('hi');
};
return clone;
}
var person = {
name : 'nicholas',
friends : ['shelby','court','van']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 'hi'
復(fù)制代碼上面的例子中，新對(duì)象anotherPerson不僅具有person的所有屬性和方法，而且還有了自己的sayHi()方法。
組合繼承是JavaScript最常用的繼承模式；不過，它也有自己的不足。組合繼承最大的問題就是無論什么情況下，都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)：一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)內(nèi)部。寄生組合式繼承能夠解決這個(gè)問題。
所謂寄生組合式繼承，即通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。其背后的基本思路是不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù)，我們所需要的無非就是超類型的原型的一個(gè)副本而已。寄生組合式繼承的基本模式如下：
function inheritPrototype(subType,superType){
var prototype = Object(superType.prototype); // 創(chuàng)建對(duì)象
prototype.constructor = subType; // 增強(qiáng)對(duì)象，防止下面重寫constructor屬性
subType.prototype = prototype; // 指定對(duì)象
}
復(fù)制代碼一個(gè)完整的例子如下,相關(guān)插圖見書[p173]:
function inheritPrototype(subType,superType){
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function SuperType(name){
this.name = name;
this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name); // 只在這調(diào)用了一次超類型的構(gòu)造函數(shù)
this.age = age;
}
inheritPrototype(SubType , SuperType);
SubType.prototype.sayAge = function(){
console.log(this.age);
}
var instance = new SubType('nicholas' , 29);
復(fù)制代碼上面的例子的高效處體現(xiàn)在它只調(diào)用了一次SuperType構(gòu)造函數(shù)，并且避免了在SubType.prototype上創(chuàng)建不必要的，多余的屬性。與此同時(shí)，原型鏈還能保持不變；因此還能正常使用instanceof和inPrototypeOf()。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。
閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。我的理解是，函數(shù)內(nèi)的函數(shù)使用到外層函數(shù)的變量延長變量的生存時(shí)間，造成常駐內(nèi)存。例子見下：
function foo(){
var a = 2;
return function(){
a += 1;
console.log(a);
}
}
var baz = foo();
baz(); // 3
baz(); // 4
baz(); // 5
baz(); // 6
復(fù)制代碼上面的例子中，外部的函數(shù)foo()執(zhí)行完成之后，正常的情況下應(yīng)該銷毀a變量的，但是內(nèi)部的返回的匿名函數(shù)使用到該變量，不能銷毀。如果需要銷毀的話，可以改寫成下面：
function foo(){
var a = 2;
return function(){
a += 1;
console.log(a);
}
}
var baz = foo();
baz(); // 3
baz = null; // 將內(nèi)部的匿名函數(shù)賦值為空
復(fù)制代碼談到了閉包，這讓我想起了不久前刷知乎看到一篇文章。自己整理如下：
for(var i = 0 ; i < 5; i++){
setTimeout(function(){
console.log(i);
},1000)
}
console.log(i);
// 5,5,5,5,5,5
復(fù)制代碼上面的代碼是輸出了6個(gè)5，而這6個(gè)5是這樣執(zhí)行的，先輸出全局中的console.log(i)，然后是過了1秒種后，瞬間輸出了5個(gè)5（為什么用瞬間這個(gè)詞呢，怕看者理解為每過一秒輸出一個(gè)5）。解讀上面的代碼的話，可以通過狹義范圍(es5)的理解：同步 => 異步 => 回調(diào) （回調(diào)也是屬于異步的范疇，所以我這里指明了狹義啦）。先是執(zhí)行同步的for,遇到異步的setTimeout(setTimeout和setInterval屬于異步哈)后將其放入隊(duì)列中等待，接著往下執(zhí)行全局的console.log(i)，將其執(zhí)行完成后執(zhí)行異步的隊(duì)列。
追問1:閉包
改寫上面的代碼，期望輸出的結(jié)果為：5 => 0,1,2,3,4。改造的方式一：
for(var i = 0; i < 5; i++){
(function(j){
setTimeout(function(){
console.log(j);
},1000);
})(i);
}
console.log(i);
// 5,0,1,2,3,4
復(fù)制代碼上面的代碼巧妙的利用IIFE(Immediately Invoked Function Expression:聲明即執(zhí)行的函數(shù)表達(dá)式)來解決閉包造成的問題，閉包的解析看上面。
方法二：利用js中基本類型的參數(shù)傳遞是按值傳遞的特征，改造代碼如下
var output = function(i){
setTimeout(function(){
console.log(i);
},1000);
};
for(var i = 0; i < 5; i++){
output(i); // 這里傳過去的i值被復(fù)制了
}
console.log(i);
// 5,0,1,2,3,4
復(fù)制代碼上面改造的兩個(gè)方法都是執(zhí)行代碼后先輸出5，然后過了一秒種依次輸出0,1,2,3,4。
如果不要考慮全局中的console.log(i)輸出的5，而是循環(huán)中輸出的0,1,2,3,4。你還可以使用ES6的let塊級(jí)作用域語法,實(shí)現(xiàn)超級(jí)簡單:
for(let i = 0; i < 5; i++){
setTimeout(function(){
console.log(i);
},1000);
}
// 0,1,2,3,4
復(fù)制代碼上面是過了一秒鐘后，依次輸出0,1,2,3,4。這種做法類似于無形中添加了閉包。那么，如果使用ES6語法的話，會(huì)怎樣實(shí)現(xiàn)5,0,1,2,3,4呢？
追問2:ES6
改造剛開始的代碼使得輸出的結(jié)果是每隔一秒輸出0,1,2,3,4，大概第五秒輸出5。
在不使用ES6的情況下：
for(var i = 0; i < 5; i++){
(function(j){
setTimeout(function(){
console.log(j);
},1000*j);
})(i);
}
setTimeout(function(){
console.log(i);
},1000*i);
// 0,1,2,3,4,5
復(fù)制代碼上面的代碼簡單粗暴，但是不推薦。看題目是每隔一秒輸出一個(gè)值，再回調(diào)實(shí)現(xiàn)最后的5輸出，這個(gè)時(shí)候應(yīng)該使用ES6語法來考慮，應(yīng)該使用Promise方案：
const tasks = [];
for(var i = 0; i < 5; i++){// 這里的i聲明不能改成let，改成let的話請(qǐng)看下一段代碼
((j)=>{
tasks.push(new Promise((resolve)=>{ // 執(zhí)行tasks
setTimeout(()=>{
console.log(j);
resolve(); // 這里一定要resolve,否則代碼不會(huì)按照預(yù)期執(zhí)行
},1000*j);
}))
})(i);
}
Promise.all(tasks).then(()=>{ // 執(zhí)行完tasks，回調(diào)
setTimeout(()=>{
console.log(i);
},1000);
});
// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
復(fù)制代碼如果是使用let，我的改造如下：
const tasks = [];
for (let i = 0; i < 5; i++) {
tasks.push(new Promise((resolve) => {
setTimeout(() => {
console.log(i);
resolve();
}, 1000 * i);
}));
}
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(tasks.length);
}, 1000);
});
// 0,1,2,3,4,5
復(fù)制代碼上面的代碼比較龐雜，可以將其顆粒話，模塊化。對(duì)上面兩段代碼的帶var那段進(jìn)行改造后如下：
const tasks = []; // 這里存放異步操作的Promise
const output = (i) => new Promise((resolve) => {
setTimeout(()=>{
console.log(i);
},1000*i);
});
// 生成全部的異步操作
for(var i = 0; i < 5; i++){
tasks.push(output(i));
}
// 異步操作完成之后，輸出最后的i
Promise.all(tasks).then(() => {
setTimeout(() => {
console.log(i);
},1000);
});
// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
復(fù)制代碼追問3:ES7
既然ES6的Promise可以寫，那么ES7是否可以寫呢，從而讓代碼更加簡潔易讀？那就使用到到了異步操作的async await特性啦。
// 模擬其他語言中的sleep，實(shí)際上可以是任何異步操作
const sleep = (time) => new Promise((resolve) => {
setTimeout(resolve , time);
});
(async () => {
for(var i = 0; i < 5; i++){
await sleep(1000);
console.log(i);
}
await sleep(1000);
console.log(i);
})();
// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
復(fù)制代碼IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性，分別表示瀏覽器窗口相對(duì)于屏幕左上角和上邊的位置[p197]。Firefox則以screenX和screenY屬性來表示。為了兼容各個(gè)瀏覽器，可以入下面這樣寫：
var leftPos = (typeof window.screenLeft == "number")?window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;
復(fù)制代碼由于瀏覽器廠商以及歷史的問題，無法確認(rèn)瀏覽器本身的大小，但是可以取得視口的大小[p198]。如下：
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == 'CSS1Compat'){ // 標(biāo)準(zhǔn)模式下的低版本ie
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{ // 混雜模式下的chrome
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
復(fù)制代碼上面的示例可以簡寫成下面這樣：
var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientHeight;
var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
復(fù)制代碼為繪制上下文應(yīng)用變換，會(huì)導(dǎo)致使用不同的變換矩陣應(yīng)用處理，從而產(chǎn)生不同的結(jié)果。[p453]
可通過下面的方法來修改變換矩陣:
關(guān)于JSON，最重要的是要理解它是一種數(shù)據(jù)格式，不是一種編程語言。
先來看下對(duì)象字面量demo寫法：
var person = {
name : "nicholas",
age : 29
};
# 上面的代碼也可以寫成下面的
var person = {
"name" : "nicholas",
"age" : 29
};
復(fù)制代碼而上面的對(duì)象寫成數(shù)據(jù)的話，就是下面這樣了：
{
"name": "nicholas ",
"age": 29
}
# 可到網(wǎng)站 https://www.bejson.com/ 驗(yàn)證
復(fù)制代碼?? 與JavaScript對(duì)象字面量相比，JSON對(duì)象又兩個(gè)地方不一樣。首先，沒有聲明變量(JSON中沒有變量的概念)。其次，沒有分號(hào)(因?yàn)檫@不是JavaScript語句，所以不需要分號(hào))。留意的是，對(duì)象的屬性必須加雙引號(hào)(不是單引號(hào)哦)，這在JSON中是必須的。
可以這么理解：JSON.stringify()是從一個(gè)object中解析成JSON數(shù)據(jù)格式，而JSON.parse()是從一個(gè)字符串中解析成JSON數(shù)據(jù)格式。
var person = {
name: 'nicholas',
age: 29
};
var jsonText = JSON.stringify(person);
console.log(jsonText);
// {"name":"nicholas","age":29}
復(fù)制代碼var strPerson = '{"name":"nicholas","age":29}';
var jsonText = JSON.parse(strPerson);
console.log(jsonText); // { name: 'nicholas', age: 29 }
復(fù)制代碼XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。它是Ajax技術(shù)的核心[p571]。
XMLHttpRequest對(duì)象能夠使你：
XMLHttpRequest的使用：
# 創(chuàng)建XHR對(duì)象 => open()準(zhǔn)備發(fā)送 => send()傳送數(shù)據(jù)
// 創(chuàng)建對(duì)象，對(duì)瀏覽器做兼容
function createXHR(){
if(typeof XMLHttpRequest != 'undefined'){ // IE7+和其他瀏覽器支持
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
if(typeof arguments.callee.activeXString != 'string'){
var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; // 低版的ie可能遇到三種不同版本的XMR對(duì)象
var i , len;
for(i = 0,len = versions.length; i < len ; i++){
try{
new ActiveXObject(version[i]);
arguments.callee.activeXString = versions[i];
break;
}catch (ex){
// 跳過
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available.");
}
}
var xhr = createXHR();
// 準(zhǔn)備發(fā)送數(shù)據(jù)
xhr.open("get","path/to/example.txt",false);// 非異步，異步的話第三個(gè)參數(shù)改為true
// 傳送數(shù)據(jù)
xhr.send(null); // get方法不需要傳數(shù)據(jù)
// 判斷狀態(tài)嘛，獲取服務(wù)器返回的數(shù)據(jù)
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("Request was nsuccessful : " + xhr.status);
}
復(fù)制代碼何為跨域呢？只要訪問的資源的協(xié)議、域名、端口三個(gè)不全相同，就可以說是非同源策略而產(chǎn)生了跨域了，這是狹義的說法。廣義的說法：通過XHR實(shí)現(xiàn)Ajax通信的一個(gè)主要限制，來源于跨域的安全策略；默認(rèn)情況下,XHR對(duì)象只能訪問包含它的頁面位于同一個(gè)域中的資源[p582]。注：部分文字和代碼引用自前端常見跨域解決方案（全）
CORS（Cross-Origin Resource Sharing，跨資源共享）定義了在必須訪問跨資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。其背后的基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功，還是應(yīng)該失敗。 復(fù)雜的跨域請(qǐng)求應(yīng)當(dāng)考慮使用它。
普通跨域請(qǐng)求：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無需設(shè)置，如果要帶cookie請(qǐng)求：前后端都要設(shè)置。
1.前端設(shè)置
1.) 原生ajax
function createCORSRequest(method,url){ // 兼容處理，ie8/9需要用到window.XDomainRequest
var xhr = new XMLHttpRequest();
// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;
if("withCredentials" in xhr){ // 其他的用到withCredentials
xhr.open(method,url,true);
}else if(typeof XDomainRequest != 'undefined'){
xhr = new XDomainRequest();
xhr.open(method , url);
}else{
xhr = null;
}
return xhr;
}
// get請(qǐng)求
var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if(request){
request.onload = function(){
// 對(duì)request.responseText 進(jìn)行處理
};
request.send();
}
// post請(qǐng)求，帶cookie
var requestXhr = createCORSRequest("post","http://www.somewhere-else.com/page/");
requestXhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
requestXhr.send("user=admin");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
復(fù)制代碼2.)jquery ajax
上面寫了一大堆原生的，看得頭都有點(diǎn)大了，還是使用jquery ajax 比較舒服:
$.ajax({
...
xhrFields: {
withCredentials: true // 前端設(shè)置是否帶cookie
},
crossDomain: true, // 會(huì)讓請(qǐng)求頭中包含跨域的額外信息，但不會(huì)含cookie
...
});
復(fù)制代碼3.) vue框架
在vue-resource封裝的ajax組建中加入以下代碼:
Vue.http.options.credentials = true;
復(fù)制代碼2.服務(wù)器設(shè)置
若后端設(shè)置成功，前端瀏覽器控制臺(tái)上就不會(huì)出現(xiàn)跨域報(bào)錯(cuò)的信息，反之，說明沒有成功。
1.） java后臺(tái)
/*
* 導(dǎo)入包：import javax.servlet.http.HttpServletResponse;
* 接口參數(shù)中定義：HttpServletResponse response
*/
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需寫全（協(xié)議+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");
復(fù)制代碼2.) node后臺(tái)
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
var postData = '';
// 數(shù)據(jù)塊接收中
req.addListener('data', function(chunk) {
postData += chunk;
});
// 數(shù)據(jù)接收完畢
req.addListener('end', function() {
postData = qs.parse(postData);
// 跨域后臺(tái)設(shè)置
res.writeHead(200, {
'Access-Control-Allow-Credentials': 'true', // 后端允許發(fā)送Cookie
'Access-Control-Allow-Origin': 'http://www.domain1.com', // 允許訪問的域（協(xié)議+域名+端口）
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無法讀取cookie
});
res.write(JSON.stringify(postData));
res.end();
});
});
server.listen('8080');
console.log('Server is running at port 8080...');
復(fù)制代碼JSONP是JSON with padding(填充式JSON或參數(shù)式JSON)的簡寫，是應(yīng)用JSON的一種新方法，在后來的web服務(wù)中非常流行。簡單的跨域請(qǐng)求用JSONP即可。
通常為了減輕web服務(wù)器的負(fù)載，我們把js,css,img等靜態(tài)資源分離到另一臺(tái)獨(dú)立域名的服務(wù)器，在html頁面中再通過相應(yīng)的標(biāo)簽從不同域名下加載靜態(tài)資源，而被瀏覽器允許，基于此原理，我們可以通過動(dòng)態(tài)創(chuàng)建script，再請(qǐng)求一個(gè)帶參網(wǎng)址實(shí)現(xiàn)跨域通信。
1.前端實(shí)現(xiàn)
1.）原生實(shí)現(xiàn)
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參并指定回調(diào)執(zhí)行函數(shù)為onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回調(diào)執(zhí)行函數(shù)
function onBack(res){
console.log(JSON.stringify(res));
}
</script>
復(fù)制代碼服務(wù)器返回如下（返回時(shí)即執(zhí)行全局函數(shù)）：
onBack({"status": true,"user":"admin"})
復(fù)制代碼2.）jquery ajax
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 請(qǐng)求方式為jsonp
jsonpCallback: 'onBack', // 自定義回調(diào)函數(shù)名
data: {}
});
復(fù)制代碼3.）vue.js
this.$http.jsonp('http://www.domain2.com:8080/login',{
params: {},
jsonp: 'onBack '
}).then((res)=>{
console.log(res);
});
復(fù)制代碼2.后端nodejs代碼的示范：
var qs = require('querystring');
var http = require('http');
var server = http.createServer();
server.on('request',function(req,res){
var params = qs.parse(req.url.split('?')[1]);
var fn = params.callback;
// jsonp返回設(shè)置
res.writeHead(200,{"Content-Type":"text/javascript"});
res.write(fn + '('+JSON.stringify(params)+')');
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080 ...');
復(fù)制代碼?? jsonp缺點(diǎn)：只能實(shí)現(xiàn)get一種請(qǐng)求。
WebSocket protocol 是 HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊。
原生的WebSocket API使用起來不太方便，示例中使用了socket.io，它很好的封裝了webSocket接口，提供了更簡單、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容。
1.前端代碼
<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 連接成功處理
socket.on('connect', function() {
// 監(jiān)聽服務(wù)端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 監(jiān)聽服務(wù)端關(guān)閉
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
復(fù)制代碼2.node socket后臺(tái)
var http = require('http');
var socket = require('socket.io');
// 啟http服務(wù)
var server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 監(jiān)聽socket連接
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('hello：' + msg);
console.log('data from client: ---> ' + msg);
});
// 斷開處理
client.on('disconnect', function() {
console.log('Client socket has closed.');
});
});
復(fù)制代碼requestAnimationFrame 創(chuàng)建平滑的動(dòng)畫[p682]。在此之前都是使用setTimeout或者setInterval實(shí)現(xiàn)，requestAnimationFrame與它們相比：
使用的示范如下：
爬蟲設(shè)計(jì)中，H5頁面是指使用HTML5技術(shù)構(gòu)建的網(wǎng)頁。以下是幾個(gè)關(guān)于H5的爬蟲設(shè)計(jì)示例：
python復(fù)制代碼import requests from bs4 import BeautifulSoup url = 'http://example.com' # 目標(biāo)H5頁面的URL response = requests.get(url) soup = BeautifulSoup(response.text, 'html.parser') # 使用BeautifulSoup解析H5頁面的內(nèi)容 # ...首先，確保已經(jīng)安裝了Scrapy框架。然后，創(chuàng)建一個(gè)新的Scrapy項(xiàng)目，并在spiders目錄下創(chuàng)建一個(gè)新的爬蟲文件，例如h5_spider.py。在爬蟲文件中，可以使用Scrapy提供的API來爬取H5頁面。
python復(fù)制代碼import scrapy class H5Spider(scrapy.Spider): name = 'h5' allowed_domains = ['example.com'] # 允許爬取的域名 start_urls = ['http://example.com'] # 起始URL def parse(self, response): # 使用response對(duì)象處理H5頁面的內(nèi)容 # ...對(duì)于動(dòng)態(tài)加載的H5頁面，使用常規(guī)的爬蟲方法可能無法獲取完整的內(nèi)容。在這種情況下，可以使用Selenium模擬瀏覽器的行為來獲取完整的H5頁面。首先，確保已經(jīng)安裝了Selenium庫。然后，使用以下代碼示例：
python復(fù)制代碼from selenium import webdriver from selenium.webdriver.chrome.options import Options import time url = 'http://example.com' # 目標(biāo)H5頁面的URL chrome_options = Options() chrome_options.add_argument('--headless') # 在后臺(tái)運(yùn)行瀏覽器，不彈出窗口 driver = webdriver.Chrome(options=chrome_options) # 創(chuàng)建瀏覽器實(shí)例 driver.get(url) # 打開目標(biāo)頁面 time.sleep(2) # 等待頁面加載完成，根據(jù)實(shí)際情況調(diào)整等待時(shí)間 html = driver.page_source # 獲取完整的H5頁面內(nèi)容 driver.quit() # 關(guān)閉瀏覽器實(shí)例 # 處理獲取到的H5頁面內(nèi)容 # ...這些示例展示了使用不同方法來爬取H5頁面的基本思路。根據(jù)具體的頁面結(jié)構(gòu)和需求，你可能需要進(jìn)一步調(diào)整代碼以處理頁面內(nèi)容
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
