【工具】HTML 編輯器的介紹及推薦、html除錯-有解無憂

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

常用HTML編輯器下載

1、用 UltraEdit（編輯工具）||點擊下載

UltraEdit文本編輯器能夠滿足你一切編輯需要的編輯器，
UltraEdit文本編輯器是一套功能強大的文本編輯器，
UltraEdit文本編輯器內建英文單字檢查，C++及VB指令突顯，可同時編輯多個檔案，而且即使開啟很大的檔案速度也不會慢，
UltraEdit軟體附有HTML標簽顏色顯示，搜尋替換以及無限制的還原功能，一般大家喜歡用其來修改EXE或DLL檔案，

2、Notepad++(代碼編輯器）||點擊下載

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

3、Adobe Dreamweaver CC||點擊下載

dreamweaver cc 是世界頂級軟體廠商 adobe 推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程式的網頁設計軟體，由于它支持代碼、拆分、設計、實時視圖等多種方式來創作、撰寫和修改網頁，對于初級人員，你可以無需撰寫任何代碼就能快速創建 web 頁面，其成熟的代碼編輯工具更適用于 web 開發高級人員的創作！

4、EditPlus(文本編輯器)||點擊下載 EditPlus3 編輯器手冊

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

5.Visual Studio Code||點擊下載

該編輯器也集成了所有一款現代編輯器所應該具備的特性，包括語法高亮（syntax high lighting），可定制的熱鍵系結（customizable keyboard bindings），括號匹配（bracket matching）以及代碼片段收集（snippets），Somasegar 也告訴筆者這款編輯器也擁有對 Git 的開箱即用的支持，

6.Sublime Text||點擊下載

Sublime Text 是一個文本編輯器（收費軟體，可以無限期試用，但是會有激活提示彈窗），同時也是一個先進的代碼編輯器，Sublime Text是由程式員Jon Skinner于2008年1月份所開發出來，它最初被設計為一個具有豐富擴展功能的Vim，
Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等，還可自定義鍵系結，選單和工具列，Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時專案切換，多選擇，多視窗等等，Sublime Text 是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等作業系統，

7.HBuilder||點擊下載

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE， [1] HBuilder的撰寫用到了Java、C、Web和Ruby，HBuilder本身主體是由Java撰寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件，

8.webstorm||點擊下載

WebStorm 是jetbrains公司旗下一款JavaScript 開發工具，已經被廣大中國JS開發者譽為“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等，與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能，

HTML除錯/在撰寫HTML代碼的時候通常會有以下兩種主要型別的錯誤：

1>語法錯誤：由于拼寫錯誤導致程式無法運行；通常熟悉語法并理解錯誤資訊后很容易修復，

2>邏輯錯誤：不存在語法錯誤，但代碼無法按預期運行；通常邏輯錯誤比語法錯誤更難修復，因為無法得到指向錯誤源頭的資訊，

HTML 本身不容易出現語法錯誤，因為瀏覽器是以寬松模式運行的，這意味著即使出現語法錯誤瀏覽器依然會繼續運行，瀏覽器通常都有內建規則來決議書寫錯誤的標記，所以即使與預期不符，頁面仍可顯示出來，當然，是存在隱患的，
注釋：HTML 之所以以寬松的方式進行決議，是因為 Web 創建的初心就是：人人可發布內容，不去糾結代碼語法，

錯誤代碼展示：了解保持良好 HTML 格式的重要性

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

以下是上述代碼出現的問題：

段落（Paragraph）和串列項（list item）元素沒有結束標簽，但是由于元素的結束和另一個的開始很容易推斷出來，因此上圖中并沒有太嚴重的渲染錯誤，
第一個元素沒有結束標簽，這就嚴重了，因為該元素結束的位置難以確定，事實上所有剩余文本都加粗了，
第二個<li>元素中存在嵌套問題：對于“重點（strong）重點強調（strongly emphasised）？這又是什么鬼？”瀏覽器很難做出正確解釋，理由同
href屬性缺少了一個雙引號，從而導致了一個最嚴重的問題：整個鏈接完全沒有渲染出來，

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

和<li>元素加上了關閉標簽，
第一個沒有明確的關閉標簽，因此瀏覽器為之后所有獨立塊都補全了，
瀏覽器是這樣修補嵌套錯誤的：

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

洗掉整個缺少雙引號的鏈接，最后一個串列項就成了

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/24567.html

標籤：其他

上一篇：第一章：了解Web及網路基礎

下一篇：你也看不起做外包的程式員？