前端程序員不可忽略的 11 個有用的 HTML 屬性

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》視頻課程學習。

在HTML中，任何元素都可以被編輯；啟用編輯功能：HTML標簽設置contenteditable屬性，或者在Javascript中設置該元素的contentEditable屬性；

<div id="editor" contenteditable>單擊編輯</div>
<div id="mydiv">也可編輯</div>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
</script>

元素被設置成可編輯后，除了常規的插入刪除等操作外，還可以使用document.execCommand()方法對當前選擇的內容進行編輯，比如，設置文本的樣式，如加粗、傾斜等；

另外，有些瀏覽器允許鍵盤快捷鍵（如Ctrl+B加粗）來加粗當前選中的文本，Firefox使用Ctrl+B和Ctrl+I；

contenteditable也存在著兼容問題，如，當回車換行時，不同的瀏覽器有不同有處理，標準瀏覽器一般會使用div，而IE會使用p來分段，有些會使用br；所以，可以使用一個替代的方案document.execCommand()方法；如：

mydiv.addEventListener("keydown", function(e){
    if(e.keyCode == 13)
        document.execCommand("defaultParagraphSeparator", false, "p");
});

HTMLElement.isContentEditable屬性：

只讀屬性返回一個布爾值：如果當前元素的內容為可編輯狀態，則返回true，否則返回false；

var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
console.log(mydiv.isContentEditable);

瀏覽器有可能為表單控件和具有contenteditable元素支持自動拼寫檢查；在支持該功能的瀏覽器中，檢查可能默認開啟或關閉；為元素添加spellcheck屬性來顯式開啟拼寫檢查，或設置為false來顯式關閉該功能；

designMode屬性：

將Document對象的designMode屬性設置為”on”使得整個文檔可編輯，設置為”off”將恢復為只讀文檔；designMode屬性并沒有對應的HTML屬性；

window.onload = function(){
    document.designMode = "on";
}

如，使<iframe>內部的文檔可編輯；

<iframe id="editor" src="about:blank"></iframe>
<script>
window.onload = function(){
    var editor = document.getElementById("editor");
    editor.contentDocument.designMode = "on";
}
</script>

document.execCommand()方法：

瀏覽器定義了多個文本編輯命令，但大部分沒有鍵盤快捷鍵；為了執行這些命令，可以使用Document對象的execCommand()方法；當HTML文檔切換到designMode模式或存在可編輯元素或當前選擇或給出范圍，就可以使用此方法運行命令來操縱內容區域的元素；

語法：bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)；

其返回一個Boolean值，如果是false，則表示操作不被支持或未被啟用；該方法需要三個參數：aCommandName命令名稱，如”bold”、”subscript”、”justifycenter”和”insertimage”等之類的字符串；aShowDefaultUI是個布爾值，表示瀏覽器要不要提示用戶輸入所需要值，一般為false；aValueArgument為用戶輸入的值，默認為null；

<div id="mydiv">Web前端開發</div>
<button id="btnBold">加粗</button>
<button id="btnLink">插入鏈接</button>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
var btnBold = document.getElementById("btnBold");
btnBold.addEventListener("click",bold, false);
function bold(){
    document.execCommand("bold");
}
var btnLink = document.getElementById("btnLink");
btnLink.addEventListener("click", link, false);
function link(){
    var url = prompt("輸入鏈接URL：");
    if(url)
        document.execCommand("createlink", true,url);
}
</script>

命令列表：

