TML 是網絡的基石。 了解這種標記語言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。 HTML 屬性提供了多種功能，可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或屬性。在本文中，小編將帶您了解 11 個您可能還沒有聽說過的 HTML 屬性。

1. multiple

此屬性允許用戶輸入多個值。 您可以將 multiple 屬性與 <input> 標簽和 <select> 標簽一起使用。 此布爾屬性僅對電子郵件或文件輸入類型有效。

在 <select> 標簽中使用 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 屬性進行文件輸入

通過對文件輸入使用 multiple 屬性，您可以選擇多個文件（通過按住 Shift 或 Ctrl 鍵）。

<input type="file" multiple>

使用 multiple 屬性進行電子郵件輸入

通過對電子郵件輸入使用 multiple 屬性，您可以輸入以逗號分隔的電子郵件地址列表。 將從列表中的每個地址中刪除所有空格。

<input type="email" multiple>

2.contenteditable

您可以使用 contenteditable 屬性使網頁上的 HTML 內容可編輯。 這是一個全局屬性，即它對所有 HTML 元素都是通用的。

<p contenteditable="true">
在這里您可以編輯您想輸入的內容
</p>

3.spellcheck

spellcheck 屬性指定是否可以檢查元素的拼寫錯誤。 您可以對 <textarea> 元素中的文本、可編輯元素中的文本或輸入元素中的文本（密碼除外）中的文本進行拼寫檢查。

<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內容
</p>

4.download

您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導航到它。 您可以將下載屬性與 <a> 標簽和 <area> 標簽一起使用。

注意：下載屬性僅適用于同源 URL。 它遵循同源策略的規則。

<a href="xyz.png" download="myImage">下載</a>

5. accept

<input> 標簽的 accept 屬性指定用戶可以上傳的文件類型。 您可以指定一個或多個文件類型的逗號分隔列表作為其值。

接受音頻文件

<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">

6. translate

translate 屬性告訴瀏覽器在頁面本地化時該元素是否應該被翻譯。 它可以有 2 個值：“是”或“否”。

<p translate="no">
輸入您想翻譯或者不需要翻譯的內容
</p>

7.poster

poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。

注意：如果您不指定任何內容，則在第一幀可用之前不會顯示任何內容。 當第一幀可用時，它顯示為海報幀。

<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8.inputmode

inputmode 屬性指示瀏覽器在用戶選擇任何 input 或 textarea 元素時顯示哪個鍵盤。 此屬性接受各種值：

None

<input type="text" inputmode="none" />

Numeric

<input type="text" inputmode="numeric" />

Tel

<input type="text" inputmode="tel" />

Decimal

<input type="text" inputmode="decimal" />

Email

<input type="text" inputmode="email" />

URL

<input type="text" inputmode="url" />

Search

<input type="text" inputmode="search" />

9. pattern

<input> 元素的模式屬性允許您指定一個正則表達式，元素的值將根據該正則表達式進行驗證。 您可以將模式屬性與多種輸入類型一起使用，例如文本、日期、搜索、URL、電話、電子郵件和密碼。

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>

10.autocomplete

autocomplete 屬性指定瀏覽器是否應根據用戶輸入自動完成輸入。 您可以將 autocomplete 屬性用于多種輸入類型，例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。 您可以將此屬性與 <input> 元素或 <form> 元素一起使用。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

11.autofocus

autofocus 屬性是一個布爾屬性，指示元素應該專注于頁面加載。 您可以將此屬性與 <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>
輸入您想要顯示的內容
</textarea>

使用 JavaScript One-Liners 讓您的生活更輕松

單行代碼有助于以更少的代碼實現更多的目標。 您可以像專業人士一樣使用多個 JavaScript 單行代碼來編寫代碼。

只需一行代碼，您就可以對數組進行混合、求數組的平均值、檢查數組是否為空、生成隨機十六進制顏色、生成隨機 UUID 等等。

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

多窗口和窗體：

可以打開多個瀏覽器窗口，每個窗口都是獨立的；

一個瀏覽器窗口可能包含多個標簽頁；每個標簽頁都是獨立的上下文，都是獨立的window對象，而且相互之間互不干擾；

但是窗口也并不總是和其他窗口完全沒有關系；一個窗口或標簽頁中的腳本可以打開新的窗口或標簽頁，如此，這些多窗口或標簽頁就可以互相操作；

打開窗口：

window.open()方法，打開一個新的瀏覽器窗口、標簽頁，導航到一個指定的URL；

語法：window.open(url,name,features,replace)；url為打開新窗口的url，name為窗口目標,features設置窗口特性參數列表，replace為Boolean值，指定是否用新窗口替換當前頁面；

一般使用第一個參數，如果也省略該參數或使用空字符串，則會打開一個空頁面的URL about:blank；

如果使用第二個參數，而且該參數是已有窗口或框架的名稱，就會在該窗口或框架中加載指定的URL；否則彈出新窗口，并將新窗口的name命名為該參數，如果省略此參數，則會使用指定的“_blank”打開一個新的、未命名的窗口；

第二個參數也可以是：_self、_parent、_top、_blank；

