Introduction et recommandation de l'éditeur HTML

Éditeur HTML

L'éditeur HTML est un outil pour écrire du HTML, lors de l'utilisation de l'éditeur HTML pour modifier le thème, indexer, personnaliser la fenêtre, choisir d'ajouter une page de recherche.

Utilisez le Bloc-notes ou TextEdit pour écrire du HTML

Voici trois éditeurs HTML conçus spécifiquement pour l'édition HTML :

Adobe Dreamweaver
Web d'expression Microsoft
Éditeur HTML de tasse à café

Cependant, nous vous recommandons également d'utiliser un éditeur de texte pour apprendre le HTML, tel que le Bloc-notes (PC) ou TextEdit (Mac). Nous pensons que l'utilisation d'un simple éditeur de texte est un excellent moyen d'apprendre le HTML.

Nous pouvons utiliser l'outil Bloc-notes pour créer des fichiers HTML, les étapes spécifiques sont les suivantes :

Étape 1 : Démarrer le Bloc-notes

Étapes pour ouvrir le Bloc-notes (sous Windows) :

Ouvrez le menu Démarrer
Sélectionnez "Tous les programmes"
Sélectionnez "Accessoires"
Sélectionnez "Bloc-notes"

Étape 2 : Modifier le code HTML à l'aide du Bloc-notes

Saisissez le code HTML dans le Bloc-notes :

code d'exemple

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

Étape 3 : Enregistrez votre code HTML

Sélectionnez Enregistrer sous dans le menu Fichier du Bloc-notes .

Vous pouvez enregistrer votre fichier HTML avec .htmou extension, il n'y a pas de différence entre les deux, il peut être utilisé selon vos habitudes d'utilisation..html

Enregistrez ce fichier dans votre dossier habituel, tel que w3cschool

Étape 4 : Exécutez ce fichier HTML dans votre navigateur

Démarrez votre navigateur et choisissez la commande "Ouvrir un fichier" du menu "Fichier", ou double-cliquez simplement sur votre fichier HTML dans le dossier.

Les résultats d'affichage en cours sont similaires à ce qui suit :

Téléchargement de l'éditeur HTML couramment utilisé

