W3School中,推薦使用Notepad (PC) 或 TextEdit (Mac)來編寫並驗證HTML/CSS代碼 (https://www.w3school.com.cn/html/html_editors.asp).
使用Notepad編寫HTML代碼, 保存成HTML類型文件, 通過瀏覽器打開三個步驟. 在這里,實現了一個建議的HTML代碼編輯器, 同時可以實時的將網頁內容顯示出來.
程序運行的界面是這樣的:
左面窗口, 輸入HTML代碼, 右面自動會將HTML解釋的結果顯示出來.
代碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">coded()</script>
<title>HTML Coded TEST </title>
</head>
<body>
<p style="text-align: center;"> 這是一個HTML/CSS代碼的測試軟件</p>
<div id = 'container' style="height: 500px; width: 1000px; bgcolor : #101010">
<textarea autocomplete="off" id = "textareaCode" warp = "logical" spellcheck="false" stype="display:none;" style="height : 100%; width: 49%; background-color: #ffffc0; float: left" onkeypress="coded()">
<!DOCTYPE html>
<html>
<head> </head>
<body>
<p> 請輸入你的HTML/CSS代碼 </p>
</body>
</html>
</textarea>
<div id = 'textareaCoded' style="height : 100%; width : 49%; background-color: #ffffd0; float: right" wrap="virtual">
<p id = 'html_code'> 請輸入你的HTML/CSS代碼 </p>
</div>
</div>
<div>
<button type = 'button' id='bt' name = 'bt' onclick="coded()"> Coded </button>
</div>
<script>
function coded(){
var strCode = document.getElementById("textareaCode").value;
document.getElementById("html_code").innerHTML = strCode;
}
</script>
</body>
</html>
代碼解釋:
1 在這個代碼中, 使用了一個 div(container)限定一塊區域, 然后左面加入一個文本域(textarea) 用來輸入HTML代碼, 右面加入一個div(textareaCoded), 用來顯示Web頁面.
2 編寫JavaScrip程序, 用來將左面文本區域輸入的代碼, 搬到右面去
<script>
function coded(){
var strCode = document.getElementById("textareaCode").value;
document.getElementById("html_code").innerHTML = strCode;
}
</script>
3. 在文本域中,加入鍵盤輸入相應事件,用來實時的顯示解釋的代碼.
onkeypress="coded()
4. 你也可以將HTML代碼拷貝到左面的窗口, 然后點擊下方的Coded按鈕, 把代碼顯示出來
<div>
<button type = 'button' id='bt' name = 'bt' onclick="coded()"> Coded </button>
</div>