第一章
1饮焦、使用瀏覽器去訪問的程序栓撞，叫網(wǎng)頁
2絮蒿、web代碼存放在服務器
? 代碼分為兩種：① 運行在瀏覽器端：前端代碼
? ? ? ? ? ? ? ? ? ? ? ? ② 運行在服務器端：后端代碼
? 完整的網(wǎng)站包括兩部分：前端+后臺
3、技術
? ? ① 靜態(tài)頁面（按照產(chǎn)品設計圖來編寫網(wǎng)頁 .html湾蔓，網(wǎng)頁的技術：html,css）
? ? ② 添加功能：動態(tài)特效，頁面交互陕赃。技術：javascript,jQuery,DOM
? ? ③ 和服務器交互卵蛉。技術：server,php,ajax
4颁股、復雜開發(fā)：html5高級，框架(提高代碼效率)(bootstrap, node.js,?angular.js)傻丝，移動端開發(fā)甘有，微信開發(fā)
1、HTML(超文本標記語言 Hyper Text Markup Language)是網(wǎng)頁內(nèi)容的載體
? ? 內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息葡缰，可以包含文字亏掀、圖片、視頻等
2泛释、CSS(層疊樣式表 Cascading Style Sheets)樣式是表現(xiàn)
? ? 就像網(wǎng)頁的外衣滤愕，比如標題字體、顏色變化怜校、為標題加背景圖片间影、邊框等，所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)
3茄茁、JavaScript(腳本語言)用來實現(xiàn)網(wǎng)頁上的特效效果
? ? 如焦點新聞的輪換
4魂贬、PHP(超文本預處理器 Hypertext Preprocessor)是一種通用開源的腳本語言
? ? 現(xiàn)在的PHP是網(wǎng)站制作的綜合稱呼，其包括HTML(DIV+CSS)裙顽、JS(jQuery付燥、ajax)、PHP愈犹、MySQL键科、Apache等技術
5、軟件(software)是一系列按照特定順序組織的計算機數(shù)據(jù)和指令的集合
? ? ① C/S軟件(Client/Server?客戶機/服務器)?由程序員開發(fā)漩怎，由用戶下載勋颖、安裝、升級勋锤、維護的軟件牙言，如QQ、PS怪得、DW咱枉、YY
? ? ② B/S結(jié)構(gòu)(Browser/Server?瀏覽器/服務器模式)?用瀏覽器打開，由程序員開發(fā)徒恋，由程序員升級蚕断、維護的軟件，如網(wǎng)站入挣、圖書管理系統(tǒng)
_______________________________________________________________________________________
<noscript></noscript>? 用來定義腳本未被執(zhí)行時的替代內(nèi)容(文本)亿乳，可被用于可識別<script>標簽但無法支持其中的腳本的瀏覽器
注：如果瀏覽器支持腳本，則不會顯示出?noscript?元素中的文本
如：<noscript>請開啟瀏覽器的JavaScript功能，或使用支持JavaScript的瀏覽器訪問</noscript>
將favicon.ico作為網(wǎng)站的title標識
<link?rel="icon"?href="static/images/favicon.ico"?type="image/x-icon" />
<link rel="shortcut?icon"?href="static/images/favicon.ico"?type="image/x-icon" />
注意:?一般不需要在html中加此標識葛假，只需要在web根目錄添加一個favicon.ico即可
____________________________________________________________________________________
WWW(World Wide Web)萬維網(wǎng)：通過網(wǎng)絡訪問網(wǎng)頁
telnet：遠程登錄
BBS：電子公告板障陶，俗稱論壇
實現(xiàn)技術原理：分組交換原理、TCP/IP協(xié)議簇
web指在網(wǎng)絡環(huán)境下的應用程序聊训，俗稱網(wǎng)頁抱究，由瀏覽器(Browser)、服務器(Server)带斑、通信協(xié)議(http)組成
主流瀏覽器(5款)：Chrome鼓寺，IE，F(xiàn)irefox勋磕，Safari妈候，Opera
360瀏覽器：雙核：基于IE和Chrome
Apple Safari：蘋果瀏覽器
瀏覽器功能：1、提交請求
? ? ? ? ? ? ? ? ? ?2挂滓、解析HTML苦银、CSS、JavaScript
? ? ? ? ? ? ? ? ? ?3赶站、能以圖形化的方式顯示文檔
服務器功能：1墓毒、存儲Web上的信息
? ? ? ? ? ? ? ? ?? 2、響應瀏覽器請求并執(zhí)行服務器程序
? ? ? ? ? ? ? ? ?? 3亲怠、具備基本的安全性功能
常用的服務器：Tomcat、IIS柠辞、Apache团秽、Nginx
____________________________________________________________________________________
HTML：Hyper Text Markup Language超文本（具備特殊功能）標記（超文本的組成形式）語言（擁有自己的語法結(jié)構(gòu)）
以 .html 或 .htm 結(jié)尾
腳本語言：javascript，vbscript
1叭首、基礎語法：在HTML中习勤，用于描述功能的符號稱為標記，必須用<>括起來
? ? ① 封閉類型標記必須成對出現(xiàn)
? ? ②非封閉類型標記也稱為空標記焙格、單標記图毕，如：<標記>或<標記/>
? ? ③ <!--注釋--> ? ?代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看這段代碼眷唉，能很快回憶起來這段代碼的用途
2予颤、元素嵌套：① 注意嵌套順序（完整嵌套）
? ? ? ? ? ? ? ? ? ? ?② 注意嵌套代碼的縮進（用Tab鍵/空格縮進）
3、屬性和值：屬性用來修飾元素的
? ? 語法：<標記 屬性="值" 屬性="值"></標記>
? ? 標準屬性：又稱為通用屬性冬阳，頁面上所有的標記都會具備的屬性
? ? ? ? ? ? ? ? ? ? ①id? ? ? ?頁面元素獨一無二的標識
? ? ? ? ? ? ? ? ? ? ②title??鼠標移入到元素上時所顯示的內(nèi)容
? ? ? ? ? ? ? ? ? ? ③class(css中使用) ?? 定義元素的類選擇器
? ? ? ? ? ? ? ? ? ? ④style(css中使用) ?? 定義元素內(nèi)聯(lián)樣式
4蛤虐、注釋：不會被瀏覽器解析運行（解釋說明，便于維護）
? ? 注意：① 注釋不能嵌套注釋
? ? ? ? ? ?? ② 注釋不能位于<>中
5肝陪、文檔結(jié)構(gòu)
? ? ① 文檔類型聲明
? ? ? ? 作用：指定文檔的版本和類型
? ? ? ? 語法：放在頁面最頂端：<!doctype html>
? ? ② html頁面
? ? ? ? 語法：<html></html>
? ? ? ? 又稱為 html根標簽
? ? ? ? 內(nèi)容：有兩個子元素
? ? ? ? 1驳庭、<head></head>
? ? ? ? ? ? 網(wǎng)頁頭部：是其它頭元素的標記
? ? ? ? ? ? 作用：定義頁面中的全局信息
? ? ? ? ? ? 包含內(nèi)容：①<meta charset="utf-8">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作用：指定網(wǎng)頁的編碼格式為utf-8，告訴瀏覽器按照utf-8的格式解析內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 注意：網(wǎng)頁文件的編碼也必須為 utf-8
? ? ? ? ? ? ? ? ? ? ? ? ? ? ② <meta name="keywords" content="關鍵字的位置">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ③ <meta name="descoration" content="描述位置">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ④ <script></script>定義或引入JS文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑤ <style>定義內(nèi)部樣式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑥ <link>引入外部樣式
? ? ? ? ? ? ? ? ? ? ? ? ? ? ⑦<title>網(wǎng)頁標題</title>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作用：定義頁面中的標題信息
? ? ? ? 2、<body></body>
? ? ? ? ? ? 網(wǎng)頁主體：顯示頁面的主體內(nèi)容
? ? ? ? ? ? 屬性：① text：控制整個頁面的文本顏色
? ? ? ? ? ? ? ? ? ?? ② bgcolor：控制整個頁面的背景顏色
____________________________________________________________________________________
文本標記
1饲常、特殊字符
xss漏洞,例如: 瀏覽器接收到js的<,認為是html標簽的開始蹲堂，會把接收到的字符串當腳本執(zhí)行
? ? ① 在html中，任意多個空格贝淤，和回車柒竞，最后都會被解析成1個空格
? ? ② 由<>所包裹的文本，會當成標記被解析
? ? ③ 通過轉(zhuǎn)義字符的特殊表現(xiàn)方式表示特殊效果
顯示結(jié)果 ? ? ? ? ? ? ? ? ?實體名稱 ? ? ? ?實體編號
?<（less than）? ? ? ??<? ? ? ? ? ?<
?>（greater than）? ?>? ? ? ? ? ?>
?空格? ? ? ? ? ? ? ? ? ? ?? ? ? ? ?  ? ?（較大的空格,小空格不需要轉(zhuǎn)義）
??? ? ? ? ? ? ? ? ? ? ? ? ??©
?￥? ? ? ? ? ? ? ? ? ? ? ? ? ?¥? ? ? ? ?¥
?××
?&? ? ? ? ? ? ? ? ? ? ? ? ? ? ?&? ? ? ?&
?"? ? ? ? ? ? ? ? ? ? ? ? ? ? ??"? ? ? ?"
?'? ? ? ? ? ? ? ? ? ? ? ? ? ??'(IE不支持)'
注：實體名稱易于記憶霹娄，但瀏覽器支持性沒有實體編號好
2能犯、文本樣式
?<b></b>? ? ? ??加粗
?<i></i>? ? ? ? ??斜體
?<u></u>? ? ? ? ?下劃線
?<s></s>? ? ? ? ?刪除線
?<sup></sup>??上標
?<sub></sub>??下標
? <em></em> ? ? 斜體，強調(diào)
? <strong></strong> ?粗體犬耻，強調(diào)
? <q></q> ? ? ? ? ?引用文本(簡短文本)
? <blockquoto></blockquoto> ?引用長文本
? <address></address> ?聯(lián)系地址信息踩晶，斜體
? <code></code> ?一行代碼
? <pre></pre> ? ? ?多行的代碼段，會保留空格和回車枕磁，用來展示源代碼
3渡蜻、標題元素
? ? 作用：以標題的方式顯示文本
? ? 表現(xiàn)方式：① 垂直的空白間距
? ? ? ? ? ? ? ? ? ? ② 改變字體大小，加粗顯示
? ? ? ? ? ? ? ? ? ? ③ 獨占一行
? ? 語法：<hn></hn> ? ? ? ? ? ?? n：1~6
? ? ? ? ? ?? <h1></h1> ?? 1級標題
? ? ? ? ? ?? ……
? ? ? ? ? ?? <h6></h6> ?? 6級標題
4计济、段落元素
? ? 作用：以段落的形式顯示文本
? ? 語法：<p></p>
? ? 表現(xiàn)形式：① 具備垂直空白間距
? ? ? ? ? ? ? ? ? ? ② 獨占一塊
5茸苇、換行元素
? ? 語法：<br>或<br/>
6、分割線元素
? ? 作用：在頁面中顯示線條
語法：<hr/>
? ? 屬性：① size ? ?? 尺寸沦寂，大小(以 px 為單位)
? ? ? ? ? ?? ② width ?? 寬度(以 px 為單位)
? ? ? ? ? ? ?③ align ? ? 線條的水平對齊方式学密，取值：left,center,right（默認居中顯示）
? ? ? ? ? ?? ④ color ? ? 顏色
7、預格式化
作用：保留源文檔中的格式传藏。即保留源文檔中所有的回車和空格
語法：<pre></pre>
8腻暮、塊分區(qū)元素：div
? ? 作用：為元素分組，實現(xiàn)網(wǎng)頁布局
? ? 語法：<div></div>
? ? 表現(xiàn)形式：① 獨占一行
? ? ? ? ? ? ? ? ? ? ② 無任何文本顯示效果
9毯侦、行內(nèi)分區(qū)元素：span
? ? 作用：設置同一行文本的不同效果
? ? 語法：<span></span>
? ? 表現(xiàn)形式：① 多個span元素顯示在同一行內(nèi)
? ? ? ? ? ? ? ? ? ? ② 無任何特殊效果
元素分類：塊級元素哭靖、行內(nèi)元素、行內(nèi)塊元素
① 塊級元素
? ? 默認情況下侈离，每個塊級元素獨占一行试幽，即元素前后都會有換行效果
? ? 元素的高度、寬度(默認為其父元素的100%)卦碾、行高蹦肴、頂部和底部邊距都可設置
? ? 如：p,div,h1~h6,pre,... ...
? ? 作用：用來做布局
? ? 注意：p標簽不能嵌套塊級元素(如div)
② 行內(nèi)元素
? ? 不會換行慕购，多個元素在一行內(nèi)顯示
? ? 元素的高度遮斥、寬度(是其所包含的文字和圖片的寬度)蛛芥、頂部和底部邊距不可設置
? ? 如：span,s,b,i,u,sup,sub,a,img... ...
? ? 作用：大部分的行內(nèi)元素用來處理文本的顯示效果
③?行內(nèi)塊元素
? ? 不會換行，和其它元素都在一行上
? ? 元素的高度宾濒、寬度腿短、行高、頂部和底部邊距都可設置
第二章*******************************************************************************
URL(Uniform Resource Locator)：即統(tǒng)一資源定位器，用來標識網(wǎng)絡中的資源位置橘忱，俗稱路徑
資源：網(wǎng)頁中要用到的文件赴魁，都叫資源
1、絕對路徑
? 網(wǎng)絡資源：通信協(xié)議+域名（IP地址）+文件目錄結(jié)構(gòu)+文件名稱 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? /
? 本機資源：從文件所在的最高盤符處開始查找? file:///盤符:/目錄路徑/文件名 ? ? ? ? ? ? ? ? /
2钝诚、相對路徑(更簡潔)
? 同級目錄：直接引入 ? ? ? ? ? ? ? ?? / ?不加/,直接寫文件名也一樣
? 子級目錄：先進入颖御，再引用 ? ? ?? ./ ?當前目錄
? 父級目錄：先返回，再引用 ? ? ?? ../ 上一層目錄
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ../../../ ?? 向上返回三級
3凝颇、根相對路徑(網(wǎng)站發(fā)布時一般用這個)
? 從web站點的根目錄處開始查找 ? ? ?? 用 / 作為開始潘拱，表示web站點的根目錄
注意：① url 嚴格區(qū)分大小寫—（服務器嚴格區(qū)分，本機開發(fā)則無所謂）
? ? ? ?? ② url? 中不能出現(xiàn)中文
圖像：<img>或<img />
? 如果只改變img的width或height中的一個屬性的話拧略，那么另一個屬性會跟著等比縮放（一般只修改一個屬性或不修改屬性）
圖像格式：① jpeg/jpg ?? 聯(lián)合圖像專家組芦岂，有損壓縮，壓縮比率大
? ? ? ? ? ? ? ? ② gif ? ? ? ? ?? 動畫
? ? ? ? ? ? ? ? ③ png ? ? ? ?? 無損壓縮垫蛆，背景透明禽最，有8位、24位（不支持透明）袱饭、32位三種形式
屬性：① src ?? 圖像所在路徑（url）
? ? ? ?? ②?title ? 鼠標移動到元素上面時提示的文字
? ? ? ? ?③ alt ? ? 路徑出錯時顯示的文字
鏈接
1川无、語法：<a href="目標鏈接地址">內(nèi)容</a>
2、屬性：① href：鏈接的URL地址
? ? ? ? ? ? ? ②?title：?鼠標移動到鏈接上提示的文字
? ? ? ? ? ? ? ③ target：目標虑乖，指定打開新網(wǎng)頁的形式
? ? ? ? ? ? ? ? ? 取值：_blank ?? 在新標簽頁中打開
? ? ? ? ? ? ? ? ? ? ? ? ?? _self ? ? ? 在自身頁面中打開（默認值）
3懦趋、鏈接的其它表現(xiàn)形式
? ? ① 鏈接目標為資源下載：<a href="xxx.zip/rar">內(nèi)容</a> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //點擊下載資源
? ? ② 鏈接目標為電子郵件鏈接：<a href="mailto:zhaoxu@tedu.cn">聯(lián)系我們</a> ? ? ? ?//點擊打開郵箱
? ? ③ 調(diào)出手機撥號：<a href="tel:10086">10086</a>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //點擊撥號
? ? ④?返回頁面頂部的空鏈接：<a href="#">返回頁面頂部</a>
? ? ⑤ 鏈接到Javascript：<ahref="javascript:js腳本()">內(nèi)容</a>
? ? ? ? 比如: <a href="javascript:void(0)"></a> ? ? ?? 當做空鏈接
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?void是js的一個操作符。表示不執(zhí)行并返回undefined
? ? ⑥?錨點—————SPA單頁面應用的原理
? ? ? ? 作用：在網(wǎng)頁的任意位置處做記號疹味，方便頁面能夠隨時跳轉(zhuǎn)到標記位置處
? ? ? ? 使用步驟：1仅叫、定義錨點（做記號，要跳轉(zhuǎn)處）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ① 使用 a 元素的 name 屬性：<a name="錨點名稱">內(nèi)容</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ② 任意標記的 id 屬性：<div id="ID1">測試錨點</div>
? ? ? ? ? ? ? ? ? ? ? ? 2佛猛、鏈接到錨點（點擊處）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ①<a href="#錨點名稱">內(nèi)容</a>? ? ??跳轉(zhuǎn)到本頁面錨點處
? ? ? ? ? ? ? ? ? ? ? ? ? ? ②<a href="頁面URL#錨點名稱">內(nèi)容</a>? ? ??跳轉(zhuǎn)到其它頁面的錨點處
跳轉(zhuǎn)到錨點后，url后面會加 #錨點名坠狡，可以用window.location.href=url+"#錨點名"继找，直接跳到錨點，本頁面不需加url逃沿，可用于在同一頁面切換不同的內(nèi)容(如SPA單頁面應用)
____________________________________________________________________________________
表格
一婴渡、表格的作用
? ? 按照一定的格式擺放數(shù)據(jù)
? ? 表格是由一些被稱為 "單元格" 的矩形框，按照從左到右凯亮，從上到下的順序排列到一起組成的
二边臼、創(chuàng)建表格
? ? 1、定義表格：<table></table>
? ? 2假消、創(chuàng)建表行：<tr></tr>
? ? 3柠并、創(chuàng)建列(單元格)：<td></td>
三、表格屬性
? ? 1、table 的屬性
? ? ? ? ① width ?? 寬度
? ? ? ? ② height ?? 高度
? ? ? ? ③ align ?? 設置表格的水平對齊方式(left / center / right)
? ? ? ? ④ border ? ?指定邊框?qū)挾染视瑁琾x作為單位鸣戴，可以省略px
? ? ? ? ⑤ cellpadding ?? 單元格內(nèi)邊距(單元格邊框與內(nèi)容之間的距離)
? ? ? ? ⑥ cellspacing ?? 單元格外邊距(單元格之間的距離)
? ? ? ? ⑦ bgcolor ?? 設置表格的背景顏色
? ? 2、tr 的屬性
? ? ? ? ① align ?? 設置該行內(nèi)容的水平對齊方式
? ? ? ? ② valign ?? 設置該行內(nèi)容的垂直對齊方式粘拾，取值：top / middle / bottom
? ? ? ? ③ bgcolor ?? 表格行的背景顏色
? ? 3窄锅、td 的屬性
? ? ? ? ① align ?? 該單元格內(nèi)容的水平對齊方式
? ? ? ? ② valign ?? 設置該單元格內(nèi)容的垂直對齊方式,取值：top|middle|bottom
? ? ? ? ③ width ?? 該單元格的寬度
? ? ? ? ④ height ?? 該單元格的高度
? ? ? ? ⑤colspan ? ? ?設置單元格跨列
? ? ? ? ⑥r(nóng)owspan ?? 設置單元格跨行
? ? ? ? 注意：每一列中的列寬都一致，以最寬的為準
? ? ? ? ? ? ? ? ?每一行中的行高都一致缰雇，以最高的為準
? ? 4入偷、表格標題
? ? ? ?<caption>標題</caption>
? ? ? ? 默認：表格上方居中顯示
? ? ? ? 注意：① <caption>必須緊隨<table>之后
? ? ? ? ? ? ? ?? ② 一個表格最多只能有一個標題，用以描述表格內(nèi)容
? ? 5械哟、<th></th> ?? 行標題或列標題疏之，放在tr中，替換td戒良，有加粗居中的效果
四体捏、表格的復雜應用
? ? 1、行分組：html中允許將表格內(nèi)容劃分為3個部分（可以把表格階段性加載出來）
? ? ? ? ① 表頭行分組：<thead></thead> ? ? ? ? ? ?默認粗體居中
? ? ? ? ② 表主體行分組：<tbody></tbody> ? ? ?? 表格下載完才會顯示
? ? ? ? ③ 表尾行分組：<tfoot></tfoot>
? ? ? ? ? ? 表格中最下方的一行或幾行糯崎，可以放在表尾行分組
? ? 注意：每個行分組中几缭，都允許包含一對或多對 tr 標記
? ? 2、不規(guī)則表格(colspan和rowspan只能使用HTML屬性)
? ? ? ? ①跨列：從指定的單元格位置處開始沃呢，橫向向右合并幾個單元格(包含自己)年栓，被合并掉的單元格要刪除
? ? ? ? ? ? 屬性：設置td的 colspan屬性
? ? ? ? ? ? 取值：要合并單元格的數(shù)量
? ? ? ? ②跨行：從指定的單元格位置處開始，縱向向下合并幾個單元格(包含自己)薄霜，被合并掉的單元格要刪除
? ? ? ? ? ? 屬性：設置td的 rowspan屬性
? ? ? ? ? ? 取值：要合并單元格的數(shù)量
? ? ? ? ③ 表格的嵌套：在單元格中允許放置另一個表格（td中）
? ? ? ? <table>
? ? ? ? ? <tr>
? ? ? ? ? ? <td> <div></div> </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ?<table>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? <td></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ?</table>
? ? ? ? ? ? </td>
? ? ? ? ? </tr>
? ? ? ? </table>
____________________________________________________________________________________
列表
1某抓、作用：將具有相似特征或具有先后順序的內(nèi)容按從左到右或從上到下的順序排列
2、列表的組成：所有的列表都由 "列表類型" 和 "列表項" 組成
? ? 列表類型：有序列表 和 無序列表
? ? 列表項：具體顯示在列表里面的內(nèi)容
3惰瓜、列表的使用
①有序列表
? ? ? ? 語法：列表類型：<ol></ol> ?（Order List）
? ? ? ? ? ? ? ?? 列表項： ?? <li></li> ?? （List Item）
? ? ? ? 屬性：1否副、type
? ? ? ? ? ? ? ? ? ? ? 作用：指定有序列表的列表項前標志的類型
? ? ? ? ? ? ? ? ? ? ? 取值：①1 ?? 指定類型為 數(shù)字(默認)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② a ? ? 指定類型為 小寫字母
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③ A ?? 指定類型為 大寫字母
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ④ i ? ? ?指定類型為 小寫羅馬數(shù)字
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ⑤ I ? ? 指定類型為 大寫羅馬數(shù)字
? ? ? ? ? ? ? ? ? 2、start
? ? ? ? ? ? ? ? ? ? ? 作用：指定起始編號
? ? ? ? ? ? ? ? ? ? ? 取值：阿拉伯數(shù)字
②無序列表
? ? ? ? 語法：列表類型：<ul></ul> ? ?（Unorder List）
? ? ? ? ? ? ? ?? 列表項： ? ?<li></li>
? ? ? ? 屬性：1崎坊、type
? ? ? ? ? ? ? ? ? ? ? 作用：指定列表類型
? ? ? ? ? ? ? ? ? ? ? 取值：① disc ? ? ? 實心圓(默認值)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② circle ? ? ?空心圓
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?③ square ?? 實心矩形
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ④ none ? ?? 沒有备禀，不顯示列表項
4、列表的嵌套：允許在一個列表中再嵌套另一個列表（被嵌套的列表要放在 li 中）
<ul>
? <li>列表項1</li>
? <li>列表項2
<ol>
? ? ?<li></li>
</ol>
? </li>
</ul>
5奈揍、自定義列表
? ? ① 作用：往往用于要給出一類事物的定義情形曲尸，如：名詞解釋、百科等
? ? ② 語法：<dl> ? ? ? 定義一個定義列表（dt男翰、dd放在這里面）
? ? ? ? ? ? ? ? ? ? <dt></dt> ? ?? 定義要解釋的專有名詞/術語
? ? ? ? ? ? ? ? ? ? <dd></dd> ?? 定義列表中對專有名詞/術語進行解釋的內(nèi)容
? ? ? ? ? ? ? ? ? </dl>
? ? ③ 使用場合：在 "圖文混排"時優(yōu)先使用定義列表
第三章*******************************************************************************
常用結(jié)構(gòu)標記
作用：html5中新提出的一組標記另患，專門用于構(gòu)建網(wǎng)頁布局
目的：取代div布局，提升布局代碼的語義性和可讀性蛾绎，避免頁面過于復雜昆箕，難以維護
1鸦列、<header>元素
① 語法：<header></header>
? ? ② 作用：用于定義文檔的頁眉，即位于頁面或某區(qū)域的頂部信息
? ? ? ? ? ? ? ? ? 取代<div id="header"></div>
2为严、<nav>元素
① 語法：<nav></nav>
? ? ② 作用：用于標識頁面的導航鏈接模塊
? ? ? ? ? ? ? ? ? 取代<div id="nav"></div>
3敛熬、<section>元素
① 語法：<section></section>
? ? ② 作用：標識內(nèi)容的小節(jié)，可以表示頁面的主體內(nèi)容模塊
? ? ? ? ? ? ? ? ? 取代<div id="main"></div>
4第股、<article>元素
① 語法：<article></article>
? ? ② 作用：定義獨立于文檔的其它內(nèi)容
? ? ? ? ? ? ? ? ? 比如：論壇中的帖子应民，博客或微博中的條目，用戶評論夕吻，音視頻诲锹，新聞信息
? ? ? ? ? ? ? ? ? 取代<div id="article"></div>
5、<footer>元素
① 語法：<footer></footer>
? ? ② 作用：用于定義頁面的底部信息
? ? ? ? ? ? ? ? ? 取代<div id="footer"></div>
6涉馅、<aside>元素
① 語法：<aside></aside>
? ? ② 作用：定義網(wǎng)頁任何一個位置的側(cè)邊欄信息
? ? ? ? ? ? ? ? ? 取代<div id="left_side"></div> ?和 ?<div id="right_side"></div>
注意：能使用結(jié)構(gòu)標記的地方归园，盡量使用結(jié)構(gòu)標記，無法被結(jié)構(gòu)標記所取代的稚矿，就用DIV來布局
____________________________________________________________________________________
表單
作用：用于顯示庸诱、收集信息，并提交信息到服務器晤揣，表單在頁面中是處于隱藏狀態(tài)的
完整的表單處理由兩部分組成：1桥爽、實現(xiàn)數(shù)據(jù)交互的可見界面元素
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 2、提交后的表單數(shù)據(jù)處理（服務器端）
表單元素
標記：<form></form>
屬性：
1昧识、action
? ? 定義表單被提交時發(fā)生的動作钠四，即提交給服務器處理程序的地址(服務器的url)，如save.php
? ? 具體取值要與服務器端人員協(xié)同完成跪楞，若省略不寫缀去，則默認提交給本頁
? ? 可用js改變action，提交到不同的頁面(服務器地址)
2甸祭、method提交方法
? ? 定義表單數(shù)據(jù)的提交方式
? ? 取值：①get(默認值)
? ? ? ? ? ? ? ? ? 1缕碎、明文提交，即所提交的數(shù)據(jù)是可以顯示在地址欄上的
? ? ? ? ? ? ? ? ? 2池户、安全性較低
? ? ? ? ? ? ? ? ? 3咏雌、有長度限制，最大為2KB
? ? ? ? ? ? ? ? ? 4煞檩、場合：向服務器要數(shù)據(jù)時使用get（搜索關鍵字提交）
②post
? ? ? ? ? ? ? ? ? 1处嫌、隱式提交栅贴，所提交的數(shù)據(jù)是不顯示在網(wǎng)頁的任何位置處(在Network中)
? ? ? ? ? ? ? ? ? 2斟湃、安全性相對較高
? ? ? ? ? ? ? ? ? 3、沒有長度限制
? ? ? ? ? ? ? ? ? 4檐薯、場合：① 數(shù)據(jù)提交給服務器進行處理時使用post
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ② 安全性要求較高的地方凝赛，必須用post
? ? ? ? ? ? ? ③ put注暗、delete ...
3、enctype
? ? 作用：指定表單數(shù)據(jù)的編碼方式（指定將什么樣的數(shù)據(jù)提交給服務器）
? ? 取值：①application/x-www-form-urlencoded
? ? ? ? ? ? ? ? ? 默認值墓猎，可以將表單中的普通字符捆昏、特殊字符、標點符號都進行二進制編碼毙沾，提交給服務器
? ? ? ? ? ?? ② multipart/form-data
? ? ? ? ? ? ? ? ? 可以將上傳的文件進行二進制編碼骗卜，提交給服務器(字符、特殊字符左胞、標點符號無法編輯提交)
? ? ? ? ? ? ? ? ? 場合：上傳文件時
? ? ? ? ? ?? ③ text/plain
? ? ? ? ? ? ? ? ? 只允許將普通數(shù)據(jù)提交給服務器寇仓，特殊字符不行
4、name：定義表單的名稱
5烤宙、id：定義唯一標識
____________________________________________________________________________________
表單控件（只會提交位于之間的控件）
作用：接收用戶輸入的數(shù)據(jù)遍烦，并且通過表單將其提交給服務器
自動提交時，只會提交 '有name屬性' 且 '未被禁用' 的控件的值
會提交：被選中的單選按鈕躺枕、復選框服猪，被選中的select的選項
reset按鈕不會被提交
表單控件的分類：1、input 元素
? ? ? ? ? ? ? ? ? ? ? ? ? 2拐云、<textarea></textarea> 多行文本域
? ? ? ? ? ? ? ? ? ? ? ? ? 3罢猪、<select> <option></option> </select> 選擇框(下拉，滾動)
? ? ? ? ? ? ? ? ? ? ? ? ? 4慨丐、其它元素
表單控件詳解
一坡脐、input 元素：用于收集用戶信息
標記：<input>或<input/>
? ? 主要屬性：（通有屬性，所有的input元素都具有的屬性）
? ? ? ? 1房揭、type? ?根據(jù)不同的type值备闲，來創(chuàng)建各種類型的輸入控件
? ? ? ? 2、name? 定義控件的名稱捅暴，提交給服務器使用(沒有name不會提交)
? ? ? ? 3恬砂、value? 控件的值，提交給服務器的值蓬痒，可設置為默認值
? ? ? ? 4泻骤、disabled?禁用控件，用戶不能獲取值梧奢，也不能提交給服務器
? ? ? ? ? ? ? ? ? ? ? ? ? ?注意：該屬性無值狱掂，只作為標識：<input disabled>
1、文本框與密碼框
文本框：<input type="text">
密碼框：<input type="password">
專有屬性：①maxlength? 限制輸入字符的最大數(shù)量亲轨，取值：數(shù)字
? ? ? ? ? ? ? ? ② readonly ? ? 只讀趋惨，不允許修改，允許被提交
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 注意：該屬性無值惦蚊，只作為標識：<input type="text" readonly>
? ? ? ? ? ? ? ? ③ name? 控件名稱器虾，由控件縮寫+控件作用組成讯嫂，如果不設置，則無法提交給服務器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文本框與密碼框兆沙，縮寫為：txt**
匈牙利命名法：1欧芽、表示用戶姓名的文本框 ?name="txtName"
? ? ? ? ? ? ? ? ? ? ? 2、表示用戶年齡的文本框 ?name="txtAge"
? ? ? ? ? ? ? ? ? ? ? 3葛圃、表示用戶密碼的密碼框 ?name="txtPassword" ?或?name="txtPwd"
? ? ? ? ? ? ? ? ④placeholder? 占位符（用來作為提示）
2千扔、單選按鈕與復選框
單選按鈕：<input type="radio">
? ? 復選框： ? <input type="checkbox">
專有屬性：①name?名稱，同時具有分組作用
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 注意：一組的單選按鈕或一組的復選框name屬性值要一致
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? radio縮寫為rdo**
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? checkbox縮寫為chk**
? ? ? ? ? ? ? ? ② value? 必給库正，被選中后提交的值(若沒有昏鹃，會以'on'作為value提交)
? ? ? ? ? ? ? ? ③ checked? 無值，設置默認被選中
3诀诊、按鈕
? ? 作用：代替用戶執(zhí)行一組動作
①提交按鈕：<input type="submit">將表單的控件數(shù)據(jù)提交給服務器洞渤，自動提交
②重置按鈕：<input type="reset">? ? ? 將表單控件的值恢復到初始化狀態(tài)
③普通按鈕：<input type="button">? ? 由用戶自己定義功能(使用JavaScript)
三種按鈕的共有屬性：① name ?? 定義按鈕名稱，縮寫為btn**
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ② value ?? 按鈕上的文字
? ? ④ 其他按鈕：1属瓣、圖片按鈕（提交功能）<input type="image">?屬性：src
? ? ? ? ? ? ? ? ? ? ? ? 2载迄、提交按鈕：<button>內(nèi)容</button>? ? ? ?自動提交
4、隱藏域與文件選擇框
? ? ① 隱藏域：<input type="hidden">
? ? ? ? 作用：要提交給服務器但是不想給用戶去看的數(shù)據(jù)抡蛙，可以放在隱藏域中护昧，縮寫為txt**
? ? ② 文件選擇框：<input type="file">
? ? ? ? 作用：上傳文件時使用，允許打開文件選擇框粗截，選擇文件進行上傳
? ? ? ? 屬性：name? 控件的名稱惋耙，縮寫為txt**
? ? ? ? 注意：1、form的method屬性必須為post
? ? ? ? ? ? ? ? ? 2熊昌、form的enctype屬性必須為multipart/form-data
? ? ? ? 事件：change绽榛，用戶選擇文件時觸發(fā)，可用window.URL.createObjectURL(this.files[0])獲取文件的url
二婿屹、textarea 文本域
作用：允許用戶輸入多行數(shù)據(jù)
語法：<textarea></textarea>
屬性：1灭美、name ? 定義控件的名稱，縮寫為txt**
? ? ? ? ? 2昂利、readonly ?? 只讀届腐，但能提交值給服務器
? ? ? ? ? 3、cols ? ? 指定文本域的列數(shù)蜂奸，變相設置控件的寬度
? ? ? ? ? 4犁苏、rows ?? 指定文本域的行數(shù)，變相設置控件的高度
三扩所、select 和 option
<select>
? ?<option>選項</option>
</select>
1围详、選擇框：<select></select>
? ? 作用：創(chuàng)建選項框（滾動列表）
? ? 屬性：①name? 名稱，縮寫sel**碌奉，用于提交服務器
? ? ? ? ? ?? ② size? 指定選項框默認能顯示的選項數(shù)量短曾，默認值為1，如果大于1的話赐劣，則為滾動條列表
? ? ? ? ? ? ?③multiple 該屬性無值嫉拐，設置允許多選（按住Ctrl/Command鍵多選），如multiple="multiple"
2魁兼、選項：<option>顯示的選項</option>
? ? 屬性：①value ? ? 設置當前選項的值
? ? ? ? ? ? ?② selected? 預選中婉徘，設置默認被選中的選項，該屬性無值
select{
? -webkit-appearance: none; ? ? ? ? 取消select在一些瀏覽器中右邊的箭頭和高亮的線框
? -moz-appearance: none;
? background-color: transparent; ?? 取消select的默認背景顏色
? border-color: transparent; ? ? ? ?取消select的默認邊框顏色
}
select:focus{ ? ? ? ? ? ? ? ? ? ? ? 取消點擊時的輪廓
? outline:none
}
所有主流瀏覽器都不支持 appearance 屬性咐汞，但Firefox支持替代的-moz-appearance屬性盖呼，Safari和Chrome支持替代-webkit-appearance屬性
選擇框樣式
select{
? height: 4rem;
? line-height: 4rem;
? margin: auto;
? padding: 0 35%;
? box-sizing: border-box;
}
<form action="#">
? <select name="date">
? ? <option selected value="17194">17194期</option>
? ? <option value="17193">17193期</option>
? </select>
</form>
可以用一個span標簽代替select，將select絕對定位到span的上方化撕，且層級高于span
在PC端几晤，可以改變option/select的字體、顏色植阴、左右內(nèi)邊距蟹瘾，無法居中
在移動端，無法改變option的任何屬性
用js修改select的值: $('select').val('2');? ? // ()中是option的值
設置提示掠手，并使提示不可選:
<select name="grade">
? <option?value=""?selected disabled?style="display:none;">請選擇年級</option>
? <option?value="4">高一</option>
? <option?value="5">高二</option>
</select>
四憾朴、其它元素
1、為控件分組
? ? 作用：將一些控件放在一起喷鸽，并提供一個組名
? ? 語法：<fieldset></fieldset> ? ? ? 為控件分組
? ? ? ? ? ?? <legend>標題</legend>? 為分組指定標題
2众雷、關聯(lián)文本與表單控件元素，關聯(lián)后做祝，點擊文字如同點擊表單控件一樣
語法：<label>關聯(lián)的文本</label>
? ? 屬性：for：與該元素相關聯(lián)的控件的id值
____________________________________________________________________________________
其它常用標記
1砾省、浮動框架
? ? 作用：允許在一個瀏覽器窗口中同時顯示多個html文檔
語法：<iframe>文字內(nèi)容</iframe>
? ? ? ? ? ? ?注意：當瀏覽器不支持iframe元素時，文字內(nèi)容就會顯示
? ? 屬性：①src ? ? ?浮動框架中的網(wǎng)頁的url混槐，即要引入的網(wǎng)頁的地址
? ? ? ? ? ? ?② width ? 寬度
? ? ? ? ? ? ?③ height? 高度
? ? ? ? ? ?? ④ frameborder? 浮動框架邊框纯蛾，如果不想要邊框，設置為0
2纵隔、摘要與細節(jié)
? ? 作用：允許通過用戶的點擊操作完成頁面的內(nèi)容的伸展(顯示)與收縮(隱藏)
? ? 語法：<details>
? ? ? ? ? ? ? ? <summary>摘要與細節(jié)的標題</summary> ? ? ? ? ? ? ? ?? 顯示的內(nèi)容
? ? ? ? ? ? ? </details>
3翻诉、度量元素
? ? 作用：在頁面中定義一個度量衡，主要用于顯示比例信息捌刮，如：投票比例碰煌，任務完成比例...
? ? 語法：<meter>您的瀏覽器不支持meter</meter>
? ? 屬性：① min ? 度量范圍的最小值，默認為0
? ? ? ? ? ? ?② max ? 度量范圍的最大值绅作，默認為1
? ? ? ? ? ? ?③ value? 度量元素顯示的值芦圾，默認為0
4、時間元素
? ? 作用：關聯(lián)時間的不同表現(xiàn)形式
? ? 語法：<time>文本</time>
? ? 屬性：datetime
? ? 取值：① 只表示日期：yyyy-mm-dd
? ? ? ? ? ?? ② 只表示時間：hh:mm:ss
? ? ? ? ? ? ?③ 表示日期和時間：yyyy-mm-ddThh:mm:ss
5俄认、高亮顯示文本
? ? 語法：<mark></mark>
6个少、進度條
? ? 語法：<meter value="10" min="0" max="100" title="50%"></meter>%
____________________________________________________________________________________
新表單屬性（HTML5）縮寫都是txt**
新屬性：required? 非空限制洪乍，必填，不能為空
1夜焦、輸入必須為電子郵件類型：<input type="email">
2壳澳、搜索類型：<input type="search"> ?? 后面有個×
3、輸入必須符合url規(guī)范：<input type="url">
4茫经、電話號碼：<input type="tel"> ?? 移動端會自動彈出數(shù)字鍵盤
5巷波、數(shù)字類型：<input type="number">
? ? 屬性：① min ?? 定義控件接受的最小值
? ? ? ? ? ? ?② max ?? 定義控件接受的最大值
? ? ? ? ? ? ?③ step ? ?控制控件遞增的步長，默認為1
6卸伞、范圍類型：<input type="range">
? ? 作用：允許選擇指定范圍內(nèi)的一個值
? ? 屬性：① min ?? 指定范圍的最小值（下限值）
? ? ? ? ? ?? ② max ?? 指定范圍的最大值（上限值）
? ? ? ? ? ? ?③ step ?? 值變化的步長
? ? ? ? ? ? ?④ value? 設置初始值
7抹镊、顏色類型：<input type="color">
? ? 作用：顏色拾取控件，允許用戶選擇顏色
8荤傲、日期類型：<input type="date">
? ? 作用：允許用戶選擇日期
? ? 注意：
? ? 一垮耳、默認值：① type="date" value="2018-01-28"
? ? ? ? ? ? ? ? ? ? ? ?② type="time" value="16:01"
? ? ? ? ? ? ? ? ? ? ? ?③ type="week" value="2018-W04"
? ? ? ? ? ? ? ? ? ? ? ?④ type="month" value="2018-01"
? ? ? ? ? ? ? ? ? ? ? ?⑤?type="datetime-local" value="2018-01-19T15:19"
? ? 二、獲取輸入值遂黍，應使用change事件氨菇，當值改變時觸發(fā)
? ? 三、可使用min和max屬性定義最小和最大值妓湘，但在部分瀏覽器中不起作用
9查蓉、周類型：<input type="week">
? ? 作用：與date類似，但是只能選擇周
10榜贴、月類型：<input type="month">
? ? 作用：只能選擇月份
iframe******************************************************************************
iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
<iframe frameborder="0" width="100%">
? 您的瀏覽器不支持iframe ? ? ? ? ? ? ? ? ? ? //不支持iframe的瀏覽器會顯示<iframe>和</iframe>之間的文本
</iframe>
屬性：
frameborder? ? 取值：1 ? ? ??0 ? ?規(guī)定是否顯示框架周圍的邊框
src ? ? ? ? ? ? ? ? 取值：URL ? ? ? ??規(guī)定在 iframe 中顯示的文檔的 URL
height ? ? ? ? ? ?取值：px ? ? ?% ?規(guī)定 iframe 的高度
width ? ? ? ? ? ? 取值：px ? ? ?% ?定義 iframe 的寬度
name ? ? ? ? ? ? 取值：name ? ? ??規(guī)定 iframe 的名稱
marginheight ?取值：px ? ? ? ? ??定義 iframe 的頂部和底部的邊距
marginwidth ? 取值：px ? ? ? ? ??定義 iframe 的左側(cè)和右側(cè)的邊距
scrolling ? ? ? ? 取值：yes? no? auto ? ?規(guī)定是否在 iframe 中顯示滾動條
JS：
varifr=document.getElementsByTagName("iframe")[0]; ? ? ?? //獲取iframe元素
ifr.height="500px"; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? //為iframe的屬性賦值
ifr.src='http://baicu.com';
ifr.onload=function(){ ? ? ? ? ? ?? //比window.onload更晚觸發(fā)
? var iframeDom=ifr.contentDocument; ? ? ? ? ? ? ? ?? //獲取iframeDOM對象
? var sel=iframeDom.getElementById("selected"); ?? //獲取iframe中的元素
? var selH=getComputedStyle(sel).height; ? ? ? ? ? ? ? //獲取iframe中元素的樣式豌研，與普通DOM元素用法一樣
? ifr.height="100px";
}
iframe的缺點：
① iframe 會阻塞主頁面的Onload事件
② 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO
③ iframe 和主頁面共享連接池唬党，而瀏覽器對相同域的連接有限制鹃共，所以會影響頁面的并行加載
④?不容易打印
_____________________________________________________________________________________
<marquee></marquee>可以實現(xiàn)多種滾動效果，無需js控制
使用marquee標記不僅可以移動文字驶拱，也可以移動圖片霜浴，表格等
語法：<marquee>...</marquee>
說明：在標記之間添加要進行滾動的內(nèi)容
重要屬性：
① 滾動方向direction(包括4個值：up、down蓝纲、left和right)
? ? 語法：<marquee direction="滾動方向">...</marquee>
② 滾動方式behavior(scroll:循環(huán)滾動阴孟，默認效果；slide:只滾動一次就停止税迷；alternate:來回交替進行滾動)
? ? 語法：<marquee behavior="滾動方式">...</marquee>
③ 滾動速度scrollamount(滾動速度是設置每次滾動時移動的長度永丝，以像素為單位)
? ? 語法：<marquee scrollamount="5">...</marquee>
④ 滾動延遲scrolldelay(設置滾動的時間間隔，單位是毫秒)
? ? 語法：<marquee scrolldelay="100">...</marquee>
⑤ 滾動循環(huán)loop(默認值是-1箭养，滾動會不斷的循環(huán)下去)
? ? 語法：<marquee loop="2">...</marquee>
⑥ 滾動范圍width慕嚷、height
⑦ 滾動背景顏色bgcolor
⑧ 空白空間hspace、vspace
_______________________________________________________________________________________
原生HTML的Web組件標準
一、HTML Template
語法：<template></template>
一般感知不到它的存在喝检，它下面的png不會下載嗅辣，style不會渲染，script不會被加載執(zhí)行挠说，只是一個模板
在瀏覽器中表現(xiàn)為#document.fragment文檔片段
例：
var?template =?document.getElementById('temp');? ? ? ? ? ? ? //獲取id為temp的文檔片段節(jié)點
var?copy =?document.importNode(template.content, true);? //將文檔片段創(chuàng)建一份副本
copy.getElementById('title').innerHTML = 'Hello World';? ? ? //替換文檔片段副本中的內(nèi)容
二澡谭、Shadow DOM
是原生組件封裝的基本工具，可以實現(xiàn)組件與組件之間的獨立性
它致力于創(chuàng)建一個相對獨立的空間纺涤，可以有選擇性的從DOM樹上的父節(jié)點繼承一些屬性，甚至繼承一棵樹
瀏覽器通過Shadow DOM實現(xiàn)的組件：
<input>抠忘、<select>撩炊、<video>、<audio>
例：
var div =?document.getElementById('div');? ? ? ? ? ? ? ? ? ? ? //獲取id為div組件
var shadowRoot = div.attachShadow({?mode:'closed' });? //在div中創(chuàng)建一個Shadow DOM
? ? ? ? ? ? 在失去引用后崎脉，不允許對其進行改造(open允許在任何地方再得到Shadow DOM拧咳，繼續(xù)對其進行改造)
shadowRoot.appendChild(copy);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //將節(jié)點插入Shadow DOM中
三、Custom Elements
用來包裝原生組件的容器囚灼，只需要寫一個標簽就能得到一個完整的組件
語法：class MyElement?extends HTMLElement { ... }
生命周期函數(shù)：
constructor()? 構(gòu)造函數(shù)骆膝，用于初始化state、創(chuàng)建Shadow DOM灶体、監(jiān)聽事件等
? ? ? ? ? ? ? ? ? ? 組件被創(chuàng)建出來阅签，但還沒有插入到DOM樹中
connectedCallback()? 組件實例已被插入到DOM樹中，用于進行一些展示相關的初始化操作
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 組件已被插入DOM樹中蝎抽，或其本身就在html文件中寫好在DOM樹上了
attributeChangeCallback(attrName,?oldVal, newVal)? 組件屬性發(fā)生變化政钟，用于更新組件的狀態(tài)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?需要提供一個屬性列表，只有當屬性列表中的屬性發(fā)生變化時才會觸發(fā)這個函數(shù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如: static get?observedAttributes() {?return ['awesome'] }
disconnectedCallback()? 組件被從DOM樹中移除樟结，用于進行一些清理操作
adoptedCallback()? 組件實例從一個文檔被移動到另一個文檔
? ? ? ? 在操作多個document時會遇到养交，調(diào)用document.adoptNode()轉(zhuǎn)移節(jié)點所屬document時會觸發(fā)此函數(shù)
注冊到HTML標簽列表中：
window.customElements.define('my-element', class extends HTMLElement {...})
? 第一個參數(shù)是注冊的標簽名，必須包含一個-瓢宦，且不能以-開頭
? 第二個參數(shù)是注冊的組件的類碎连，直接傳入繼承的子類類名即可，也可以直接寫一個匿名類
使用：<my-element></my-element> 或?document.createElement('my-element')
? ? ? ? ?用法與普通標簽幾乎一樣驮履，但必須帶上關閉標簽
注意：
由于Custom Elements是通過js定義的鱼辙，所以在js未執(zhí)行時處于默認狀態(tài)，瀏覽器會直接將其內(nèi)容顯示出來
Custom Elements在被注冊后都有一個 :defined?偽類玫镐，而注冊前沒有座每，可以將其隱藏起來
如：my-element:not(:defined){ display:none }
四、HTML Imports(已廢棄)
語法：<link?rel="import"?href="./head.html">
可以直接import另一個html文件摘悴，使用其中的DOM節(jié)點
但與ES6 Module太像了峭梳，所以基本已被各瀏覽器廢棄
