[Tools] Introduction and recommendation of HTML editor, html debugging

HTML editor is a tool for writing HTML. When using HTML editor, you can edit topics, indexes, customize windows, and choose to add search pages.

Common HTML editor download

1. Use UltraEdit (editing tool)|| click to download

  • The UltraEdit text editor can meet all your editing needs. 
  • UltraEdit text editor is a set of powerful text editors.  
  • The UltraEdit text editor has built-in English word checking, C++ and VB commands are highlighted, multiple files can be edited at the same time, and the speed will not be slow even when opening large files. 
  • UltraEdit software is equipped with HTML tag color display, search and replacement and unlimited restore functions. Generally, people like to use it to modify EXE or DLL files.

2. Notepad++ (code editor)|| click to download

Notepad++ is a free code editor under the Microsoft Windows environment. It uses less CPU power and reduces the energy consumption of the computer system, but it is lightweight and highly efficient, making Notepad++ a perfect replacement for Microsoft Windows Notepad.

3. Adobe Dreamweaver CC|| Click to download

Dreamweaver cc is a set of web design software with a visual editing interface launched by the world's top software manufacturer adobe for making and editing websites and mobile applications. Because it supports multiple methods such as code, split, design, real-time view, etc. to create, write and modify web pages, for junior staff, you can quickly create web pages without writing any code. Its mature code editing tools are more suitable for the creation of senior web developers!

4. EditPlus (text editor)|| Click to download the   EditPlus3 editor manual

EditPlus (text editor) is a powerful text editor that can replace Notepad, with unlimited Undo/Redo, English spelling check, automatic line wrapping, column number marking, search and replacement, simultaneous editing of multiple files, full screen Browse function. And it also has a useful function, that is, it has the function of monitoring the scrapbook, which can synchronize with the scrapbook and automatically paste the text into the editing window of EditPlus, allowing you to save the steps of pasting. In addition, it is also an easy-to-use HTML editor. In addition to color-marking HTML Tag (supporting C/C++, Perl, Java), it also has built-in complete HTML and CSS1 command functions. For those who are used to editing web pages with Notepad , It can help you save more than half of the webpage creation time. If you have installed IE 3.0 or above, it will also integrate the IE browser in the EditPlus window, allowing you to directly preview the edited webpage (if IE is not installed, also The browser path can be specified).

5.Visual Studio Code|| Click to download

The editor also integrates all the features that a modern editor should have, including syntax high lighting, customizable keyboard bindings, bracket matching, and code snippets Collect (snippets). Somasegar also told the author that this editor also has out-of-the-box support for Git. 

6.Sublime Text|| Click to download

Sublime Text is a text editor (paid software, can be tried indefinitely, but there will be an activation prompt pop-up window), but also an advanced code editor. Sublime Text was developed by programmer Jon Skinner in January 2008. It was originally designed as a Vim with rich extensions.
Sublime Text has a beautiful user interface and powerful features, such as code thumbnails, Python plug-ins, code snippets, etc. You can also customize the key bindings, menus and toolbars. The main functions of Sublime Text include: spell check, bookmarks, complete Python API, Goto function, instant project switching, multiple selection, multiple windows and so on. Sublime Text is a cross-platform editor that supports Windows, Linux, Mac OS X and other operating systems.

7.HBuilder|| Click to download

HBuilder is a web development IDE that supports HTML5 launched by DCloud (Digital Paradise). [1] HBuilder was written using Java, C, Web and Ruby. The main body of HBuilder itself is written in Java. It is based on Eclipse, so it is naturally compatible with Eclipse plug-ins.

8.webstorm|| click to download

WebStorm is a JavaScript development tool under jetbrains company. It has been praised by the majority of Chinese JS developers as "Web front-end development artifact", "Most powerful HTML5 editor", "Smartest JavaScript IDE" and so on. It is the same as IntelliJ IDEA and inherits the powerful JS part of IntelliJ IDEA.


HTML debugging/When writing HTML code, there are usually two main types of errors:

1> Grammatical errors: The program cannot be run due to spelling errors; it is usually easy to fix after familiarizing with the grammar and understanding the error information.

2>Logical errors: There are no grammatical errors, but the code cannot run as expected; usually logical errors are more difficult to fix than grammatical errors, because there is no information pointing to the source of the error.

HTML itself is not prone to syntax errors, because the browser runs in a relaxed mode, which means that the browser will continue to run even if there are syntax errors. Browsers usually have built-in rules to parse incorrectly written markup, so even if it does not match expectations, the page can still be displayed. Of course, there are hidden dangers.
Note: The reason HTML is parsed in a loose way is because the original intention of the Web is that everyone can publish content without tangling code syntax.


 Error code display: understand the importance of maintaining good HTML format

< h1 > HTML debugging example </ h1 > 
< p > What makes HTML wrong?
< ul > 
    < li > Unclosed elements: If the element < strong > does not have the correct closing tag, it will affect the entire area below, which is not what you expect.
    < li > Wrong nested elements: Correct nesting is an important coding habit. < strong > strong < em > strong emphasised? </ strong > What the hell is this again? </ em > 
    < li > Unclosed attributes: Another common HTML error. Let's see an example: <="https://www.mozilla.org/>Mozilla homepage link</a>
</ul>

 The following are the problems with the above code:

  • Paragraph and list item elements have no end tags. But since the end of an element and the beginning of another are easy to infer, there is no serious rendering error in the above image.
  • The first <strong> element has no closing tag. This is serious because it is difficult to determine where the element ends. Virtually all remaining text is bolded.
  • There is a nesting problem in the second <li>element: For "<strong>strong"<em>strongly emphasized?</strong>What the hell is this?</em>" The browser is very Difficult to explain correctly, the reason is the same
  • The href attribute is missing a double quote. This leads to the most serious problem: the entire link is not rendered at all.

But the browser will try to fix the code error:

  1. The <p> and <li> elements have closed tags.
  2. The first <strong> does not have a clear closing tag, so the browser has completed <strong></strong> for all subsequent independent blocks.
  3. The browser fixes the nesting error like this:
< strong > strong
   < em > strong emphasised? </ em > 
</ strong > 
< em > What the hell is this again? </ em >

Delete the entire link that lacks double quotes. The last list item becomes

< li > 
  < strong > Unclosed attributes: Another common HTML error. Let’s see an example: </ strong > 
</ li >

Guess you like

Origin blog.csdn.net/qq_45534098/article/details/112971340