窗口的名字也可作為<a>和<form>元素上target屬性的值，用來表示引用的文檔或提交處理的頁面；

<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>

窗口特性屬性：

第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性；如果省略，則以默認的形式呈現；

• fullscreen：yes / no，是否最大化；僅限IE；
• height：數值，新窗口的高，不能小于100；
• left：數值，新窗口的左坐標，不能是負值；
• location：yes / no，是否顯示地址欄；不同瀏覽器的默認值不同；設置為no，地址欄有可能會隱藏，也有可能會被禁用；
• menubar：yes / no，是否顯示菜單欄，默認為no；
• resizable：yes / no，是否能改變大小，默認為no ；
• scrollbars：yes / no，如果內容區域大于視口，是否允許滾動，默認為no；
• status：yes / no，是否顯示狀態欄，默認為no；
• toolbar：yes / no，是否顯示工具欄，默認為no；
• top：數值，新窗口的上坐標，不能是負值；
• width：數值，新窗口的寬，不能小于100；

字符串格式為：設置使用鍵值對，且全部使用逗號分隔，而且不能有空格；

window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");

顯式指定這些特性，打開的應該是新窗口，而不是新標簽頁；這個參數是非標準的，而且HTML5也主張瀏覽器應該忽略它；

另外，出于安全考慮，瀏覽器包含對可能指定的功能的限制，如，通常不允許指定一個太小的或者位于屏幕之外的窗口，并且一些瀏覽器不允許創建一個沒有狀態欄的窗口；

第四個參數只有在設置了第二個參數命名的是一個已存在的窗口時才有用；它是一個布爾值，聲明了由第一個參數指定的URL是替換掉窗口瀏覽歷史的當前記錄(true)還是應該在窗口瀏覽歷史中創建一個新的記錄(false)，默認為false；

window.open()會返回一個window對象，用于操作新創建的窗口；該引用可以操作新窗口的內容，從而就可以在一個窗口中控制另一個窗口的內容，例如向一個新開的瀏覽器窗口中輸出內容；

var w = window.open();  // 打開一個新的空白窗口
w.document.write("<h2>零點網絡</h2>");
w.alert("詳情請進入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";

某些瀏覽器在默認情況下可能不允許針對主瀏覽器窗口調整大小或移動，但不允許針對通過open()創建的窗口調整大小或移動，如：

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);

注：有些瀏覽器默認不允許這樣操作；

窗口opener屬性：

opener屬性是新窗口對打開它的原始窗口的引用；即指向調用window.open()的窗口或框架；但只在彈出窗口的最外層window對象(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)會在獨立的進程中運行每個標簽頁，當一個標簽頁打開另一個標簽頁時，如果兩個window對象之間需要彼此通信，那么新標簽頁就不能運行在獨立的進程中。在Chrome中，將新創建的標簽頁的opener屬性設置為null，即表示在單獨的進程中運行新標簽頁。

newWindow.opener = null;

標簽頁之間的聯系一旦切斷，將沒有辦法恢復。

window.close()關閉窗口：

對于主窗口，如果沒有得到用戶的允許是不能關閉它的；但彈出窗口可以不經用戶允許可以關閉自己；

窗口關閉后，窗口的引用仍然存在，可以使用window.closed屬性檢測，但在實際場景中沒有多大用處；

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>零點網絡</h2>");
    function closeWin(){
        newWindow.close();
        //alert(newWindow.closed);
        if(newWindow.close)
            alert("已關閉");
    }
    setTimeout(closeWin,3000);
}
openWin();

注：document對象也有close()方法，為了避免混淆，所以調用close()方法時，要顯式調用，即使用window.close()；

安全限制：

大多數瀏覽器針對彈出窗口實施了多方面的安全限制，如：不允許在屏幕之外創建彈出窗口，不允許將彈出窗口移動到屏幕之外，不允許關閉狀態欄等；不允許關閉地址欄，默認情況下不允許移動彈出窗口或調整其大小；或者部分瀏覽器不支持修改狀態欄，始終顯示地址欄等；

通常，對于open()方法只有當用戶手動單擊按鈕或超鏈接時才會調用；如果嘗試在瀏覽器初始載入時開啟一個彈出窗口時，通常會被屏蔽;

彈出窗口屏蔽程序：

大多數瀏覽器都內置有彈出窗口屏蔽程序，如果沒有內置，可以安裝第三方實用工具；內置屏蔽會使window.open可能返回null，第三方會返回錯誤；通過需要檢測其返回值；

// 內置的屏蔽程序
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對象添加成員，如：

// 主窗口
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獲取原始窗口的屬性或者html元素；

<!-- 主窗口 -->
<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 = "零點網絡";
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]));

框架窗口：

如果頁面使用了框架集合(包含frameset和iframe)，則每個框架都由它自己的window對象表示，并存放在frames集合中;

與相互獨立的標簽頁或窗口不同，框架窗口之間并不是相互獨立的；

每個window對象都有一個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集合中,可用數字(下標從0開始,從左到右,從上到下)訪問;即可以使用frames[0]表示第1個子窗口、frames[1]表示第2個子窗口；

