HTML 編輯器

HTML 編輯器是用于編寫 HTML 的工具，使用 HTML 編輯器時以編輯主題，索引，自定義窗口，選擇添加搜索頁。

使用 Notepad 或 TextEdit 來編寫 HTML

下列是三種專門用于編輯 HTML 的 HTML 編輯器：

• Adobe Dreamweaver

• Microsoft Expression Web

• CoffeeCup HTML 編輯器

不過，我們同時推薦使用文本編輯器來學(xué)習(xí) HTML，比如 Notepad（PC）或 TextEdit（Mac）。我們相信，使用一款簡單的文本編輯器是學(xué)習(xí) HTML 的好方法。

我們可以使用 Notepad 工具來創(chuàng)建 HTML 文件，具體的步驟參考如下：

步驟1：啟動記事本

打開 Notepad 的步驟（ Windows 系統(tǒng)中）：

1. 打開“開始”菜單
   
2. 選擇“所有程序”
   
3. 選擇“附件”
   
4. 選擇“記事本”
   

步驟2：使用記事本編輯 HTML

在記事本中輸入 HTML 代碼：

步驟3：保存你的 HTML

在 Notepad 文件菜單中選擇另存為。

您可以以.htm或者.html擴展名保存您的 HTML 文件，兩者沒有區(qū)別，根據(jù)您的使用習(xí)慣即可。

將該文件保存在您常用的文件夾中，比如 w3cschool

步驟4：在瀏覽器中運行這個 HTML 文件

啟動您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。

運行顯示結(jié)果類似如下：

常用HTML編輯器下載

1、UltraEdit（編輯工具）

　UltraEdit 文本編輯器能夠滿足你一切編輯需要的編輯器。

　UltraEdit 文本編輯器是一套功能強大的文本編輯器。

　UltraEdit 文本編輯器內(nèi)建英文單字檢查，C ++ 及 VB 指令突顯，可同時編輯多個文件，而且即使開啟很大的文件速度也不會慢。

　UltraEdit 軟件附有 HTML 標簽顏色顯示，搜尋替換以及無限制的還原功能，一般大家喜歡用其來修改 EXE 或 DLL 文件。

