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

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

第一章單元測試

1、設(shè)計(jì)JavaScript的公司是（）。

A:Microsoft

B:Google

C:Netscape

D:Sun

答案: 【Netscape】

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

A:https

B:mailto

C:ftp

D:http

答案: 【ftp】

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

A:QQ

B:Firefox

C:Chrome

D:IE

答案: 【Firefox;

Chrome;

IE】

4、Web的特點(diǎn)主要有（）。

A:與平臺無關(guān)性

B:動態(tài)性

C:分布式結(jié)構(gòu)

D:交互性

E:易導(dǎo)航和圖形化的界面

答案: 【與平臺無關(guān)性;

動態(tài)性;

分布式結(jié)構(gòu);

交互性;

易導(dǎo)航和圖形化的界面】

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

A:對

B:錯(cuò)

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

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

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

塊元素(block)
塊元素主要用來搭建網(wǎng)站架構(gòu)、頁面布局、承載內(nèi)容，常見塊元素對應(yīng)的標(biāo)簽有： 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，即這些標(biāo)簽對應(yīng)的HTML元素為塊元素。塊元素可設(shè)置寬高以及內(nèi)外邊距、在新行上開始，塊級元素如果不設(shè)置寬度和高度，則寬度默認(rèn)為父級元素（容器）的寬度。高度則根據(jù)內(nèi)容大小自動填充。
行元素(inline)
行元素用于加強(qiáng)內(nèi)容顯示、控制細(xì)節(jié)，例如：加粗、斜體等等，常見行元素對應(yīng)的標(biāo)簽有： 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 …等，行元素和其他元素都在一行上，高、行高及頂和底邊距不可改變，寬度就是它的文字或圖片的寬度，不可改變，可以設(shè)置左右內(nèi)、外邊距，行元素與其他行元素可共處一行

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

雖然標(biāo)簽可以嵌套，但為了提高瀏覽器的渲染效率，應(yīng)該盡量少使用標(biāo)簽嵌套。

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

。

內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學(xué)習(xí)。

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

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

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

另外，有些瀏覽器允許鍵盤快捷鍵（如Ctrl+B加粗）來加粗當(dāng)前選中的文本，F(xiàn)irefox使用Ctrl+B和Ctrl+I；

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

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

HTMLElement.isContentEditable屬性：

只讀屬性返回一個(gè)布爾值：如果當(dāng)前元素的內(nèi)容為可編輯狀態(tài)，則返回true，否則返回false；

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

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

designMode屬性：

將Document對象的designMode屬性設(shè)置為”on”使得整個(gè)文檔可編輯，設(shè)置為”off”將恢復(fù)為只讀文檔；designMode屬性并沒有對應(yīng)的HTML屬性；

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

如，使<iframe>內(nèi)部的文檔可編輯；

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

document.execCommand()方法：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例：一個(gè)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">標(biāo)題1 <h1></option>
            <option value="h2">標(biāo)題2 <h2></option>
            <option value="h3">標(biāo)題3 <h3></option>
            <option value="h4">標(biāo)題4 <h4></option>
            <option value="h5">標(biāo)題5 <h5></option>
            <option value="h6">標(biāo)題6 <h6></option>
            <option value="p">段落 <p></option>
            <option value="pre">預(yù)定義 <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>

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

在線咨詢

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

您的項(xiàng)目需求

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

整合營銷服務(wù)商

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

您的項(xiàng)目需求