1. UltraEdit (outil d'édition)

　L'éditeur de texte UltraEdit est un éditeur qui peut satisfaire tous vos besoins d'édition.

　L'éditeur de texte UltraEdit est un ensemble d'éditeurs de texte puissants.

　L'éditeur de texte UltraEdit intègre la vérification des mots anglais, la mise en surbrillance des commandes C ++ et VB, et peut éditer plusieurs fichiers en même temps, et la vitesse ne ralentira pas même lors de l'ouverture d'un fichier volumineux.

　Le logiciel UltraEdit est livré avec un affichage couleur des balises HTML, des fonctions de recherche et de remplacement et des fonctions de restauration illimitées.Généralement, tout le monde aime l'utiliser pour modifier des fichiers EXE ou DLL.

cliquez pour télécharger"

2. Notepad++ (éditeur de code)

Notepad++ est un éditeur de code gratuit pour Microsoft Windows. Il utilise moins de puissance CPU, réduit la consommation d'énergie du système informatique, mais est léger et a une efficacité d'exécution élevée, faisant de Notepad++ un remplacement parfait pour le Bloc-notes de Microsoft Windows.

cliquez pour télécharger"

3、Adobe Dreamweaver CC

Dreamweaver CC est un ensemble de logiciels de conception Web avec une interface d'édition visuelle lancé par Adobe, le premier fabricant de logiciels au monde, pour la création et l'édition de sites Web et d'applications mobiles. Parce qu'il prend en charge le code, le fractionnement, la conception, l'affichage en temps réel et d'autres moyens de créer, d'écrire et de modifier des pages Web, pour les débutants, vous pouvez créer rapidement des pages Web sans écrire de code. Son outil d'édition de code mature est plus adapté à la création de cadres supérieurs en développement Web !

cliquez pour télécharger"

4. EditPlus (éditeur de texte)

EditPlus (éditeur de texte) est un éditeur de texte puissant qui peut remplacer le Bloc-notes, avec un nombre illimité d'annulations/rétablissements, vérification orthographique en anglais, retour à la ligne, marque de numéro de colonne, recherche et remplacement, édition simultanée de plusieurs fichiers, fonction de navigation en plein écran. Et il a également une fonction utile, c'est-à-dire qu'il a la fonction de surveiller l'album, qui peut automatiquement coller du texte dans la fenêtre d'édition d'EditPlus de manière synchrone avec l'album, vous évitant ainsi l'étape de collage. De plus, il s'agit également d'un éditeur HTML facile à utiliser. En plus des balises HTML de marquage de couleur (prenant en charge C/C++, Perl et Java en même temps), il intègre également une commande HTML et CSS1 complète. fonctions. Amis habitués à éditer des pages Web avec le Bloc-notes, cela peut vous aider à économiser plus de la moitié du temps de création de pages Web. Si vous avez installé IE 3.0 ou supérieur, il combinera également le navigateur IE dans la fenêtre EditPlus, de sorte que vous pouvez directement prévisualiser la page Web modifiée (si IE n'est pas installé, vous pouvez également spécifier le chemin du navigateur).

cliquez pour télécharger"

Débogage HTML

Il existe deux principaux types d'erreurs qui sont couramment commises lors de l'écriture de code HTML :

Erreur de syntaxe : un programme qui ne s'exécute pas en raison d'une faute de frappe ; généralement facile à corriger une fois que vous êtes familiarisé avec la syntaxe et que vous comprenez le message d'erreur.
Erreurs de logique : il n'y a pas d'erreurs de syntaxe, mais le code ne fonctionne pas comme prévu ; les erreurs de logique sont généralement plus difficiles à corriger que les erreurs de syntaxe car aucune information ne pointe vers la source de l'erreur.

HTML lui-même est moins sujet aux erreurs de syntaxe car les navigateurs fonctionnent en mode permissif, ce qui signifie que le navigateur continuera à fonctionner même s'il y a des erreurs de syntaxe. Les navigateurs ont généralement des règles intégrées pour analyser les balises mal écrites, de sorte que les pages peuvent toujours être affichées même si elles ne correspondent pas aux attentes. Bien sûr, il y a des dangers cachés.

Remarque : La raison pour laquelle le HTML est analysé de manière lâche est que l'intention initiale du Web est que tout le monde peut publier du contenu sans s'emmêler dans la syntaxe du code.

exemple

Discutons-en avec un morceau de code HTML qui contient des erreurs :

titre de l'instance

<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>

Voici le problème avec le code ci-dessus :

Les éléments de paragraphe et d'élément de liste n'ont pas de balises fermantes. Mais comme il est facile de déduire où un élément se termine et un autre commence, il n'y a pas trop d'erreur de rendu dans l'image ci-dessus.
Le premier élément n'a pas de balise fermante. C'est grave car il est difficile de déterminer où se termine l'élément. Pratiquement tout le texte restant est en gras.
Il y a un problème d'imbrication dans le deuxième <li>élément : Pour le code suivant, il est difficile de faire un parsing correct dans le navigateur, pour la même raison que ci-dessus.
```
 重点（strong） 重点强调（ strongly emphasised）？ 这又是什么鬼？ 
```
hrefIl manque un guillemet double à l'attribut. Cela conduit au problème le plus sérieux : le lien entier n'est pas rendu du tout.

　Mais les navigateurs essaient de corriger les erreurs de code :

et <li>les éléments avec des balises fermantes.
Le premier n'a pas de balise de fermeture explicite, donc le navigateur le complète pour tous les blocs individuels suivants .
Le navigateur (le code suivant est extrait du code de page corrigé de Chrome) corrige les erreurs d'imbrication comme celle-ci :

titre de l'instance

<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>

Supprimez le lien entier qui manque de guillemets doubles. Le dernier élément de la liste devient :

code d'exemple

<li>
Attributs non fermés : autre erreur HTML courante. Voyons un exemple :
</li>

Après avoir lu les exemples ci-dessus, vous verrez l'importance de maintenir une bonne mise en forme HTML