Web前端開發(fā)技術智慧樹

eb前端開發(fā)技術（山東聯(lián)盟）知到章節(jié)測驗答案

第一章單元測試

1、設計JavaScript的公司是（）。

A:Microsoft

B:Google

C:Netscape

D:Sun

答案: 【Netscape】

2、訪問FTP站點使用的協(xié)議類型是（）。

A:https

B:mailto

C:ftp

D:http

答案: 【ftp】

3、以下屬于常用的主流瀏覽器軟件的是（）。

A:QQ

B:Firefox

C:Chrome

D:IE

答案: 【Firefox;

Chrome;

IE】

4、Web的特點主要有（）。

A:與平臺無關性

B:動態(tài)性

C:分布式結構

D:交互性

E:易導航和圖形化的界面

答案: 【與平臺無關性;

動態(tài)性;

分布式結構;

交互性;

易導航和圖形化的界面】

5、超鏈接的目標必須是一個網(wǎng)頁。

A:對

B:錯

、 HTML語言
HTML 指的是超文本標記語言 (Hyper Text Markup Language)，它不是一種編程語言，而是一種使用一套標記標簽（markup tag）來標記元素作用的標記語言，標記語言使用標記標簽來描述網(wǎng)頁的內容。標記標簽不會出現(xiàn)在頁面中，只有標簽中的內容才會顯示在頁面上。

二、 HTML標簽和HTML元素
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)，是由一對尖括號括起來的關鍵詞，稱為標簽名，如 <html>、<a>、<h1>。標簽不區(qū)分大小寫，但是推薦使用小寫，(X)HTML 版本中強制使用小寫，這樣更加嚴謹。
標簽的標記分為起始標簽和結束標簽。HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有內容。
起始標簽用于標記對應HTML元素的開始位置，結束標簽用于標記HTML元素的結束位置。
標簽分為單標簽和雙標簽，都需要起始標簽和結束標簽，不同的是單標簽起始、結束標簽都寫在一個尖括號里而雙標簽則分別寫在兩個尖括號里。單標簽又稱為空標簽，雙標簽又稱為閉合標簽。單標簽的結束標簽就是在標簽的右尖括號前面一個反斜杠，如<br />就是一個單標簽，雙標簽的結束標簽就是在左尖括號后比開始標簽多了一個反斜杠，如<html>和</html>就是一對開始標簽和結束標簽。

三、 HTML元素的分類
不同的HTML標簽對應的HTML元素可以根據(jù)位置特征等分為兩類:

塊元素(block)
塊元素主要用來搭建網(wǎng)站架構、頁面布局、承載內容，常見塊元素對應的標簽有： address、blockquote、center、dd、dl、dt、div、dir、fieldset、form、h1-h6、hr、isindex、li、menu、noframes、noscript、ol、table、p、pre、table、u、ul，即這些標簽對應的HTML元素為塊元素。塊元素可設置寬高以及內外邊距、在新行上開始，塊級元素如果不設置寬度和高度，則寬度默認為父級元素（容器）的寬度。高度則根據(jù)內容大小自動填充。
行元素(inline)
行元素用于加強內容顯示、控制細節(jié)，例如：加粗、斜體等等，常見行元素對應的標簽有： a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var …等，行元素和其他元素都在一行上，高、行高及頂和底邊距不可改變，寬度就是它的文字或圖片的寬度，不可改變，可以設置左右內、外邊距，行元素與其他行元素可共處一行

四、標簽嵌套
雙標簽的開始標簽和結束標簽之間可以嵌套其他標簽，不過需要遵循以下規(guī)則：
1、兩個標簽嵌套時必須確保開始標簽和結束標簽的層級是一致的，即開始標簽在外層的結束標簽必須在外層；
2、建議書寫HTML文本時嵌套標簽的內層標簽相對外層標簽進行縮進以體現(xiàn)嵌套關系；
3、塊元素標簽可以包含行元素標簽，但行元素標簽不能包含塊元素標簽，它們只能包含其它的行元素標簽；
4、a標簽想要用hover必須把它的路徑寫全；
5、偽類(hover/link/visited/active)只能加給a標簽，在支持 CSS 的瀏覽器中，偽類表示鏈接的不同狀態(tài)，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標懸停狀態(tài)：
1)link用在為訪問的連接上；
2)visited用在已經(jīng)訪問過的連接上；
3)hover用于鼠標光標置于其上的連接；
4)active用于獲得焦點(比如，被點擊)的連接上。
6、塊元素標簽之間：
1)h1、h2、h3、h4、h5、h6、p、dt標簽內不能再嵌套塊標簽；
2)li元素可以嵌入ul, ol, div；
3)div內可以再嵌套其他塊元素；
4)塊元素嵌套其他標簽時，同一層級必須都是塊元素，或必須都是行元素，不能一部分是塊元素，一部分是行元素。如<div><span></span><p></p></div>這種模式是錯誤的，因為span是行元素，p是塊元素，所以這個是錯誤的嵌套。

雖然標簽可以嵌套，但為了提高瀏覽器的渲染效率，應該盡量少使用標簽嵌套。

五、標簽的屬性
HTML 標簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標簽中使用,總是以名稱/值對的形式出現(xiàn)，屬性與屬性之間需要用空格隔開，屬性使用小寫。常用的屬性有class(樣式類)、id（屬性名）、style（顯示風格）、title（標題）、align（對齊方式）、bgcolor（背景色）、color（顏色）。
如：

。

內容是《Web前端開發(fā)之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>

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

另外，有些瀏覽器允許鍵盤快捷鍵（如Ctrl+B加粗）來加粗當前選中的文本，F(xiàn)irefox使用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屬性：

只讀屬性返回一個布爾值：如果當前元素的內容為可編輯狀態(tài)，則返回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()方法：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例：一個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還顯得不足；在實際開發(fā)中，一般采用的是第三方的類庫，比如百度UEditor和layui.layedit和Dojo，它們都包含了編輯器組件；

在線咨詢

上一篇：前端苦HTML+CSS久已
下一篇：hTML 樣式

您的項目需求

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

整合營銷服務商

Web前端開發(fā)技術智慧樹

您的項目需求