2D-Position：允許通過拖曳移動絕對定位的對象；
AbsolutePosition：設定元素的 position 屬性為“absolute”(絕對)；
backColor：修改文檔的背景顏色，需要一個<color>類型的字符串值作為參數傳入，注：IE瀏覽器用這個設置文字的背景顏色；
BlockDirLTR：目前尚未支持；
BlockDirRTL：目前尚未支持；
bold：開啟或關閉選中文字或插入點的粗體字效果，IE使用 <strong>標簽，而不是<b>標簽；
BrowseMode：目前尚未支持；
ClearAuthenticationCache：清除緩存中的所有身份驗證憑據；
contentReadOnly：通過傳入一個布爾參數設置文檔內容的可編輯性；(IE瀏覽器不支持)
copy：拷貝當前選中內容到剪貼板；
CreateBookmark：創建一個書簽錨或獲取當前選中區或插入點的書簽錨的名稱；
createLink：將選中內容創建為一個錨鏈接，該命令需要一個hrefURI字符串作為參數值傳入；
cut：剪貼當前選中的文字并復制到剪貼板；
decreaseFontSize：給選中文字加上<small>標簽，或在選中點插入該標簽；(IE瀏覽器不支持)
defaultParagraphSeparator：更改在可編輯文本區域中創建新段落時使用的段落分隔符
delete：刪除選中部分；
DirLTR：目前尚未支持；
DirRTL：目前尚未支持；
EditMode：目前尚未支持；
enableAbsolutePositionEditor：啟用或禁用允許移動絕對定位元素的抓取器；
enableInlineTableEditing：啟用或禁用表格行和列插入和刪除控件；(IE瀏覽器不支持)
enableObjectResizing：啟用或禁用圖像和其他對象的大小可調整大小手柄；(IE瀏覽器不支持)
fontName：在插入點或者選中文字部分修改字體名稱，需要提供一個字體名稱字符串 (例如："Arial")作為參數；
fontSize：在插入點或者選中文字部分修改字體大小，需要提供一個HTML字體尺寸 (1-7) 作為參數；
foreColor：在插入點或者選中文字部分修改字體顏色，需要提供一個顏色值字符串作為參數；
formatBlock：添加一個HTML塊式標簽在包含當前選擇的行, 如果已經存在了，更換包含該行的塊元素 (在 Firefox中, BLOCKQUOTE 是一個例外 -它將包含任何包含塊元素)；需要提供一個標簽名稱字符串作為參數；幾乎所有的塊樣式標簽都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE")；(IE瀏覽器僅僅支持標題標簽 H1 - H6, ADDRESS, 和 PRE,使用時還必須包含標簽分隔符 < >, 例如 "<H1>")；
forwardDelete：刪除光標所在位置的字符，和按下刪除鍵一樣；
heading：添加一個標題標簽在光標處或者所選文字上，需要提供標簽名稱字符串作為參數 (例如. "H1", "H6"). (IE 和 Safari不支持)；
hiliteColor：更改選擇或插入點的背景顏色，需要一個顏色值字符串作為值參數傳遞；UseCSS 必須開啟此功能。(IE瀏覽器不支持)；
increaseFontSize：在選擇或插入點周圍添加一個BIG標簽；(IE瀏覽器不支持)
indent：縮進選擇或插入點所在的行，在 Firefox 中, 如果選擇多行，但是這些行存在不同級別的縮進, 只有縮進最少的行被縮進；
InlineDirLTR：目前尚未支持；
InlineDirRTL：目前尚未支持；
insertBrOnReturn：控制當按下Enter鍵時，是插入br標簽還是把當前塊元素變成兩個；(IE瀏覽器不支持)；
InsertButton：用按鈕控件覆蓋當前選中區；
InsertFieldset：用方框覆蓋當前選中區；
insertHorizontalRule：在插入點插入一個水平線（刪除選中的部分）；
insertHTML：在插入點插入一個HTML字符串（刪除選中的部分），需要一個個HTML字符串作為參數；(IE瀏覽器不支持)；
InsertIFrame：用內嵌框架覆蓋當前選中區；
insertImage：在插入點插入一張圖片（刪除選中的部分），需要一個 URL 字符串作為參數，這個 URL 圖片地址至少包含一個字符，空白字符也可以（IE會創建一個鏈接其值為null）；
InsertInputButton：用按鈕控件覆蓋當前選中區；
InsertInputCheckbox：用復選框控件覆蓋當前選中區；
InsertInputFileUpload：用文件上載控件覆蓋當前選中區；
InsertInputHidden：插入隱藏控件覆蓋當前選中區；
InsertInputImage：用圖像控件覆蓋當前選中區；
InsertInputPassword：用密碼控件覆蓋當前選中區；
InsertInputRadio：用單選鈕控件覆蓋當前選中區；
InsertInputReset：用重置控件覆蓋當前選中區；
InsertInputSubmit：用提交控件覆蓋當前選中區；
InsertInputText：用文本控件覆蓋當前選中區；
InsertMarquee：用空字幕覆蓋當前選中區；
insertOrderedList：在插入點或者選中文字上創建一個有序列表；
insertUnorderedList：在插入點或者選中文字上創建一個無序列表；
insertParagraph：在選擇或當前行周圍插入一個段落；(IE會在插入點插入一個段落并刪除選中的部分)
InsertSelectDropdown：用下拉框控件覆蓋當前選中區；
InsertSelectListbox：用列表框控件覆蓋當前選中區；
InsertTextArea：用多行文本輸入控件覆蓋當前選中區；
insertText：在光標插入位置插入文本內容或者覆蓋所選的文本內容；
InsertUnorderedList：切換當前選中區是項目符號列表還是常規格式化塊；
italic：在光標插入點開啟或關閉斜體字；(IE使用EM標簽，而不是I )；
justifyCenter：對光標插入位置或者所選內容進行文字居中；
justifyFull：對光標插入位置或者所選內容進行文本對齊；
justifyLeft：對光標插入位置或者所選內容進行左對齊；
justifyRight：對光標插入位置或者所選內容進行右對齊；
JustifyNone：目前尚未支持；
LiveResize：迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀，而不是只在移動或縮放完成后更新；
MultipleSelection：允許當用戶按住 Shift 或 Ctrl 鍵時一次選中多于一個站點可選元素；
open：打開；
outdent：對光標插入行或者所選行內容減少縮進量；
OverWrite：切換文本狀態的插入和覆蓋；
paste：在光標位置粘貼剪貼板的內容，如果有被選中的內容，會被替換；剪貼板功能必須在 user.js 配置文件中啟用；
PlayImage：目前尚未支持
Print：打開打印對話框以便用戶可以打印當前頁；
redo：重做被撤銷的操作；
Refresh：刷新當前文檔；
removeFormat：對所選內容去除所有格式；
RemoveParaFormat：目前尚未支持；
SaveAs：將當前 Web 頁面保存為文件；
selectAll：選中編輯區里的全部內容；
SizeToControl：目前尚未支持；
SizeToControlHeight：目前尚未支持；
SizeToControlWidth：目前尚未支持；
Stop：停止；
StopImage：目前尚未支持；
strikeThrough：在光標插入點開啟或關閉刪除線；
subscript：在光標插入點開啟或關閉下角標；
superscript：在光標插入點開啟或關閉上角標；
UnBookmark：從當前選中區中刪除全部書簽；
underline：在光標插入點開啟或關閉下劃線；
undo：撤銷最近執行的命令；
unlink：去除所選的錨鏈接<a>標簽；
Unselect：清除當前選中區的選中狀態；
useCSS：切換使用HTML tags還是CSS來生成標記，要求一個布爾值true/false作為參數；注: 這個屬性是邏輯上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)；該屬性已經廢棄，使用 styleWithCSS 代替；
styleWithCSS：用這個取代 useCSS 命令，false 生成格式化元素；

