整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML從入門到精通!
<br> <!--換行-->
歡迎學習HTML技術
<hr>
<p>
超級文本標記語言是 標準通用標記語言下的一個應用，也是一種規范，一種 標準，
HTML
HTML(16)
它通過標記符號來標記要顯示的網頁中的各個部分。網頁 文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴 瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。 瀏覽器按順序閱讀網頁 文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的 瀏覽器，對同一標記符可能會有不完全 相 同的解釋，因而可能會有不同的顯示效果。
</p>
<p>
簡易性：超級文本標記語言 版本升級采用 超集方式，從而更加靈活方便。
</p>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h4>四級標題</h4>
<h6>六級標題</h6>
<hr>
<pre>
<<HTML從入門到精通>>
歡迎學習HTML技術
</pre>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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">導航部分</div>
<div style="width:400px;height:500px;background:yellow">正文部分</div>
<div style="width:400px;height:100px;background:blue">版權部分</div>
<hr>
iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98
</span>
</body>
</html>123456789101112131415效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qqLIPRpW-1593240920357)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例5.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年網絡游戲排行榜</h3>
<ol type="a" start="3">
<li>吃雞</li>
<li>王者農藥</li>
<li>LOL</li>
<li>WOL</li>
</ol>
<hr>
<h3>親愛的同學們</h3>
<ul type="disc">
<li>馮樂</li>
<li>趙寧</li>
<li>木木</li>
<li>丹丹</li>
</ul>
<hr>
<h3>術語的解釋</h3>
<dl>
<dt>LOL</dt>
<dd>它是由騰訊公司代理的一款網絡游戲，中文稱為叫英雄聯盟</dd>
<dd>它分為pc端和移動端</dd>
<dt>HTML</dt>
<dd>是一種用來制作網頁的標記語言</dd>
<dt>JAVA</dt>
<dd>是一種跨平臺的編程語言</dd>
</dl>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CZHuTwuN-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7sI2hPAB-1593240920359)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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="只是一個標志">
<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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yU93yyiJ-1593240920360)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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>
原價：<del>188元</del>, 優惠價：<span style="font-size:40px;color:#FF7300">
98元</span>
<hr>
主講:<ins>hector</ins>
<br>
<hr>
水的分子表達式:H<sub>2</sub>0 <br>
2<sup>3</sup>=8
<hr>
</body>
</html>1234567891011121314151617181920212223242526效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XdmsP4or-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例9.png)]
<!DOCTYPE html>
<html lang="en">
<!-- 設置字符編號 -->
<meta charset="UTF-8">
<!-- 設置關鍵字 -->
<meta name="keywords"content="IT教育，JAVA開發，WEB前端，
Aandroid開發，python">
<!-- 設置描述信息 -->
<meta name="descaription" content="做專業的IT教育.....">
<!-- 設置網站作者 -->
<meta name="author" content="hector">
<!-- 設置網站的跳轉 -->
<!-- <meta http-equiv="refrest" content="2";url=https://www.
baidu.com -->
<title>頭部標簽</title>
<!-- 定義內部的CSS樣式 -->
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS樣式文件 -->
<link rel="stylesheet" href="CSS樣式文件的路徑">
<!-- 定義或引用腳本 -->
<<script>
alert("歡迎登錄")
</script>
<!-- 定義一個基礎路徑 -->
<base href="../image/">
</head>
<body>
IT教育，計算機等級考試--Hrctor
<img src="../image/google.png" alt="">
<img src="../image/p1.jpg" alt="">
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-445E4McR-1593240920362)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IoPZWeC1-1593240920363)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xsXKs86m-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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 特點</a></li>
<li><a href="#four">4 編輯方式</a></li>
<li><a href="#five">5 整體結構</a></li>
<li><a href="#six">6 相關要求</a></li>
</ol>
<p>
<a name="first">簡介</a>
</p>
<P>
HTML的英文全稱是 Hypertext Marked Language，即超文本標記語言。HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現在所見到的網頁。
</p>
<p>
自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網頁文件的語言，通過標記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內容顯示出來。事實上，每一個HTML文檔都是一種靜態的網頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。HTML的普遍應用就是帶來了超文本的技術―通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面，與世界各地主機的文件鏈接超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和進行的操作。HTTP協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。
</P>
<p><a name="second">HTML版本</a></p>
<p>HTML是用來標記Web信息如何展示以及其他特性的一種語法規則，它最初于1989年由GERN的Tim Berners-Lee發明。HTML基于更古老一些的語言SGML定義，并簡化了其中的語言元素。這些元素用于告訴瀏覽器如何在用戶的屏幕上展示數據，所以很早就得到各個Web瀏覽器廠商的支持。
</p>
<p>HTML歷史上有如下版本：
①HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布。<br>
②HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。 <br>
③HTML 3.2：1997年1月14日，W3C推薦標準。 <br>
④HTML 4.0：1997年12月18日，W3C推薦標準。<br>
⑤HTML 4.01（微小改進）：1999年12月24日，W3C推薦標準。<br>
⑥HTML 5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內容和富應用等方面的能力，被喻為終將改變移動互聯網的重要推手。<br>
</p>
<p><a name="three">特點</a></p>
<p>
超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下： [4]
簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。 [4]
可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 [4]
平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。 [4]
通用性：另外，HTML是網絡的通用語言，一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
</p>
<p><a name="four">編輯方式</a></p>
<p>
HTML其實是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為以下幾種：
基本文本、文檔編輯軟件，使用微軟自帶的記事本或寫字板都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣就方便瀏覽器認出直接解釋執行了。 [7]
半所見即所得軟件，如：FCK-Editer、E-webediter等在線網頁編輯器；尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開發，Sublime Text2收費但可以無限期試用）。 [7]
所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網頁，如：AMAYA（出品單位：萬維網聯盟）；FRONTPAGE（出品單位：微軟）；Dreamweaver（出品單位Adobe）。Microsoft Visual Studio（出品公司：微軟）：其中所見即所得軟件與半所見即所得的軟件相比，開發速度更快，效率更高，且直觀的表現更強。任何地方進行修改只需要刷新即可顯示。缺點是生成的代碼結構復雜，不利于大型網站的多人協作和精準定位等高級功能的實現。
</p>
<p><a name="five">整體結構</a></p>
<p>
一個網頁對應多個HTML文件，超文本標記語言文件以.htm（磁盤操作系統DOS限制的外語縮寫）為擴展名或.html（外語縮寫）為擴展名?？梢允褂萌魏文軌蛏蒚XT類型源文件的文本編輯器來產生超文本標記語言文件，只用修改文件后綴即可。標準的超文本標記語言文件都具有一個基本的整體結構，標記一般都是成對出現（部分標記除外例如：<br/>），即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用于頁面整體結構的確認。 [10]
標記符<html>，說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的，它是文件的開頭;而</html>，則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。
</p>
<p><a name="six">相關要求</a></p>
<p>
在編輯超文本標記語言文件和使用有關標記符時有一些約定或默認的要求。 [9]
文本標記語言源程序的文件擴展名默認使用htm（磁盤操作系統DOS限制的外語縮寫為擴展名）或
html（外語縮寫為擴展名），以便于操作系統或程序辨認，除自定義的漢字擴展名。在使用文本編輯器時，注意修改擴展名。而常用的圖像文件的擴展名為gif和jpg。 [9]
超文本標記語言源程序為文本文件，其列寬可不受限制，即多個標記可寫成一行，甚至整個文件可寫成
一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號（實體符）“ （注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。 [9]
標記符中的標記元素用尖括號括起來，帶斜杠的元素表示該標記說明結束；大多數標記符必須成對使用，以表示作用的起始和結束；標記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號“ （注意此字母必須小寫，方可空格）”；許多標記元素具有屬性說明，可用參數對元素作進一步的限定，多個參數或屬性項說明次序不限，其間用空格分隔即可；一個標記元素的內容可以寫成多行。 [9]
標記符號，包括尖括號、標記元素、屬性項等必須使用半角的西文字符，而不能使用全角字符。 [9]
HTML注釋由"<!--"號開始，由符號”-->“結束結束，例如<!--注釋內容-->。注釋內容可插入文本中任何位置。任何標記若在其最前插入驚嘆號，即被標識為注釋，不予顯示。
</p>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nQwkft9w-1593240920364)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例13.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="13.錨點鏈接.html#first" target="_blank">
簡介</a></li>
<li><a href="13.錨點鏈接.html#second" target="_blank">
HTML版本</a></li>
<li><a href="13.錨點鏈接.html#three" target="_blank">
特點</a></li>
<li><a href="13.錨點鏈接.html#four" target="_blank">
編輯方式</a></li>
<li><a href="13.錨點鏈接.html#five" target="_blank">
整體結構</a></li>
<li><a href="13.錨點鏈接.html#six" target="_blank">
相關要求</a></li>
</body>
</html>123456789101112131415161718192021效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4Z1Yrksq-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例14.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../image/hh.gif">點擊此處下載圖片</a>
<br>
<a href="mailto:422133899@qq.com">聯系我們</a>
</body>
</html>123456789101112效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b7NrHKsq-1593240920367)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-53fwwown-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁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>學生基本信息表</h2></caption>
<<thead bgcolor="cyan">
<td>學號</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">合計</td>
<td colspan="3">4</td>
</tfoot>
</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例03.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用戶注冊</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="注 冊">
<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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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>
學 歷：
<select name="degree">
<option value="0">--請選擇你的學歷--</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">濟南</option>
<option value="qingdao">青島</option>
<option value="rizhao">日照</option>
</optgroup>
<optgroup label="江蘇省">
<option value="nanjing">南京</option>
<option value="suzhou">蘇州</option>
<option value="yangzhou">揚州</option>
</optgroup>
</select>
<br>
服務協議；
<textarea name="introduce" rows="10" cols="100" readonly>
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
請遵守本網站的相關協議和國家的法律法規...
</textarea>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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>個人信息</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>
學號：<input type="text" name="stuld"><br>
學校：<input type="text" name="stuSchool"><br>
專業：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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>標題</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>腳注</footer>
</article>
<aside>廣告</aside>
<figure>
<figcaption>log標識</figcaption>
<img src="../../image/facebook.png" alt="">
<img src="../../image/google.png" alt="">
</figure>
<nav>
<ul>
<li>網頁</li>
<li>咨訊</li>
<li>視頻</li>
<li>圖片</li>
<li>知道</li>
<li>貼吧</li>
<li>采購</li>
<li>地圖</li>
</ul>
</nav>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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日">情人節</time>有個會!
<hr>
<details>
<summary>HTML簡介</summary>
<p>HTML是一門用來制作網頁的標簽語言</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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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">個人主頁:</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">電話：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keywords">關鍵字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">數字：</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="請輸入用戶名" 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效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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標簽，請更換瀏覽器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster
="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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">關鍵字:</label>
<input type="search" name="keywords" id="keywords">
<br>
<label for="num">數字：</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="請輸入用戶名" 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```
效果
[外鏈圖片轉存中…(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標簽，請更換瀏覽器
</audio>
<video src="../../video/volcano.mp4" controls="" width="400px" poster
="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718效果
[外鏈圖片轉存中…(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
文同步本人掘金平臺的文章：https://juejin.cn/post/6844903569317953550
許多的OO語言都支持兩種繼承方法：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。由于函數沒有簽名，在ECMAScript中無法實現接口繼承。ECMAScript只支持實現繼承，而且實現主要是依靠原型鏈來實現的。[p162]
原型鏈的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。回顧下構造函數、原型和實例的關系: 每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
}
function SubType(){
this.subProperty = false;
}
// 繼承了SuperType,重點哦
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.subProperty;
}
var instance = new SubType();
console.log(instance.getSuperValue()); // true
復制代碼原型鏈繼承帶來兩個問題：一是原型實際上變成了另一個類型的實例，于是，原先的實例屬性也就變成了現在原型的屬性，共享了屬性。二是在創建子類型的實例時，不能在沒有影響所有對象實例的情況下向超類型的構造函數傳遞參數。
借用構造函數解決原型鏈繼承帶來的不能向構造函數傳遞倉鼠的問題。這里使用到了apply()或者call()方法在新創建的對象上執行構造函數。
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'
復制代碼上面的例子中，我在父類型構造函數中沒有傳參數，看者感興趣的話可以自己加下參數來實驗一番咯。
借用構造函數解決了原型鏈繼承的確定，但是又沒有接納原型鏈的優點：共享。下面的組合繼承結合了原型鏈和借用構造函數，容納了兩者的優點。
組合繼承的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。
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; // 避免重寫構造函數指向錯誤
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
復制代碼組合繼承避免了原型鏈和借用構造函數的缺陷，融合了它們的優點，成為了JavaScript中最常用的繼承模式。而且，instanceof和isPrototypeOf()也能夠用于識別基于組合繼承創建的對象。
原型式繼承是借助原型可以基于已有的對象創建新對象，同時還不必因此創建自定義的類型。
function object(o){ // 傳入一個對象
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'
復制代碼寄生式繼承是與原型繼承緊密相關的一種思路。寄生式繼承的思路與寄生構造函數和工廠模式類似，即是創建了一個僅用于封裝繼承過程的函數，該函數在內部以某種方式來增強對象，最后再像真的做了所有工作一樣返回對象。
function object(o){ // 傳入一個對象
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'
復制代碼上面的例子中，新對象anotherPerson不僅具有person的所有屬性和方法，而且還有了自己的sayHi()方法。
組合繼承是JavaScript最常用的繼承模式；不過，它也有自己的不足。組合繼承最大的問題就是無論什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部。寄生組合式繼承能夠解決這個問題。
所謂寄生組合式繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法。其背后的基本思路是不必為了指定子類型的原型而調用超類型的構造函數，我們所需要的無非就是超類型的原型的一個副本而已。寄生組合式繼承的基本模式如下：
function inheritPrototype(subType,superType){
var prototype = Object(superType.prototype); // 創建對象
prototype.constructor = subType; // 增強對象，防止下面重寫constructor屬性
subType.prototype = prototype; // 指定對象
}
復制代碼一個完整的例子如下,相關插圖見書[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); // 只在這調用了一次超類型的構造函數
this.age = age;
}
inheritPrototype(SubType , SuperType);
SubType.prototype.sayAge = function(){
console.log(this.age);
}
var instance = new SubType('nicholas' , 29);
復制代碼上面的例子的高效處體現在它只調用了一次SuperType構造函數，并且避免了在SubType.prototype上創建不必要的，多余的屬性。與此同時，原型鏈還能保持不變；因此還能正常使用instanceof和inPrototypeOf()。開發人員普遍認為寄生組合式繼承是引用類型最理想的繼承范式。
閉包是指有權訪問另一個函數作用域中的變量的函數。我的理解是，函數內的函數使用到外層函數的變量延長變量的生存時間，造成常駐內存。例子見下：
function foo(){
var a = 2;
return function(){
a += 1;
console.log(a);
}
}
var baz = foo();
baz(); // 3
baz(); // 4
baz(); // 5
baz(); // 6
復制代碼上面的例子中，外部的函數foo()執行完成之后，正常的情況下應該銷毀a變量的，但是內部的返回的匿名函數使用到該變量，不能銷毀。如果需要銷毀的話，可以改寫成下面：
function foo(){
var a = 2;
return function(){
a += 1;
console.log(a);
}
}
var baz = foo();
baz(); // 3
baz = null; // 將內部的匿名函數賦值為空
復制代碼談到了閉包，這讓我想起了不久前刷知乎看到一篇文章。自己整理如下：
for(var i = 0 ; i < 5; i++){
setTimeout(function(){
console.log(i);
},1000)
}
console.log(i);
// 5,5,5,5,5,5
復制代碼上面的代碼是輸出了6個5，而這6個5是這樣執行的，先輸出全局中的console.log(i)，然后是過了1秒種后，瞬間輸出了5個5（為什么用瞬間這個詞呢，怕看者理解為每過一秒輸出一個5）。解讀上面的代碼的話，可以通過狹義范圍(es5)的理解：同步 => 異步 => 回調 （回調也是屬于異步的范疇，所以我這里指明了狹義啦）。先是執行同步的for,遇到異步的setTimeout(setTimeout和setInterval屬于異步哈)后將其放入隊列中等待，接著往下執行全局的console.log(i)，將其執行完成后執行異步的隊列。
追問1:閉包
改寫上面的代碼，期望輸出的結果為：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
復制代碼上面的代碼巧妙的利用IIFE(Immediately Invoked Function Expression:聲明即執行的函數表達式)來解決閉包造成的問題，閉包的解析看上面。
方法二：利用js中基本類型的參數傳遞是按值傳遞的特征，改造代碼如下
var output = function(i){
setTimeout(function(){
console.log(i);
},1000);
};
for(var i = 0; i < 5; i++){
output(i); // 這里傳過去的i值被復制了
}
console.log(i);
// 5,0,1,2,3,4
復制代碼上面改造的兩個方法都是執行代碼后先輸出5，然后過了一秒種依次輸出0,1,2,3,4。
如果不要考慮全局中的console.log(i)輸出的5，而是循環中輸出的0,1,2,3,4。你還可以使用ES6的let塊級作用域語法,實現超級簡單:
for(let i = 0; i < 5; i++){
setTimeout(function(){
console.log(i);
},1000);
}
// 0,1,2,3,4
復制代碼上面是過了一秒鐘后，依次輸出0,1,2,3,4。這種做法類似于無形中添加了閉包。那么，如果使用ES6語法的話，會怎樣實現5,0,1,2,3,4呢？
追問2:ES6
改造剛開始的代碼使得輸出的結果是每隔一秒輸出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
復制代碼上面的代碼簡單粗暴，但是不推薦?？搭}目是每隔一秒輸出一個值，再回調實現最后的5輸出，這個時候應該使用ES6語法來考慮，應該使用Promise方案：
const tasks = [];
for(var i = 0; i < 5; i++){// 這里的i聲明不能改成let，改成let的話請看下一段代碼
((j)=>{
tasks.push(new Promise((resolve)=>{ // 執行tasks
setTimeout(()=>{
console.log(j);
resolve(); // 這里一定要resolve,否則代碼不會按照預期執行
},1000*j);
}))
})(i);
}
Promise.all(tasks).then(()=>{ // 執行完tasks，回調
setTimeout(()=>{
console.log(i);
},1000);
});
// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
復制代碼如果是使用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
復制代碼上面的代碼比較龐雜，可以將其顆粒話，模塊化。對上面兩段代碼的帶var那段進行改造后如下：
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
復制代碼追問3:ES7
既然ES6的Promise可以寫，那么ES7是否可以寫呢，從而讓代碼更加簡潔易讀？那就使用到到了異步操作的async await特性啦。
// 模擬其他語言中的sleep，實際上可以是任何異步操作
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
復制代碼IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性，分別表示瀏覽器窗口相對于屏幕左上角和上邊的位置[p197]。Firefox則以screenX和screenY屬性來表示。為了兼容各個瀏覽器，可以入下面這樣寫：
var leftPos = (typeof window.screenLeft == "number")?window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;
復制代碼由于瀏覽器廠商以及歷史的問題，無法確認瀏覽器本身的大小，但是可以取得視口的大小[p198]。如下：
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == 'CSS1Compat'){ // 標準模式下的低版本ie
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{ // 混雜模式下的chrome
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
復制代碼上面的示例可以簡寫成下面這樣：
var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientHeight;
var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
復制代碼為繪制上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果。[p453]
可通過下面的方法來修改變換矩陣:
關于JSON，最重要的是要理解它是一種數據格式，不是一種編程語言。
先來看下對象字面量demo寫法：
var person = {
name : "nicholas",
age : 29
};
# 上面的代碼也可以寫成下面的
var person = {
"name" : "nicholas",
"age" : 29
};
復制代碼而上面的對象寫成數據的話，就是下面這樣了：
{
"name": "nicholas ",
"age": 29
}
# 可到網站 https://www.bejson.com/ 驗證
復制代碼?? 與JavaScript對象字面量相比，JSON對象又兩個地方不一樣。首先，沒有聲明變量(JSON中沒有變量的概念)。其次，沒有分號(因為這不是JavaScript語句，所以不需要分號)。留意的是，對象的屬性必須加雙引號(不是單引號哦)，這在JSON中是必須的。
可以這么理解：JSON.stringify()是從一個object中解析成JSON數據格式，而JSON.parse()是從一個字符串中解析成JSON數據格式。
var person = {
name: 'nicholas',
age: 29
};
var jsonText = JSON.stringify(person);
console.log(jsonText);
// {"name":"nicholas","age":29}
復制代碼var strPerson = '{"name":"nicholas","age":29}';
var jsonText = JSON.parse(strPerson);
console.log(jsonText); // { name: 'nicholas', age: 29 }
復制代碼XMLHttpRequest對象用于在后臺與服務器交換數據。它是Ajax技術的核心[p571]。
XMLHttpRequest對象能夠使你：
XMLHttpRequest的使用：
# 創建XHR對象 => open()準備發送 => send()傳送數據
// 創建對象，對瀏覽器做兼容
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對象
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();
// 準備發送數據
xhr.open("get","path/to/example.txt",false);// 非異步，異步的話第三個參數改為true
// 傳送數據
xhr.send(null); // get方法不需要傳數據
// 判斷狀態嘛，獲取服務器返回的數據
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log("Request was nsuccessful : " + xhr.status);
}
復制代碼何為跨域呢？只要訪問的資源的協議、域名、端口三個不全相同，就可以說是非同源策略而產生了跨域了，這是狹義的說法。廣義的說法：通過XHR實現Ajax通信的一個主要限制，來源于跨域的安全策略；默認情況下,XHR對象只能訪問包含它的頁面位于同一個域中的資源[p582]。注：部分文字和代碼引用自前端常見跨域解決方案（全）
CORS（Cross-Origin Resource Sharing，跨資源共享）定義了在必須訪問跨資源時，瀏覽器與服務器應該如何溝通。其背后的基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。 復雜的跨域請求應當考慮使用它。
普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無需設置，如果要帶cookie請求：前后端都要設置。
1.前端設置
1.) 原生ajax
function createCORSRequest(method,url){ // 兼容處理，ie8/9需要用到window.XDomainRequest
var xhr = new XMLHttpRequest();
// 前端設置是否帶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請求
var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if(request){
request.onload = function(){
// 對request.responseText 進行處理
};
request.send();
}
// post請求，帶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);
}
};
復制代碼2.)jquery ajax
上面寫了一大堆原生的，看得頭都有點大了，還是使用jquery ajax 比較舒服:
$.ajax({
...
xhrFields: {
withCredentials: true // 前端設置是否帶cookie
},
crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie
...
});
復制代碼3.) vue框架
在vue-resource封裝的ajax組建中加入以下代碼:
Vue.http.options.credentials = true;
復制代碼2.服務器設置
若后端設置成功，前端瀏覽器控制臺上就不會出現跨域報錯的信息，反之，說明沒有成功。
1.） java后臺
/*
* 導入包：import javax.servlet.http.HttpServletResponse;
* 接口參數中定義：HttpServletResponse response
*/
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需寫全（協議+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");
復制代碼2.) node后臺
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
var postData = '';
// 數據塊接收中
req.addListener('data', function(chunk) {
postData += chunk;
});
// 數據接收完畢
req.addListener('end', function() {
postData = qs.parse(postData);
// 跨域后臺設置
res.writeHead(200, {
'Access-Control-Allow-Credentials': 'true', // 后端允許發送Cookie
'Access-Control-Allow-Origin': 'http://www.domain1.com', // 允許訪問的域（協議+域名+端口）
'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...');
復制代碼JSONP是JSON with padding(填充式JSON或參數式JSON)的簡寫，是應用JSON的一種新方法，在后來的web服務中非常流行。簡單的跨域請求用JSONP即可。
通常為了減輕web服務器的負載，我們把js,css,img等靜態資源分離到另一臺獨立域名的服務器，在html頁面中再通過相應的標簽從不同域名下加載靜態資源，而被瀏覽器允許，基于此原理，我們可以通過動態創建script，再請求一個帶參網址實現跨域通信。
1.前端實現
1.）原生實現
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參并指定回調執行函數為onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回調執行函數
function onBack(res){
console.log(JSON.stringify(res));
}
</script>
復制代碼服務器返回如下（返回時即執行全局函數）：
onBack({"status": true,"user":"admin"})
復制代碼2.）jquery ajax
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 請求方式為jsonp
jsonpCallback: 'onBack', // 自定義回調函數名
data: {}
});
復制代碼3.）vue.js
this.$http.jsonp('http://www.domain2.com:8080/login',{
params: {},
jsonp: 'onBack '
}).then((res)=>{
console.log(res);
});
復制代碼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返回設置
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 ...');
復制代碼?? jsonp缺點：只能實現get一種請求。
WebSocket protocol 是 HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信，同時允許跨域通訊。
原生的WebSocket API使用起來不太方便，示例中使用了socket.io，它很好的封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持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() {
// 監聽服務端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 監聽服務端關閉
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
復制代碼2.node socket后臺
var http = require('http');
var socket = require('socket.io');
// 啟http服務
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...');
// 監聽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.');
});
});
復制代碼requestAnimationFrame 創建平滑的動畫[p682]。在此之前都是使用setTimeout或者setInterval實現，requestAnimationFrame與它們相比：
使用的示范如下：
爬蟲設計中，H5頁面是指使用HTML5技術構建的網頁。以下是幾個關于H5的爬蟲設計示例：
python復制代碼import requests from bs4 import BeautifulSoup url = 'http://example.com' # 目標H5頁面的URL response = requests.get(url) soup = BeautifulSoup(response.text, 'html.parser') # 使用BeautifulSoup解析H5頁面的內容 # ...首先，確保已經安裝了Scrapy框架。然后，創建一個新的Scrapy項目，并在spiders目錄下創建一個新的爬蟲文件，例如h5_spider.py。在爬蟲文件中，可以使用Scrapy提供的API來爬取H5頁面。
python復制代碼import scrapy class H5Spider(scrapy.Spider): name = 'h5' allowed_domains = ['example.com'] # 允許爬取的域名 start_urls = ['http://example.com'] # 起始URL def parse(self, response): # 使用response對象處理H5頁面的內容 # ...對于動態加載的H5頁面，使用常規的爬蟲方法可能無法獲取完整的內容。在這種情況下，可以使用Selenium模擬瀏覽器的行為來獲取完整的H5頁面。首先，確保已經安裝了Selenium庫。然后，使用以下代碼示例：
python復制代碼from selenium import webdriver from selenium.webdriver.chrome.options import Options import time url = 'http://example.com' # 目標H5頁面的URL chrome_options = Options() chrome_options.add_argument('--headless') # 在后臺運行瀏覽器，不彈出窗口 driver = webdriver.Chrome(options=chrome_options) # 創建瀏覽器實例 driver.get(url) # 打開目標頁面 time.sleep(2) # 等待頁面加載完成，根據實際情況調整等待時間 html = driver.page_source # 獲取完整的H5頁面內容 driver.quit() # 關閉瀏覽器實例 # 處理獲取到的H5頁面內容 # ...這些示例展示了使用不同方法來爬取H5頁面的基本思路。根據具體的頁面結構和需求，你可能需要進一步調整代碼以處理頁面內容
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
