Introduction and recommendation of HTML editor

HTML editor

HTML editor is a tool for writing HTML, when using HTML editor to edit theme, index, customize window, choose to add search page.

Use Notepad or TextEdit to write HTML

The following are three HTML editors designed specifically for editing HTML:

Adobe Dreamweaver
Microsoft Expression Web
Coffee Cup HTML Editor

However, we also recommend using a text editor for learning HTML, such as Notepad (PC) or TextEdit (Mac). We believe that using a simple text editor is a great way to learn HTML.

We can use the Notepad tool to create HTML files, the specific steps are as follows:

Step 1: Start Notepad

Steps to open Notepad (in Windows):

Open the Start menu
Select "All Programs"
Select "Accessories"
Select "Notepad"

Step 2: Edit HTML Using Notepad

Enter the HTML code in Notepad:

example code

<html>
<head>
<meta charset="utf-8">
<title>编程狮(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

Step 3: Save your HTML

Select Save As from the Notepad File menu .

You can save your HTML file with .htmor extension, there is no difference between the two, it can be used according to your usage habits..html

Save this file in your usual folder, such as w3cschool

Step 4: Run this HTML file in your browser

Start your browser and choose the "File" menu's "Open File" command, or simply double-click your HTML file in the folder.

The running display results are similar to the following:

Commonly used HTML editor download

1. UltraEdit (editing tool)

　The UltraEdit text editor is an editor that can satisfy 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 command highlighting, and can edit multiple files at the same time, and the speed will not be slow even when opening a large file.

　UltraEdit software comes with HTML tag color display, search and replace, and unlimited restore functions. Generally, everyone likes to use it to modify EXE or DLL files.

click to download"

2. Notepad++ (code editor)

Notepad++ is a free code editor for Microsoft Windows. It uses less CPU power, reduces computer system energy consumption, but is lightweight and has high execution efficiency, making Notepad++ a perfect replacement for Microsoft Windows' Notepad.

click to download"

3、Adobe Dreamweaver CC

Dreamweaver CC is a set of web design software launched by Adobe, the world's top software manufacturer, with a visual editing interface for making and editing websites and mobile applications. Because it supports code, split, design, real-time view and other ways to author, write and modify web pages, for beginners, you can quickly create web pages without writing any code. Its mature code editing tool is more suitable for the creation of senior staff in Web development!

click to download"

4. EditPlus (text editor)

EditPlus (text editor) is a powerful text editor that can replace Notepad, with unlimited Undo/Redo, English spelling check, word wrap, column number mark, search and replace, 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 automatically paste text into the editing window of EditPlus synchronously with the scrapbook, saving you the step of pasting. In addition, it is also an easy-to-use HTML editor. In addition to color-marking HTML Tags (supporting C/C++, Perl, and Java at the same time), it also has built-in complete HTML and CSS1 command functions. Friends who are used to editing web pages with Notepad , it can help you save more than half of the web page creation time. If you have installed IE 3.0 or above, it will also combine IE browser in the EditPlus window, so that you can directly preview the edited web page (if IE is not installed, you can also Browser path can be specified).

click to download"

HTML debugging

There are two main types of errors that are commonly made when writing HTML code:

Syntax error: A program that fails to run due to a typo; usually easy to fix once you are familiar with the syntax and understand the error message.
Logic errors: There are no syntax errors, but the code does not work as expected; logic errors are usually harder to fix than syntax errors because there is no information pointing to the source of the error.

HTML itself is less prone to syntax errors because browsers run in a permissive mode, which means the browser will keep running even if there are syntax errors. Browsers usually have built-in rules for parsing poorly written markup, so pages can still be displayed even if they don't match expectations. Of course, there are hidden dangers.

Note: The reason why HTML is parsed in a loose manner is because the original intention of the Web is that everyone can publish content without entanglement in code syntax.

example

Let's discuss it with a piece of HTML code that contains errors:

instance title

<h1>HTML 调试示例</h1>
<p>什么使得 HTML 出错？
<ul>
<li>未闭合的元素：如果元素<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。
<li>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。<strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？
</em>
<li>未闭合的属性：另一种 HTML 常见错误。来看一个示例：<a href="https://www.w3cschool.cn/>W3Cschool 主页链接</a>
</ul>

Here is the problem with the above code:

Paragraph and list item elements do not have closing tags. But since it's easy to deduce where an element ends and another begins, there's not too much of a rendering error in the image above.
The first 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 the following code, it is difficult to make correct parsing in the browser, for the same reason as above.
```
 重点（strong） 重点强调（ strongly emphasised）？ 这又是什么鬼？ 
```
hrefAttribute is missing a double quote. This leads to the most serious problem: the entire link is not rendered at all.

　But browsers try to patch code errors:

and <li>elements with closing tags.
The first one has no explicit closing tag, so the browser completes it for all individual blocks after that .
The browser (the following code is excerpted from Chrome's patched page code) fixes nesting errors like this:

instance title

<h1>HTML 调试示例</h1>

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

<ul>

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

        <strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。</strong>

    </li>

    <li>

        <strong>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。

            <strong>重点（strong）

                <em>重点强调（strongly emphasised）？</em>

            </strong>

            <em>这又是什么鬼？

            </em>

        </strong>

    </li>

    <li>

        <strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong>

    </li>

</ul>

Remove the entire link that is missing double quotes. The last list item becomes:

example code

<li>
Unclosed attributes: Another common HTML mistake. Let's see an example:
</li>

After reading the above examples, you will see the importance of maintaining good HTML formatting