不同的瀏覽器實現不同的編輯命令；只有少部分命令得到了很好的支持，所以在使用之前一定要檢測瀏覽器是否支持該命令；

document.queryCommandSupport(command)方法：傳入command命令名，返回一個布爾值，用來查詢瀏覽器是否支持該命令；

var selectAll = document.queryCommandSupported("selectAll");
console.log(selectAll);

doument.queryCommandEnable(command)方法：傳入command命令名，返回一個布爾值，查詢瀏覽器中指定的編輯指令是否可用；

mydiv.addEventListener("mouseup",function(e){
    var createLink = document.queryCommandEnabled("createLink");
    console.log(createLink);
},false);

document.queryCommandState(command)方法：用來判定命令的當前狀態：有一些命令如”bold”和”italic”有一個布爾值狀態，開或關取決于當前選區或光標的位置；這些命令通常用工具欄上的開關按鈕表示；

var flag = document.queryCommandState("bold");
console.log(flag);

document.queryCommandValue()方法：查詢相關聯的值，有些命令如”fontname”有一個相關聯的值，字體系列名；

var fontSize = document.queryCommandValue("fontSize");
console.log(fontSize);  // 默認是3
var foreColor = document.queryCommandValue("foreColor");
console.log(foreColor);  // rgb(0,0,0)