2、Notepad++ (代碼編輯器）

Notepad++ 是在微軟視窗環(huán)境之下的一個免費的代碼編輯器。它使用較少的 CPU 功率，降低電腦系統(tǒng)能源消耗，但輕巧且執(zhí)行效率高，使得 Notepad++ 可完美地取代微軟視窗的記事本。

3、Adobe Dreamweaver CC

Dreamweaver CC 是世界頂級軟件廠商 Adobe 推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動應(yīng)用程序的網(wǎng)頁設(shè)計軟件。由于它支持代碼、拆分、設(shè)計、實時視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁，對于初級人員，你可以無需編寫任何代碼就能快速創(chuàng)建 Web 頁面。其成熟的代碼編輯工具更適用于 Web 開發(fā)高級人員的創(chuàng)作！

點擊下載 ?

4、EditPlus (文本編輯器)

EditPlus（文字編輯器）一套功能強大，可取代記事本的文字編輯器，擁有無限制的 Undo/Redo、英文拼字檢查、自動換行、列數(shù)標記、搜尋取代、同時編輯多文件、全屏幕瀏覽功能。而它還有一個好用的功能，就是它有監(jiān)視剪貼簿的功能，能夠同步于剪貼簿自動將文字貼進 EditPlus 的編輯窗口中，讓你省去做貼上的步驟。另外它也是一個好用的 HTML 編輯器，除了可以顏色標記 HTML Tag （同時支持 C/C++、Perl、Java）外，還內(nèi)建完整的 HTML 和 CSS1 指令功能，對于習(xí)慣用記事本編輯網(wǎng)頁的朋友，它可幫你節(jié)省一半以上的網(wǎng)頁制作時間，若你有安裝 IE 3.0 以上版本，它還會結(jié)合 IE 瀏覽器于 EditPlus 窗口中，讓你可以直接預(yù)覽編輯好的網(wǎng)頁（若沒安裝 IE，也可指定瀏覽器路徑）。 

• EditPlus3 編輯器手冊：http://xlrtb.cn/editplus3/

 

點擊下載?

HTML 調(diào)試

---

在編寫 HTML 代碼的時候通常會有以下兩種主要類型的錯誤：

• 語法錯誤：由于拼寫錯誤導(dǎo)致程序無法運行；通常熟悉語法并理解錯誤信息后很容易修復(fù)。
• 邏輯錯誤：不存在語法錯誤，但代碼無法按預(yù)期運行；通常邏輯錯誤比語法錯誤更難修復(fù)，因為無法得到指向錯誤源頭的信息。

HTML 本身不容易出現(xiàn)語法錯誤，因為瀏覽器是以寬松模式運行的，這意味著即使出現(xiàn)語法錯誤瀏覽器依然會繼續(xù)運行。瀏覽器通常都有內(nèi)建規(guī)則來解析書寫錯誤的標記，所以即使與預(yù)期不符，頁面仍可顯示出來。當(dāng)然，是存在隱患的。

注釋：HTML 之所以以寬松的方式進行解析，是因為 Web 創(chuàng)建的初心就是：人人可發(fā)布內(nèi)容，不去糾結(jié)代碼語法。

實例

我們通過一段含有錯誤的 HTML 代碼來討論一下：

實例標題

<h1>HTML 調(diào)試示例</h1>
<p>什么使得 HTML 出錯？
<ul>
<li>未閉合的元素：如果元素<strong>沒有正確的結(jié)束標記，那么將影響下方整個區(qū)域，這不是你期望的。
<li>錯誤嵌套元素：正確進行嵌套是一項重要的編碼習(xí)慣。<strong>重點（strong）<em>重點強調(diào)（strongly emphasised）？</strong>這又是什么鬼？
</em>
<li>未閉合的屬性：另一種 HTML 常見錯誤。來看一個示例：<a href="http://xlrtb.cn/>W3Cschool 主頁鏈接</a>
</ul>

嘗試一下 ?

以下是上述代碼出現(xiàn)的問題：

• 段落（Paragraph） 和列表項（list item）元素沒有結(jié)束標簽。但是由于元素的結(jié)束和另一個的開始很容易推斷出來，因此上圖中并沒有太嚴重的渲染錯誤。
• 第一個<strong>元素沒有結(jié)束標簽。這就嚴重了，因為該元素結(jié)束的位置難以確定。事實上所有剩余文本都加粗了。
• 第二個<li>元素中存在嵌套問題：對于下面這個代碼，在瀏覽器很難做出正確解析，理由同上。

  <strong> 重點（strong）<em> 重點強調(diào)（ strongly emphasised）？ </strong> 這又是什么鬼？ </em>

• href屬性缺少了一個雙引號。從而導(dǎo)致了一個最嚴重的問題：整個鏈接完全沒有渲染出來。

　但是瀏覽器會嘗試修補代碼錯誤：

• <p>和<li>元素加上了關(guān)閉標簽。
• 第一個<strong>沒有明確的關(guān)閉標簽，因此瀏覽器為之后所有獨立塊都補全了<strong></strong>。
• 瀏覽器（以下代碼節(jié)選自Chrome修補后的頁面代碼）是這樣修補嵌套錯誤的：

實例標題

<h1>HTML 調(diào)試示例</h1>

<p>什么使得 HTML 出錯？</p>

<ul>

    <li>未閉合的元素：如果元素

        <strong>沒有正確的結(jié)束標記，那么將影響下方整個區(qū)域，這不是你期望的。</strong>

    </li>

    <li>

        <strong>錯誤嵌套元素：正確進行嵌套是一項重要的編碼習(xí)慣。

            <strong>重點（strong）

                <em>重點強調(diào)（strongly emphasised）？</em>

            </strong>

            <em>這又是什么鬼？

            </em>

        </strong>

    </li>

    <li>

        <strong>未閉合的屬性：另一種 HTML 常見錯誤。來看一個示例：</strong>

    </li>

</ul>

嘗試一下 ?

• 刪除整個缺少雙引號的鏈接。最后一個列表項就成了：

實例代碼

<li>
<strong>未閉合的屬性：另一種 HTML 常見錯誤。來看一個示例：</strong>
</li>

嘗試一下 ?

閱讀以上示例后，你會發(fā)現(xiàn)保持良好 HTML 格式的重要性。