【ツール】HTMLエディタの紹介と推奨、HTMLデバッグ

HTMLエディターは、HTMLを作成するためのツールです。HTMLエディターを使用すると、トピック、インデックスの編集、ウィンドウのカスタマイズ、検索ページの追加を選択できます。

一般的なHTMLエディターのダウンロード

UltraEditテキストエディタは、すべての編集ニーズを満たすことができます。
UltraEditテキストエディタは、強力なテキストエディタのセットです。
UltraEditテキストエディタには英語の単語チェックが組み込まれており、C ++およびVBコマンドが強調表示され、複数のファイルを同時に編集でき、大きなファイルを開いても速度が遅くなることはありません。
UltraEditソフトウェアは、HTMLタグのカラー表示、検索と置換、無制限の復元機能を備えています。一般的に、人々はそれを使用してEXEまたはDLLファイルを変更することを好みます。

Notepad ++は、MicrosoftWindows環境での無料のコードエディタです。CPUパワーの使用量が少なく、コンピューターシステムのエネルギー消費量が削減されますが、軽量で高効率であるため、Notepad ++はMicrosoftWindowsNotepadの完全な代替品になります。

3. Adobe Dreamweaver CC ||クリックしてダウンロード

Dreamweaver ccは、ウェブサイトやモバイルアプリケーションを作成および編集するために、世界のトップソフトウェアメーカーであるadobeが立ち上げたビジュアル編集インターフェイスを備えたウェブデザインソフトウェアのセットです。コード、分割、デザイン、リアルタイムビューなど、Webページの作成、作成、変更を行う複数の方法をサポートしているため、ジュニアスタッフ向けに、コードを記述せずにすばやくWebページを作成できます。その成熟したコード編集ツールは、上級Web開発者の作成により適しています。

4. EditPlus（テキストエディタ）||クリックして EditPlus3エディタのマニュアルをダウンロードします

EditPlus（テキストエディタ）は、メモ帳を無制限の元に戻す/やり直し、英語のスペルチェック、自動行折り返し、列番号のマーキング、検索と置換、複数のファイルの同時編集、全画面参照機能で置き換えることができる強力なテキストエディタです。また、スクラップブックを監視する機能もあり、スクラップブックと同期して、EditPlusの編集ウィンドウにテキストを自動的に貼り付けることができるので、貼り付けの手間を省くことができます。さらに、使いやすいHTMLエディターでもあります。HTMLタグのカラーマーキング（C / C ++、Perl、Javaをサポート）に加えて、完全なHTMLおよびCSS1コマンド関数も組み込まれています。メモ帳でWebページを編集するのに慣れています。Webページの作成時間の半分以上を節約できます。IE3.0以降をインストールしている場合は、IEブラウザをEditPlusウィンドウに統合して、直接プレビューできるようにします。編集されたWebページ（IEがインストールされていない場合は、ブラウザーパスも指定できます）。

5.VisualStudioコード||クリックしてダウンロード

このエディターは、構文のハイライト、カスタマイズ可能なキーボードバインディング、ブラケットマッチング、コードスニペットの収集（スニペット）など、最新のエディターに必要なすべての機能も統合しています。Somasegarはまた、このエディターはGitをすぐにサポートしていると著者に語った。

6.Sublime Text ||クリックしてダウンロード

Sublime Textはテキストエディタ（有料ソフトウェア、無期限に試すことができますが、アクティベーションプロンプトのポップアップウィンドウが表示されます）ですが、高度なコードエディタでもあります。Sublime Textは、2008年1月にプログラマーのJon Skinnerによって開発されました。元々は、豊富な拡張機能を備えたVimとして設計されました。
Sublime Textは、美しいユーザーインターフェースと、コードサムネイル、Pythonプラグイン、コードスニペットなどの強力な機能を備えています。キーバインディング、メニュー、ツールバーをカスタマイズすることもできます。Sublime Textの主な機能には、スペルチェック、ブックマーク、完全なPython API、Goto関数、プロジェクトの即時切り替え、複数選択、複数ウィンドウなどがあります。Sublime Textは、Windows、Linux、Mac OS X、およびその他のオペレーティングシステムをサポートするクロスプラットフォームエディターです。