document.queryCommandIndeterm(command)方法：返回一個布爾值，用于檢測指定的命令是否處于不確定狀態；例如，如果當前選取的文本使用了兩種不同的字體，使用該方法查詢”fontname”的結果是不確定的；

需要注意的是，這些編輯器生成的HTML標記很可能是雜亂無章的；

另外，一旦用戶編輯了某元素的內容，就可以使用innerHTML屬性得到已經編輯內容的HTML標記；如何處理這些富文本，有多種方式，可以把它存儲在隱藏的表單控件中，并通過提交該表單發送到服務器，也可以保存在本地；

示例：一個HTML編輯器：

<head>
    <style>
        *{margin:0;padding:0; box-sizing: border-box;}
        #editor{width:600px;margin:100px auto;}
        #editor #toolBar1,#editor #toolBar2{width:100%;background-color: lightgray;}
        img.intLink{cursor:pointer;border:none;}
        #toolBar1 select{font-size:16px;}
        #textBox{width:100%; height:200px; border:1px solid;padding:10px; overflow:scroll;}
        #textBox #sourceText{margin:0;padding:0; min-width:498px; min-height:200px;}
    </style>
    <script>
        var oDoc, sDefTxt;
        function initDoc(){
            oDoc = document.getElementById("textBox");
            sDefTxt = oDoc.innerHTML;
            if(document.compForm.switchMode.checked)
                setDocMode(true);
        }
        function formatDoc(sCmd, sValue){
            if(validateMode()){
                document.execCommand(sCmd, false, sValue);
                oDoc.focus();
            }
        }
        function validateMode(){
            if(!document.compForm.switchMode.checked)
                return true;
            alert("Uncheck 'Show HTML");
            oDoc.focus();
            return false;
        }
        function setDocMode(bToSource){
            var oContent;
            if(bToSource){
                oContent = document.createTextNode(oDoc.innerHTML);
                oDoc.innerHTML = "";
                var oPre = document.createElement("pre");
                oDoc.contentEditable = false;
                oPre.id = "sourceText";
                oPre.contentEditable = true;
                oPre.appendChild(oContent);
                oDoc.appendChild(oPre);
                document.execCommand("defaultParagraphSeparator", false, "div");
            }else{
                if(document.all)
                    oDoc.innerHTML = oDoc.innerText;
                else{
                    oContent = document.createRange();
                    oContent.selectNodeContents(oDoc.firstChild);
                    oDoc.innerHTML = oContent.toString();
                }
                oDoc.contentEditable = true;
            }
            oDoc.focus();
        }
        function printDoc(){
            if(!validateMode())
                return;
            var oPrintWin = window.open("","_blank","width=450,height=450,left=400,top=100,menubar=yes,toolbar=no,scrollbars=yes");
            oPrintWin.document.open();
            oPrintWin.document.write("<!doctype html><html><head><title>打印<\/title><\/head><body onload='print();'>" + oDoc.innerHTML + "<\/body><\/html>");
            oPrintWin.document.close();
        }
    </script>
