HTML 編輯器的介紹及推薦

HTML 編輯器

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

使用 Notepad 或 TextEdit 來編寫 HTML

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

• Adobe Dreamweaver

• Microsoft Expression Web

• CoffeeCup HTML 編輯器

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

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

步驟1：啟動(dòng)記事本

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

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

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

在記事本中輸入 HTML 代碼：

步驟3：保存你的 HTML

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

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

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

步驟4：在瀏覽器中運(yùn)行這個(gè) HTML 文件

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

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

常用HTML編輯器下載

1、UltraEdit（編輯工具）

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

　UltraEdit 文本編輯器是一套功能強(qiáng)大的文本編輯器。

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

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

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

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

3、Adobe Dreamweaver CC

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

點(diǎn)擊下載 ?

4、EditPlus (文本編輯器)

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

• EditPlus3 編輯器手冊(cè)：http://hgci.cn/editplus3/

 

點(diǎn)擊下載?

HTML 調(diào)試

---

在編寫 HTML 代碼的時(shí)候通常會(huì)有以下兩種主要類型的錯(cuò)誤：

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

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

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

實(shí)例

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

實(shí)例標(biāo)題

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

嘗試一下 ?

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

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

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

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

　但是瀏覽器會(huì)嘗試修補(bǔ)代碼錯(cuò)誤：

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

實(shí)例標(biāo)題

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

<p>什么使得 HTML 出錯(cuò)？</p>

<ul>

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

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

    </li>

    <li>

        <strong>錯(cuò)誤嵌套元素：正確進(jìn)行嵌套是一項(xiàng)重要的編碼習(xí)慣。

            <strong>重點(diǎn)（strong）

                <em>重點(diǎn)強(qiáng)調(diào)（strongly emphasised）？</em>

            </strong>

            <em>這又是什么鬼？

            </em>

        </strong>

    </li>

    <li>

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

    </li>

</ul>

嘗試一下 ?

• 刪除整個(gè)缺少雙引號(hào)的鏈接。最后一個(gè)列表項(xiàng)就成了：

實(shí)例代碼

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

嘗試一下 ?

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