7.HBuilder ||クリックしてダウンロード

HBuilderは、DCloud（Digital Paradise）によって起動されたHTML5をサポートするWeb開発IDEです。[1] HBuilderは、Java、C、Web、およびRubyを使用して作成されました。HBuilder自体の本体はJavaで書かれています。これはEclipseに基づいているため、当然Eclipseプラグインと互換性があります。

8.webstorm ||クリックしてダウンロード

WebStormは、jetbrains社のJavaScript開発ツールです。中国のJS開発者の大多数から、「Webフロントエンド開発アーティファクト」、「最も強力なHTML5エディター」、「最もスマートなJavaScriptIDE」などとして賞賛されています。これはIntelliJIDEAと同じであり、IntelliJIDEAの強力なJS部分を継承しています。

HTMLデバッグ/ HTMLコードを作成する場合、通常、エラーには主に2つのタイプがあります。

1>文法エラー：スペルミスのためプログラムを実行できません。通常、文法に精通し、エラー情報を理解すれば、簡単に修正できます。

2>論理エラー：文法エラーはありませんが、コードを期待どおりに実行できません。通常、論理エラーは、エラーの原因を示す情報がないため、文法エラーよりも修正が困難です。

ブラウザはリラックスモードで実行されるため、HTML自体は構文エラーを起こしにくいです。つまり、構文エラーが発生してもブラウザは引き続き実行されます。ブラウザには通常、誤って記述されたマークアップを解析するための組み込みルールがあるため、期待と一致しない場合でも、ページを表示できます。もちろん、隠れた危険があります。
注：HTMLが大まかに解析される理由は、Webの本来の目的は、コード構文を絡ませることなく誰でもコンテンツを公開できることであるためです。

エラーコードの表示：適切なHTML形式を維持することの重要性を理解する

< h1 > HTMLデバッグの例</ h1 > 
< p > HTMLの何が問題なのですか？
< ul > 
    < li >閉じられていない要素：要素< strong >に正しい終了タグがない場合、下の領域全体に影響しますが、これは期待したものではありません。
    < li >間違ったネストされた要素：正しいネストは重要なコーディング習慣です。<強い>強い< em >強い強調？</ strong >これは一体何ですか？</ em > 
    < li >閉じられていない属性：もう1つの一般的なHTMLエラー。例を見てみましょう：<= "https://www.mozilla.org/>Mozillaホームページリンク</a> 
</ ul>

上記のコードの問題は次のとおりです。

段落要素とリストアイテム要素には終了タグがありません。ただし、要素の終わりと別の要素の始まりは簡単に推測できるため、上の画像に重大なレンダリングエラーはありません。
最初の要素には終了タグがありません。要素がどこで終了するかを判断するのが難しいため、これは深刻です。残りの実質的にすべてのテキストは太字になっています。
2番目の<li>要素に入れ子の問題があります：「強い」強く強調されていますか？これは一体何ですか？」ブラウザは正しく説明するのが非常に難しいです。理由は同じです
href属性に二重引用符がありません。これは最も深刻な問題につながりました：リンク全体がまったくレンダリングされませんでした。

しかし、ブラウザはコードエラーを修正しようとします：

要素と<li>要素には閉じたタグがあります。
最初のには明確な終了タグがないため、ブラウザは後続のすべての独立したブロックの を完了しました。
ブラウザは、次のようにネストエラーを修正します。

<強い>強い
  < em >強い強調？</ em > 
</ strong > 
< em >これは一体何ですか？</ em >

二重引用符がないリンク全体を削除します。最後のリストアイテムは

< li > 
  < strong >閉じられていない属性：もう1つの一般的なHTMLエラー。例を見てみましょう：</ strong > 
</ li >

【ツール】HTMLエディタの紹介と推奨、HTMLデバッグ

おすすめ