</head>
<body onload="initDoc()">
<div id="editor">
<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML; return true;}return false;">
    <input type="hidden" name="myDoc">
    <div id="toolBar1">
        <select onchange="formatDoc('formatblock',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option selected>-文本格式-</option>
            <option value="h1">標題1 <h1></option>
            <option value="h2">標題2 <h2></option>
            <option value="h3">標題3 <h3></option>
            <option value="h4">標題4 <h4></option>
            <option value="h5">標題5 <h5></option>
            <option value="h6">標題6 <h6></option>
            <option value="p">段落 <p></option>
            <option value="pre">預定義 <pre></option>
        </select>
        <select onchange="formatDoc('fontname', this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-字體-</option>
            <option>Arial</option>
            <option>Arial Black</option>
            <option>Courier New</option>
            <option>Times New Roman</option>
        </select>
        <select onchange="formatDoc('fontsize',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-字號-</option>
            <option value="1">非常小</option>
            <option value="2">小</option>
            <option value="3">正常</option>
            <option value="4">中大</option>
            <option value="5">大</option>
            <option value="6">非常大</option>
            <option value="7">最大</option>
        </select>
        <select onchange="formatDoc('forecolor',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-顏色-</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
        <select onchange="formatDoc('backcolor',this[this.selectedIndex].value); this.selectedIndex=0;">
            <option class="heading" selected>-背景顏色-</option>
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="black">Black</option>
        </select>
    </div>
    <div id="toolBar2">
    <img class="intLink" src="icons/clean.gif" onclick="if(validateMode()&&confirm('確定清除所有嗎？')){oDoc.innerHTML = sDefTxt};" /> 
    <img class="intLink" src="icons/print.png" onclick="printDoc();" /> 
    <img class="intLink" src="icons/undo.gif" onclick="formatDoc('undo');" /> 
    <img class="intLink" src="icons/redo.gif" onclick="formatDoc('redo');" /> 
    <img class="intLink" src="icons/format.png" onclick="formatDoc('removeFormat');" /> 
    <img class="intLink" src="icons/bold.gif" onclick="formatDoc('bold')" /> 
    <img class="intLink" src="icons/italic.gif" onclick="formatDoc('italic')" /> 
    <img class="intLink" src="icons/underline.gif" onclick="formatDoc('underline')" /> 
    <img class="intLink" src="icons/justifyleft.gif" onclick="formatDoc('justifyleft')" /> 
    <img class="intLink" src="icons/justifycenter.gif" onclick="formatDoc('justifycenter')" /> 
    <img class="intLink" src="icons/justifyright.gif" onclick="formatDoc('justifyright')" /> 
    <img class="intLink" src="icons/numberedlist.gif" onclick="formatDoc('insertorderedlist')" /> 
    <img class="intLink" src="icons/dottedlist.gif" onclick="formatDoc('insertunorderedlist')" /> 
    <img class="intLink" src="icons/quote.gif" onclick="formatDoc('formatblock','blockquote')" /> 
    <img class="intLink" src="icons/outdent.gif" onclick="formatDoc('outdent')" /> 
    <img class="intLink" src="icons/indent.gif" onclick="formatDoc('indent')" /> 
    <img class="intLink" src="icons/hyperlink.gif" onclick="var sLnk=prompt('輸入鏈接地址','http:\/\/'); if(sLnk&&sLnk!=''&&sLnk!='http:\/\/'){formatDoc('createlink',sLnk);}" /> 
    <img class="intLink" src="icons/cut.gif" onclick="formatDoc('cut')" /> 
    <img class="intLink" src="icons/copy.gif" onclick="formatDoc('copy')" /> 
    <img class="intLink" src="icons/paste.gif" onclick="formatDoc('paste')" /> 
    </div>
    <div id="textBox" contenteditable="true"><p>富文本編輯器</p></div>
    <p id="editMode">
        <input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);">
        <label for="switchBox">顯示HTML</label>
    </p>
    <p><input type="submit" value="保存" /></p>