可使用名稱對框架進行訪問，該名稱就是該框架的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 取得框架集合長度;

如果是內聯框架，那就更簡單了，如：

<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
    console.log(frames);
    console.log(frames[0].name);
</script>

對于頂級窗口的window對象來說，可以看作為由若干個子窗口組成的窗口數組，也就是說可以把window對象當作為窗口的集合，如：

    console.log(window.length);
    console.log(window[0]);

但在實際場景中，最好還是使用frames來代替window，因為frames顯得更清晰些；

對于<iframe>元素，如果設置了id，也可以通過document.getElementById()方法獲取，如：

var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";

<iframe>元素有contentWindow屬性，引用該窗體的window對象，所以此窗體的window對象就是：

var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是內聯框架window對象");

可以進行反向操作，通過window對象的frameElement屬性，來獲取該窗體的<iframe>元素；表示頂級窗口的window對象的frameElement屬性為null，窗體中的window對象的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會返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);

盡管可以通過document.getElementById()和contentWindow屬性來獲取窗口中的子窗體的引用，但在實際場景中，用的還是比較少，主要還是使用frames屬性來訪問；

top對象：

可以使用top引用最頂層（外層）框架，就是瀏覽器窗口；使用它可以確保在一個框架中正確的訪問另一個框架；

// 框架集頁面
window.onload = function(){
    console.log(frames);
    console.log(top);
console.log(top === frames);  // true
console.log(top === window);  // true
    console.log(frames === window);  // true
}
// 框架頁面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames);  // false

因此，使用top訪問框架時，也可以如下：

    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);  // true

parent對象：

與top相對的另一個window對象是parent，其指的當前框架的直接上層框架，即父框架；

parent在不同的位置指不同的對象；在某些情況下，parent有可能等于top，但在沒有框架的情況下，parent一定等于top（此時，它們都等于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頁面嗎？</h2>");

注：除非最頂層的窗口是通過window.open()打開的，否則其window對象的name屬性不會包含任何值；

self對象：

指向當前window自身，即self和window可以互換使用；

引入self的目的只是為了與top和parent對象對應起來；

對于頂級窗口，parent == self; // true

注：所有的這些對象都是window對象的屬性，可以通過window.parent、window.top等形式訪問；同時，這也意味著可以將不同層次的window對象連接起來，如：window.parent.parent.frames[0]；

窗口交互：

對于一個復雜的框架，窗口之間可以相互訪問，它主要包括對框架自身的引用、父窗口對子窗口的引用、子窗口對父窗口及其他窗口的引用、對頂級窗口的引用；

在使用框架的情況下，瀏覽器中會存在多個Global對象，即每個窗口都會有自己的執行上下文，在每個框架中定義的全局變量會自動成為框架中window對象的屬性；

<!-- 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>
 
// 框架集頁面
window.onload = showDiv;
function showDiv(){
    var rightFrame = parent[2];
    var myDiv = rightFrame.document.getElementById("myDiv");
    myDiv.innerHTML = "<h2>零點網絡</h2>";
}
 
<!-- top.html -->
<h2>Top頁面</h2>
<div><button id="showBtn">顯示圖片</button>
    <button id="closeBtn">關閉圖片</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>

對于構造函數，它也是函數，所以當用構造函數和相關的原型對象定義一個自定義類時，這個類只在一個單獨的窗口中定義；子窗口也可以引用這個類；

對于內置類來說，和自定義類就有所不同了；內置的類都會在所有的窗口中自動預定義，即每個窗口的window對象都包含原生類型的構造函數，因此每個框架一套自己的構造函數，這些構造函數一一對應，但并不相等；如：top.Object并不等于top.frames[0].Object，這個問題會影響到對跨框架傳遞的對象使用instanceof操作符；

WindowProxy對象：

window對象是客戶端Javascript的全局變量；但是從技術上來看，并不是這樣的；Web瀏覽器每次向窗口或窗體中載入新的內容，它都會開始一個新的JavaScript執行上下文，包含一個新創建的全局對象；但是當多個窗口或窗體在使用時，有一個重要的概念，盡管窗體或窗口載入了新的文檔，但是引用窗體或窗口的window對象還仍然是一個有效的引用；

所以客戶端Javascript有兩個重要的對象；客戶端全局對象處于作用域鏈的頂級，并且是全局變量和函數所定義的地方；事實上，全局對象會在窗口或窗體載入新內容時被替換；

而我們稱之為“window對象”的對象實際上不是全局對象，而是全局對象的一個代理；每次查詢或設置window對象的屬性時，就會在窗口或窗體的當前全局對象上查詢或設置相同的屬性；

HTML5規范稱這個代理對象為WindowProxy；由于它的代理行為，除了有更長的生命周期之外，代理對象表現得像真正的全局對象；如果可以比較兩個對象，那么區分它們會很困難；但是事實上，沒有辦法可以引用到真正的客戶端全局對象；全局對象處于作用域鏈的頂端，但是window、self、top、parent以及窗體的屬性全部返回代理對象；window.open()也返回代理對象；甚至頂級函數里this的值也是代理對象，而不是真正的全局對象；