整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 是網(wǎng)絡(luò)的基石。 了解這種標(biāo)記語(yǔ)言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。 HTML 屬性提供了多種功能，可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或?qū)傩浴Ｔ诒疚闹校【帉私?11 個(gè)您可能還沒有聽說過的 HTML 屬性。
此屬性允許用戶輸入多個(gè)值。 您可以將 multiple 屬性與 <input> 標(biāo)簽和 <select> 標(biāo)簽一起使用。 此布爾屬性僅對(duì)電子郵件或文件輸入類型有效。
在 <select> 標(biāo)簽中使用 multiple 屬性
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>使用 multiple 屬性進(jìn)行文件輸入
通過對(duì)文件輸入使用 multiple 屬性，您可以選擇多個(gè)文件（通過按住 Shift 或 Ctrl 鍵）。
<input type="file" multiple>使用 multiple 屬性進(jìn)行電子郵件輸入
通過對(duì)電子郵件輸入使用 multiple 屬性，您可以輸入以逗號(hào)分隔的電子郵件地址列表。 將從列表中的每個(gè)地址中刪除所有空格。
<input type="email" multiple>您可以使用 contenteditable 屬性使網(wǎng)頁(yè)上的 HTML 內(nèi)容可編輯。 這是一個(gè)全局屬性，即它對(duì)所有 HTML 元素都是通用的。
<p contenteditable="true">
在這里您可以編輯您想輸入的內(nèi)容
</p>spellcheck 屬性指定是否可以檢查元素的拼寫錯(cuò)誤。 您可以對(duì) <textarea> 元素中的文本、可編輯元素中的文本或輸入元素中的文本（密碼除外）中的文本進(jìn)行拼寫檢查。
<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內(nèi)容
</p>您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導(dǎo)航到它。 您可以將下載屬性與 <a> 標(biāo)簽和 <area> 標(biāo)簽一起使用。
注意：下載屬性僅適用于同源 URL。 它遵循同源策略的規(guī)則。
<a href="xyz.png" download="myImage">下載</a><input> 標(biāo)簽的 accept 屬性指定用戶可以上傳的文件類型。 您可以指定一個(gè)或多個(gè)文件類型的逗號(hào)分隔列表作為其值。
接受音頻文件
<input type="file" id="audioFile" accept="audio/*">接受視頻文件
<input type="file" id="videoFile" accept="video/*">接受圖像文件
<input type="file" id="imageFile" accept="image/*">接受 Microsoft Word 文件
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">接受 PNG 或 JPEG 文件
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">接受 PDF 文件
<input type="file" id="pdfFile" accept=".pdf">translate 屬性告訴瀏覽器在頁(yè)面本地化時(shí)該元素是否應(yīng)該被翻譯。 它可以有 2 個(gè)值：“是”或“否”。
<p translate="no">
輸入您想翻譯或者不需要翻譯的內(nèi)容
</p>poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。
注意：如果您不指定任何內(nèi)容，則在第一幀可用之前不會(huì)顯示任何內(nèi)容。 當(dāng)?shù)谝粠捎脮r(shí)，它顯示為海報(bào)幀。
<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>inputmode 屬性指示瀏覽器在用戶選擇任何 input 或 textarea 元素時(shí)顯示哪個(gè)鍵盤。 此屬性接受各種值：
None
<input type="text" inputmode="none" />Numeric
<input type="text" inputmode="numeric" />Tel
<input type="text" inputmode="tel" />Decimal
<input type="text" inputmode="decimal" /><input type="text" inputmode="email" />URL
<input type="text" inputmode="url" />Search
<input type="text" inputmode="search" /><input> 元素的模式屬性允許您指定一個(gè)正則表達(dá)式，元素的值將根據(jù)該正則表達(dá)式進(jìn)行驗(yàn)證。 您可以將模式屬性與多種輸入類型一起使用，例如文本、日期、搜索、URL、電話、電子郵件和密碼。
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>autocomplete 屬性指定瀏覽器是否應(yīng)根據(jù)用戶輸入自動(dòng)完成輸入。 您可以將 autocomplete 屬性用于多種輸入類型，例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。 您可以將此屬性與 <input> 元素或 <form> 元素一起使用。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">autofocus 屬性是一個(gè)布爾屬性，指示元素應(yīng)該專注于頁(yè)面加載。 您可以將此屬性與 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。
在 input 元素中使用 autofocus 屬性
<input type="text" autofocus>在 select 元素中使用 autofocus 屬性
select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>在 textarea 元素中使用 autofocus 屬性
<textarea autofocus>
輸入您想要顯示的內(nèi)容
</textarea>單行代碼有助于以更少的代碼實(shí)現(xiàn)更多的目標(biāo)。 您可以像專業(yè)人士一樣使用多個(gè) JavaScript 單行代碼來編寫代碼。
只需一行代碼，您就可以對(duì)數(shù)組進(jìn)行混合、求數(shù)組的平均值、檢查數(shù)組是否為空、生成隨機(jī)十六進(jìn)制顏色、生成隨機(jī) UUID 等等。
內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請(qǐng)配合大師哥《Javascript》視頻課程學(xué)習(xí)。
多窗口和窗體：
可以打開多個(gè)瀏覽器窗口，每個(gè)窗口都是獨(dú)立的；
一個(gè)瀏覽器窗口可能包含多個(gè)標(biāo)簽頁(yè)；每個(gè)標(biāo)簽頁(yè)都是獨(dú)立的上下文，都是獨(dú)立的window對(duì)象，而且相互之間互不干擾；
但是窗口也并不總是和其他窗口完全沒有關(guān)系；一個(gè)窗口或標(biāo)簽頁(yè)中的腳本可以打開新的窗口或標(biāo)簽頁(yè)，如此，這些多窗口或標(biāo)簽頁(yè)就可以互相操作；
打開窗口：
window.open()方法，打開一個(gè)新的瀏覽器窗口、標(biāo)簽頁(yè)，導(dǎo)航到一個(gè)指定的URL；
語(yǔ)法：window.open(url,name,features,replace)；url為打開新窗口的url，name為窗口目標(biāo),features設(shè)置窗口特性參數(shù)列表，replace為Boolean值，指定是否用新窗口替換當(dāng)前頁(yè)面；
一般使用第一個(gè)參數(shù)，如果也省略該參數(shù)或使用空字符串，則會(huì)打開一個(gè)空頁(yè)面的URL about:blank；
如果使用第二個(gè)參數(shù)，而且該參數(shù)是已有窗口或框架的名稱，就會(huì)在該窗口或框架中加載指定的URL；否則彈出新窗口，并將新窗口的name命名為該參數(shù)，如果省略此參數(shù)，則會(huì)使用指定的“_blank”打開一個(gè)新的、未命名的窗口；
第二個(gè)參數(shù)也可以是：_self、_parent、_top、_blank；
窗口的名字也可作為<a>和<form>元素上target屬性的值，用來表示引用的文檔或提交處理的頁(yè)面；
<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>窗口特性屬性：
第三個(gè)參數(shù)是一個(gè)逗號(hào)分隔的設(shè)置字符串，表示在新窗口中都顯示哪些特性；如果省略，則以默認(rèn)的形式呈現(xiàn)；
字符串格式為：設(shè)置使用鍵值對(duì)，且全部使用逗號(hào)分隔，而且不能有空格；
window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");顯式指定這些特性，打開的應(yīng)該是新窗口，而不是新標(biāo)簽頁(yè)；這個(gè)參數(shù)是非標(biāo)準(zhǔn)的，而且HTML5也主張瀏覽器應(yīng)該忽略它；
另外，出于安全考慮，瀏覽器包含對(duì)可能指定的功能的限制，如，通常不允許指定一個(gè)太小的或者位于屏幕之外的窗口，并且一些瀏覽器不允許創(chuàng)建一個(gè)沒有狀態(tài)欄的窗口；
第四個(gè)參數(shù)只有在設(shè)置了第二個(gè)參數(shù)命名的是一個(gè)已存在的窗口時(shí)才有用；它是一個(gè)布爾值，聲明了由第一個(gè)參數(shù)指定的URL是替換掉窗口瀏覽歷史的當(dāng)前記錄(true)還是應(yīng)該在窗口瀏覽歷史中創(chuàng)建一個(gè)新的記錄(false)，默認(rèn)為false；
window.open()會(huì)返回一個(gè)window對(duì)象，用于操作新創(chuàng)建的窗口；該引用可以操作新窗口的內(nèi)容，從而就可以在一個(gè)窗口中控制另一個(gè)窗口的內(nèi)容，例如向一個(gè)新開的瀏覽器窗口中輸出內(nèi)容；
var w = window.open(); // 打開一個(gè)新的空白窗口
w.document.write("<h2>零點(diǎn)網(wǎng)絡(luò)</h2>");
w.alert("詳情請(qǐng)進(jìn)入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";某些瀏覽器在默認(rèn)情況下可能不允許針對(duì)主瀏覽器窗口調(diào)整大小或移動(dòng)，但不允許針對(duì)通過open()創(chuàng)建的窗口調(diào)整大小或移動(dòng)，如：
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
newWindow.resizeTo(600,600);
newWindow.moveTo(200,200);注：有些瀏覽器默認(rèn)不允許這樣操作；
窗口opener屬性：
opener屬性是新窗口對(duì)打開它的原始窗口的引用；即指向調(diào)用window.open()的窗口或框架；但只在彈出窗口的最外層window對(duì)象(top)中有定義；
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
console.log(newWindow.opener === window); // true
<!-- 主窗口 -->
<input type="text" id="selectCity" placeholder="選擇" />
<script>
var selectCity = document.getElementById("selectCity");
selectCity.onclick = function(){
var newWin = window.open("select.html","newWin","width=400,height=400");
}
</script>
<!-- 新窗口 -->
<select id="city">
<option value="beijing">北京</option>
<option value="nanjing">南京</option>
<option value="anhui">安徽</option>
</select>
<script>
var city = document.getElementById("city");
city.onchange = function(){
window.opener.document.getElementById("selectCity").value = city.options[city.selectedIndex].value;
window.close();
}
</script>有些瀏覽器(如IE8和Chrome)會(huì)在獨(dú)立的進(jìn)程中運(yùn)行每個(gè)標(biāo)簽頁(yè)，當(dāng)一個(gè)標(biāo)簽頁(yè)打開另一個(gè)標(biāo)簽頁(yè)時(shí)，如果兩個(gè)window對(duì)象之間需要彼此通信，那么新標(biāo)簽頁(yè)就不能運(yùn)行在獨(dú)立的進(jìn)程中。在Chrome中，將新創(chuàng)建的標(biāo)簽頁(yè)的opener屬性設(shè)置為null，即表示在單獨(dú)的進(jìn)程中運(yùn)行新標(biāo)簽頁(yè)。
newWindow.opener = null;
標(biāo)簽頁(yè)之間的聯(lián)系一旦切斷，將沒有辦法恢復(fù)。
window.close()關(guān)閉窗口：
對(duì)于主窗口，如果沒有得到用戶的允許是不能關(guān)閉它的；但彈出窗口可以不經(jīng)用戶允許可以關(guān)閉自己；
窗口關(guān)閉后，窗口的引用仍然存在，可以使用window.closed屬性檢測(cè)，但在實(shí)際場(chǎng)景中沒有多大用處；
function openWin(){
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
newWindow.document.write("<h2>零點(diǎn)網(wǎng)絡(luò)</h2>");
function closeWin(){
newWindow.close();
//alert(newWindow.closed);
if(newWindow.close)
alert("已關(guān)閉");
}
setTimeout(closeWin,3000);
}
openWin();注：document對(duì)象也有close()方法，為了避免混淆，所以調(diào)用close()方法時(shí)，要顯式調(diào)用，即使用window.close()；
安全限制：
大多數(shù)瀏覽器針對(duì)彈出窗口實(shí)施了多方面的安全限制，如：不允許在屏幕之外創(chuàng)建彈出窗口，不允許將彈出窗口移動(dòng)到屏幕之外，不允許關(guān)閉狀態(tài)欄等；不允許關(guān)閉地址欄，默認(rèn)情況下不允許移動(dòng)彈出窗口或調(diào)整其大小；或者部分瀏覽器不支持修改狀態(tài)欄，始終顯示地址欄等；
通常，對(duì)于open()方法只有當(dāng)用戶手動(dòng)單擊按鈕或超鏈接時(shí)才會(huì)調(diào)用；如果嘗試在瀏覽器初始載入時(shí)開啟一個(gè)彈出窗口時(shí)，通常會(huì)被屏蔽;
彈出窗口屏蔽程序：
大多數(shù)瀏覽器都內(nèi)置有彈出窗口屏蔽程序，如果沒有內(nèi)置，可以安裝第三方實(shí)用工具；內(nèi)置屏蔽會(huì)使window.open可能返回null，第三方會(huì)返回錯(cuò)誤；通過需要檢測(cè)其返回值；
// 內(nèi)置的屏蔽程序
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null){
alert("彈窗被阻止！");
}
// 第三方
var blocked = false;
try{
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null)
blocked = true;
}catch(e){
blocked = true;
}
if(blocked){
alert("彈窗被屏蔽");
}彈出窗口通信：
主窗口向新窗口傳值，直接為新窗口window對(duì)象添加成員，如：
// 主窗口
var newWin = window.open("select.html","_blank");
var person = {
name:"wangwei",
sex: true,
age: 18
}
newWin.person = person;
// 新窗口
document.write("姓名：",person.name);
document.write("性別：",person.sex);
document.write("年齡：",person.age);新窗口向主窗口傳值，通過window.opener獲取原始窗口的屬性或者h(yuǎn)tml元素；
<!-- 主窗口 -->
<div id="mydiv"></div>
<script>
var newWin = window.open("select.html","_blank");
function showDiv(str){
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = str;
}
</script>
<script>
// 新窗口
var str = "零點(diǎn)網(wǎng)絡(luò)";
window.opener.showDiv(str);
window.close();
</script>通過普通的get傳值；
// 主窗口
function putId(id){
window.open("select.html?id=" + encodeURIComponent(id),"putWin");
}
putId("1002");
// 新窗口
var id = location.search;
id = id.split("=");
console.log(id[1]);
document.write(decodeURIComponent(id[1]));框架窗口：
如果頁(yè)面使用了框架集合(包含frameset和iframe)，則每個(gè)框架都由它自己的window對(duì)象表示，并存放在frames集合中;
與相互獨(dú)立的標(biāo)簽頁(yè)或窗口不同，框架窗口之間并不是相互獨(dú)立的；
每個(gè)window對(duì)象都有一個(gè)name屬性，其中包含框架的名稱；
<frameset rows="100,*">
<frame src="top.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="left.html" name="leftFrame" />
<frame src="right.html" name="rightFrame" />
</frameset>
</frameset>在frames集合中,可用數(shù)字(下標(biāo)從0開始,從左到右,從上到下)訪問;即可以使用frames[0]表示第1個(gè)子窗口、frames[1]表示第2個(gè)子窗口；
可使用名稱對(duì)框架進(jìn)行訪問，該名稱就是該框架的name屬性，如 window.frames[“topFrame”]引用;
也可以window.topFrame 使用架框的名字訪問；
window.onload = function(){
console.log(frames);
var topFrame = frames[0];
console.log(topFrame);
console.log(topFrame.name);
var leftFrame = window.frames["leftFrame"];
console.log(leftFrame.name);
console.log(window.rightFrame.name);
}可使用frames.length 取得框架集合長(zhǎng)度;
如果是內(nèi)聯(lián)框架，那就更簡(jiǎn)單了，如：
<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
console.log(frames);
console.log(frames[0].name);
</script>對(duì)于頂級(jí)窗口的window對(duì)象來說，可以看作為由若干個(gè)子窗口組成的窗口數(shù)組，也就是說可以把window對(duì)象當(dāng)作為窗口的集合，如：
console.log(window.length);
console.log(window[0]);但在實(shí)際場(chǎng)景中，最好還是使用frames來代替window，因?yàn)閒rames顯得更清晰些；
對(duì)于<iframe>元素，如果設(shè)置了id，也可以通過document.getElementById()方法獲取，如：
var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";<iframe>元素有contentWindow屬性，引用該窗體的window對(duì)象，所以此窗體的window對(duì)象就是：
var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是內(nèi)聯(lián)框架window對(duì)象");可以進(jìn)行反向操作，通過window對(duì)象的frameElement屬性，來獲取該窗體的<iframe>元素；表示頂級(jí)窗口的window對(duì)象的frameElement屬性為null，窗體中的window對(duì)象的frameElement屬性不是null；
var myframe = document.getElementById("myframe");
var mywin = myframe.contentWindow;
console.log(mywin.frameElement);
console.log(mywin.frameElement === myframe);
console.log(window.frameElement);
// 在one.html會(huì)返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);盡管可以通過document.getElementById()和contentWindow屬性來獲取窗口中的子窗體的引用，但在實(shí)際場(chǎng)景中，用的還是比較少，主要還是使用frames屬性來訪問；
top對(duì)象：
可以使用top引用最頂層（外層）框架，就是瀏覽器窗口；使用它可以確保在一個(gè)框架中正確的訪問另一個(gè)框架；
// 框架集頁(yè)面
window.onload = function(){
console.log(frames);
console.log(top);
console.log(top === frames); // true
console.log(top === window); // true
console.log(frames === window); // true
}
// 框架頁(yè)面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames); // false因此，使用top訪問框架時(shí)，也可以如下：
console.log(top[0].name);
console.log(top["topFrame"].name);
console.log(top.topFrame.name);
console.log(top.frames[0].name);
console.log(top.frames["topFrame"].name);
console.log(top.frames === frames); // trueparent對(duì)象：
與top相對(duì)的另一個(gè)window對(duì)象是parent，其指的當(dāng)前框架的直接上層框架，即父框架；
parent在不同的位置指不同的對(duì)象；在某些情況下，parent有可能等于top，但在沒有框架的情況下，parent一定等于top（此時(shí)，它們都等于window），如：
<!-- frameset.html -->
<frameset rows="100,*">
<frame src="top.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="left.html" name="leftFrame" />
<frame src="right.html" name="rightFrame" />
</frameset>
</frameset>
<!-- right.html -->
<frameset cols="50%,50%">
<frame src="one.html" name="oneFrame" />
<frame src="two.html" name="twoFrame" />
</frameset>
// one.html中的代碼
var parentFrame = window.parent;
console.log("從one.html中訪問：",parentFrame.name); // rightFrame
parentFrame.frames[1].document.write("<h2>框架訪問</h2>");
// top.html中的代碼
var parentFrame = window.parent;
console.log("top:", parentFrame.name);
console.log("top:", parentFrame.length);
console.log("top:", parentFrame.frames.length);
console.log("top:", parentFrame === top); // true
console.log("top:", parentFrame.frames[1].name);
parentFrame.frames[1].document.write("<h2>是left頁(yè)面嗎？</h2>");注：除非最頂層的窗口是通過window.open()打開的，否則其window對(duì)象的name屬性不會(huì)包含任何值；
self對(duì)象：
指向當(dāng)前window自身，即self和window可以互換使用；
引入self的目的只是為了與top和parent對(duì)象對(duì)應(yīng)起來；
對(duì)于頂級(jí)窗口，parent == self; // true
注：所有的這些對(duì)象都是window對(duì)象的屬性，可以通過window.parent、window.top等形式訪問；同時(shí)，這也意味著可以將不同層次的window對(duì)象連接起來，如：window.parent.parent.frames[0]；
窗口交互：
對(duì)于一個(gè)復(fù)雜的框架，窗口之間可以相互訪問，它主要包括對(duì)框架自身的引用、父窗口對(duì)子窗口的引用、子窗口對(duì)父窗口及其他窗口的引用、對(duì)頂級(jí)窗口的引用；
在使用框架的情況下，瀏覽器中會(huì)存在多個(gè)Global對(duì)象，即每個(gè)窗口都會(huì)有自己的執(zhí)行上下文，在每個(gè)框架中定義的全局變量會(huì)自動(dòng)成為框架中window對(duì)象的屬性；
<!-- right.html -->
<div id="myDiv"></div>
<div id="imgDiv"></div>
<script>
function showImg(){
var imgDiv = document.getElementById("imgDiv");
var img = document.createElement("img");
img.src = "images/1.jpg";
imgDiv.appendChild(img);
}
</script>
// 框架集頁(yè)面
window.onload = showDiv;
function showDiv(){
var rightFrame = parent[2];
var myDiv = rightFrame.document.getElementById("myDiv");
myDiv.innerHTML = "<h2>零點(diǎn)網(wǎng)絡(luò)</h2>";
}
<!-- top.html -->
<h2>Top頁(yè)面</h2>
<div><button id="showBtn">顯示圖片</button>
<button id="closeBtn">關(guān)閉圖片</button></div>
<script>
window.onload = function(){
var showBtn = document.getElementById("showBtn");
var closeBtn = document.getElementById("closeBtn");
var rightFrame = top[2];
showBtn.onclick = rightFrame.showImg;
closeBtn.onclick = closeImg;
}
function closeImg(){
var rightFrame = top.rightFrame;
var imgDiv = rightFrame.document.getElementById("imgDiv");
imgDiv.innerHTML = "";
}
</script>對(duì)于構(gòu)造函數(shù)，它也是函數(shù)，所以當(dāng)用構(gòu)造函數(shù)和相關(guān)的原型對(duì)象定義一個(gè)自定義類時(shí)，這個(gè)類只在一個(gè)單獨(dú)的窗口中定義；子窗口也可以引用這個(gè)類；
對(duì)于內(nèi)置類來說，和自定義類就有所不同了；內(nèi)置的類都會(huì)在所有的窗口中自動(dòng)預(yù)定義，即每個(gè)窗口的window對(duì)象都包含原生類型的構(gòu)造函數(shù)，因此每個(gè)框架一套自己的構(gòu)造函數(shù)，這些構(gòu)造函數(shù)一一對(duì)應(yīng)，但并不相等；如：top.Object并不等于top.frames[0].Object，這個(gè)問題會(huì)影響到對(duì)跨框架傳遞的對(duì)象使用instanceof操作符；
WindowProxy對(duì)象：
window對(duì)象是客戶端Javascript的全局變量；但是從技術(shù)上來看，并不是這樣的；Web瀏覽器每次向窗口或窗體中載入新的內(nèi)容，它都會(huì)開始一個(gè)新的JavaScript執(zhí)行上下文，包含一個(gè)新創(chuàng)建的全局對(duì)象；但是當(dāng)多個(gè)窗口或窗體在使用時(shí)，有一個(gè)重要的概念，盡管窗體或窗口載入了新的文檔，但是引用窗體或窗口的window對(duì)象還仍然是一個(gè)有效的引用；
所以客戶端Javascript有兩個(gè)重要的對(duì)象；客戶端全局對(duì)象處于作用域鏈的頂級(jí)，并且是全局變量和函數(shù)所定義的地方；事實(shí)上，全局對(duì)象會(huì)在窗口或窗體載入新內(nèi)容時(shí)被替換；
而我們稱之為“window對(duì)象”的對(duì)象實(shí)際上不是全局對(duì)象，而是全局對(duì)象的一個(gè)代理；每次查詢或設(shè)置window對(duì)象的屬性時(shí)，就會(huì)在窗口或窗體的當(dāng)前全局對(duì)象上查詢或設(shè)置相同的屬性；
HTML5規(guī)范稱這個(gè)代理對(duì)象為WindowProxy；由于它的代理行為，除了有更長(zhǎng)的生命周期之外，代理對(duì)象表現(xiàn)得像真正的全局對(duì)象；如果可以比較兩個(gè)對(duì)象，那么區(qū)分它們會(huì)很困難；但是事實(shí)上，沒有辦法可以引用到真正的客戶端全局對(duì)象；全局對(duì)象處于作用域鏈的頂端，但是window、self、top、parent以及窗體的屬性全部返回代理對(duì)象；window.open()也返回代理對(duì)象；甚至頂級(jí)函數(shù)里this的值也是代理對(duì)象，而不是真正的全局對(duì)象；
Web前端開發(fā)之Javascript-零點(diǎn)程序員-王唯
例
帶有兩個(gè)輸入字段和相關(guān)標(biāo)記的簡(jiǎn)單 HTML 表單：
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
瀏覽器支持
目前大多數(shù)瀏覽器支持 <label> 標(biāo)簽。
標(biāo)簽定義及使用說明
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。
提示和注釋
提示:"for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
HTML 4.01 與 HTML5之間的差異
"form" 屬性是 HTML5 的新屬性。
屬性
New：HTML5 新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| for | element_id | 規(guī)定 label 與哪個(gè)表單元素綁定。 |
| formNew | form_id | 規(guī)定 label 字段所屬的一個(gè)或多個(gè)表單。 |
全局屬性
<label> 標(biāo)簽支持全局屬性，查看完整屬性表 HTML全局屬性。
事件屬性
<label> 標(biāo)簽支持所有 HTML事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