</form>
</div>
</body>

這些瀏覽器內置的編輯功能對用戶輸入少量的富文本來說，足夠使用了；但要解決所有種類的文檔的編輯來說，這些API還顯得不足；在實際開發中，一般采用的是第三方的類庫，比如百度UEditor和layui.layedit和Dojo，它們都包含了編輯器組件；

TML 屬性

HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標簽中規定。

屬性實例

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：

[demo]

<html>

<head>

</head>

<body>

<a >

This is a link</a>

</body>

</html>

[/demo]

更多 HTML 屬性實例

屬性例子 1:

<h1> 定義標題的開始。

<h1 align="center"> 擁有關于對齊方式的附加信息。

[demo]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

<h1 align="center">This is heading 1</h1>

<p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。</p>

</body>

</html>

[/demo]

屬性例子 2:

<body> 定義 HTML 文檔的主體。

<body bgcolor="yellow"> 擁有關于背景顏色的附加信息。

[demo]

<html>

<head>

</head>

<h2>請看: 改變了顏色的背景。</h2>

</body>

</html>

[/demo]

屬性例子 3:

<table> 定義 HTML 表格。（您將在稍后的章節學習到更多有關 HTML 表格的內容）

<table border="1"> 擁有關于表格邊框的附加信息。

HTML 提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

始終為屬性值加引號

屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。

在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：

name='Bill "HelloWorld" Gates'

下面列出了適用于大多數 HTML 元素的屬性：

屬性值描述

class classname 規定元素的類名（classname）

id id 規定元素的唯一 id

style style_definition 規定元素的行內樣式（inline style）

title text 規定元素的額外信息（可在工具提示中顯示）

HTML 全局屬性

HTML 屬性賦予元素意義和語境。

下面的全局屬性可用于任何 HTML 元素。

HTML 全局屬性

屬性描述

accesskey 規定激活元素的快捷鍵。

class 規定元素的一個或多個類名（引用樣式表中的類）。

contenteditable 規定元素內容是否可編輯。

contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。

data-* 用于存儲頁面或應用程序的私有定制數據。

dir 規定元素中內容的文本方向。

draggable 規定元素是否可拖動。

dropzone 規定在拖動被拖動數據時是否進行復制、移動或鏈接。

hidden 規定元素仍未或不再相關。

id 規定元素的唯一 id。

lang 規定元素內容的語言。

spellcheck 規定是否對元素進行拼寫和語法檢查。

style 規定元素的行內 CSS 樣式。

tabindex 規定元素的 tab 鍵次序。

title 規定有關元素的額外信息。

translate 規定是否應該翻譯元素內容。

HTML 事件屬性

Window 事件屬性

針對 window 對象觸發的事件（應用到 <body> 標簽）：

屬性值描述

onafterprint script 文檔打印之后運行的腳本。

onbeforeprint script 文檔打印之前運行的腳本。

onbeforeunload script 文檔卸載之前運行的腳本。

onerror script 在錯誤發生時運行的腳本。

onhaschange script 當文檔已改變時運行的腳本。

onload script 頁面結束加載之后觸發。

onmessage script 在消息被觸發時運行的腳本。

onoffline script 當文檔離線時運行的腳本。

ononline script 當文檔上線時運行的腳本。

onpagehide script 當窗口隱藏時運行的腳本。

onpageshow script 當窗口成為可見時運行的腳本。

onpopstate script 當窗口歷史記錄改變時運行的腳本。

onredo script 當文檔執行撤銷（redo）時運行的腳本。

onresize script 當瀏覽器窗口被調整大小時觸發。

onstorage script 在 Web Storage 區域更新后運行的腳本。

onundo script 在文檔執行 undo 時運行的腳本。

onunload script 一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

Form 事件

由 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：

屬性值描述

onblur script 元素失去焦點時運行的腳本。

onchange script 在元素值被改變時運行的腳本。

oncontextmenu script 當上下文菜單被觸發時運行的腳本。

onfocus script 當元素失去焦點時運行的腳本。

onformchange script 在表單改變時運行的腳本。

onforminput script 當表單獲得用戶輸入時運行的腳本。

oninput script 當元素獲得用戶輸入時運行的腳本。

oninvalid script 當元素無效時運行的腳本。

onreset script 當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。

onselect script 在元素中文本被選中后觸發。

onsubmit script 在提交表單時觸發。

Keyboard 事件

屬性值描述

onkeydown script 在用戶按下按鍵時觸發。

onkeypress script 在用戶敲擊按鈕時觸發。

onkeyup script 當用戶釋放按鍵時觸發。

Mouse 事件

由鼠標或類似用戶動作觸發的事件：

屬性值描述

onclick script 元素上發生鼠標點擊時觸發。

ondblclick script 元素上發生鼠標雙擊時觸發。

ondrag script 元素被拖動時運行的腳本。

ondragend script 在拖動操作末端運行的腳本。

ondragenter script 當元素元素已被拖動到有效拖放區域時運行的腳本。

ondragleave script 當元素離開有效拖放目標時運行的腳本。

ondragover script 當元素在有效拖放目標上正在被拖動時運行的腳本。

ondragstart script 在拖動操作開端運行的腳本。

ondrop script 當被拖元素正在被拖放時運行的腳本。

onmousedown script 當元素上按下鼠標按鈕時觸發。

onmousemove script 當鼠標指針移動到元素上時觸發。

onmouseout script 當鼠標指針移出元素時觸發。

onmouseover script 當鼠標指針移動到元素上時觸發。

onmouseup script 當在元素上釋放鼠標按鈕時觸發。

onmousewheel script 當鼠標滾輪正在被滾動時運行的腳本。

onscroll script 當元素滾動條被滾動時運行的腳本。

Media 事件

由媒介（比如視頻、圖像和音頻）觸發的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

屬性值描述

onabort script 在退出時運行的腳本。

oncanplay script 當文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時）。

oncanplaythrough script 當媒介能夠無需因緩沖而停止即可播放至結尾時運行的腳本。

ondurationchange script 當媒介長度改變時運行的腳本。

onemptied script 當發生故障并且文件突然不可用時運行的腳本（比如連接意外斷開時）。

onended script 當媒介已到達結尾時運行的腳本（可發送類似“感謝觀看”之類的消息）。

onerror script 當在文件加載期間發生錯誤時運行的腳本。

onloadeddata script 當媒介數據已加載時運行的腳本。

onloadedmetadata script 當元數據（比如分辨率和時長）被加載時運行的腳本。

onloadstart script 在文件開始加載且未實際加載任何數據前運行的腳本。

onpause script 當媒介被用戶或程序暫停時運行的腳本。

onplay script 當媒介已就緒可以開始播放時運行的腳本。

onplaying script 當媒介已開始播放時運行的腳本。

onprogress script 當瀏覽器正在獲取媒介數據時運行的腳本。

onratechange script 每當回放速率改變時運行的腳本（比如當用戶切換到慢動作或快進模式）。

onreadystatechange script 每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）。

onseeked script 當 seeking 屬性設置為 false（指示定位已結束）時運行的腳本。

onseeking script 當 seeking 屬性設置為 true（指示定位是活動的）時運行的腳本。

onstalled script 在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。

onsuspend script 在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。

ontimeupdate script 當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。

onvolumechange script 每當音量改變時（包括將音量設置為靜音）時運行的腳本。

onwaiting script 當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩沖更多數據）運行腳本

在線咨詢

上一篇：HTML中button標簽點擊實現頁面跳轉的三種方法
下一篇：一文詳解CSS常見的五大布局

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端程序員不可忽略的 11 個有用的 HTML 屬性

1. multiple

2.contenteditable

3.spellcheck

4.download

5. accept

6. translate

7.poster

8.inputmode

9. pattern

10.autocomplete

11.autofocus

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

您的項目需求