HTML (5) Spécification code
Conventions Code HTML
De nombreux développeurs Web spécification de code HTML mal compris.
En 2000-2010, de nombreux développeurs Web pour convertir de HTML vers XHTML.
Les développeurs utilisent XHTML développer progressivement un bon cahier d'écriture HTML.
Et pour en HTML5, nous devrions former un nombre relativement bonnes normes de code, plusieurs recommandations sont fournies ci-dessous les spécifications.
Utilisez le type du document
La déclaration de type de document dans la première ligne du document HTML:
Si vous souhaitez utiliser d'autres étiquettes, comme les minuscules, vous pouvez utiliser le code suivant:
les noms d'éléments minuscules
HTML5 nom d'élément peut utiliser des lettres majuscules et minuscules.
Utilisation recommandée lettres minuscules:
- style de cas mixte est très mauvais.
- Les développeurs utilisent généralement minuscules (XHTML similaire).
- le style Minuscule ressemble plus rafraîchissant.
- Les lettres minuscules facile à écrire.
Non recommandé:
<P> Ceci est un paragraphe. </ P>
</ SECTION>
Très mauvais:
<P> Ceci est un paragraphe. </ P>
</ SECTION>
Recommandé:
<P> Ceci est un paragraphe. </ P>
</ Section>
Éteignez tous les éléments HTML
En HTML5, vous ne voulez pas fermer tous les éléments (par exemple, élément <p>), mais nous recommandons que chaque élément doit ajouter une balise de fermeture.
Non recommandé:
<P> Ceci est un paragraphe.
<P> Ceci est un paragraphe.
</ Section>
Recommandé:
<P> Ceci est un paragraphe. </ P>
<P> Ceci est un paragraphe. </ P>
</ Section>
Fermer les éléments HTML vides
En HTML5, élément HTML vide n'a pas à fermer:
Nous pouvons écrire:
Vous pouvez également écrire:
XML, XHTML et barre oblique (/) est un must.
Si vous prévoyez d'utiliser votre page XML du logiciel, ce style est très bon.
Minuscules nom d'attribut
HTML5 permet l'utilisation du nom de la propriété en majuscules et les lettres minuscules.
Nous vous recommandons d'utiliser les minuscules nom d'attribut:
- Cas d'utilisation est une très mauvaise habitude.
- Les développeurs utilisent généralement minuscules (XHTML similaire).
- le style Minuscule ressemble plus rafraîchissant.
- Les lettres minuscules facile à écrire.
Non recommandé:
Recommandé:
Valeur de la propriété
les valeurs d'attribut HTML5 ne peux pas citer.
Nous vous recommandons d'utiliser les citations de valeur d'attribut:
- Si la valeur de la propriété contient des espaces doivent utiliser des guillemets.
- le style mixte est pas recommandé, le style unifié proposé.
- Les valeurs de propriété en utilisant des guillemets sont faciles à lire.
Les exemples suivants attribuent la valeur contient des espaces, ne pas utiliser de guillemets, il ne peut pas fonctionner:
Le suivant utilise des guillemets doubles, il est correct:
Propriétés de l'image
Image alt attributs souvent utilisé. Lorsque l'image ne peut pas être affiché, il peut remplacer l'affichage de l'image.
taille de l'image définies, peut être réservé au moment de la charge spécifiée espace, réduire le scintillement.
Les espaces et les signes d'égalité
Vous pouvez utiliser des espaces avant et après le signe égal.
Cependant, nous vous recommandons d'utiliser moins d'espace:
Evitez une longue ligne de code
En utilisant un éditeur HTML, la gauche et le défilement bon code est gênant.
Chaque ligne de code, autant que possible, à moins de 80 caractères.
Les lignes vides et indentation
Ne pas ajouter une ligne vide pour aucune raison.
Pour chaque bloc de fonction logique ajouter une ligne vide, ce qui le rend plus facile à lire.
Indente deux espaces, pas recommandés TAB.
Ne pas utiliser des lignes vides inutiles sont en retrait entre le code court.
lignes vides inutiles et indentation:
<H1> Ce tutoriel </ h1>
<H2> HTML </ h2>
<P>
Ce tutoriel, l'apprentissage est non seulement la technologie, mais aussi un rêve.
Ce tutoriel, l'apprentissage est non seulement la technologie, mais aussi un rêve.
Ce tutoriel, l'apprentissage est non seulement la technologie, mais rêve aussi,
Ce tutoriel, l'apprentissage est non seulement la technologie, mais aussi un rêve.
</ P>
</ Body>
Recommandé:
<H1> Ce tutoriel </ h1>
<H2> </ h2>
<P> Ce tutoriel, l' apprentissage est non seulement la technologie, mais aussi un rêve.
Ce tutoriel, l'apprentissage est non seulement la technologie, mais aussi un rêve.
Ce tutoriel, l'apprentissage est non seulement la technologie, mais aussi un rêve.
Ce tutoriel, l'apprentissage est non seulement la technologie, mais aussi un rêve. </ P>
</ Body>
Formulaire Exemple:
<Tr>
<Th> Nom </ th>
<Th> Descriptif </ th>
</ Tr>
<Tr>
<Td> A </ td>
<Td> Description A </ td>
</ Tr>
<Tr>
<Td> B </ td>
<Td> Description B </ td>
</ Tr>
</ Table>
Liste Exemple:
<Li> Londres </ li>
<Li> Paris </ li>
<Li> Tokyo </ li>
</ Ol>
Omettre le <html> et <body>?
Dans la norme HTML5, <html> et <body> peut être omise.
Les documents suivants sont corrects HTML5:
exemple:
<Head>
<Titre> Titre </ title>
</ Head>
<H1> Ceci est une rubrique </ h1>
<P> Ceci est un paragraphe. </ P>
Essayez »
Non recommandé omis <html> et <body>.
<Html> élément est l'élément racine du document, le langage utilisé pour décrire la page:
<Html lang = "zh">
déclaration de la langue est de faciliter les lecteurs d'écran et les moteurs de recherche.
Omettre le <html> ou <body> dans les DOM et les accidents de logiciels XML.
Omettre le <body> erreur se produit dans les anciens navigateurs (IE9).
Omettre le <head>?
Dans la norme HTML5, balise <head> peut être omise.
Par défaut, le navigateur contenu <body> avant ajouté à un défaut élément <head>.
Exemples
<Html>
<Titre> Titre </ title>
<Body>
<H1> Ceci est une rubrique </ h1>
<P> Ceci est un paragraphe. </ P>
</ Body>
</ Html>
Essayez »
 | Maintenant omettre les balises de tête ne sont pas recommandés. |
|---|
Métadonnées
HTML5 dans le <title> est requis, le nom du titre décrit le thème de la page:
Titre et la langue qui permet au moteur de recherche va bientôt comprendre le thème de votre page:
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8 ">
<Titre> Ce tutoriel </ title>
</ Head>
Les commentaires HTML
Les commentaires peuvent être écrits dans le <- et -> Dans:
commentaires plus longs dans le <! - et -> a écrit dans les branches:
Ceci est un commentaire plus. Ceci est un commentaire plus. Ceci est un commentaire plus.
Ceci est un plus commenter Ceci est un commentaire plus. Ceci est un commentaire plus.
->
Les commentaires du premier caractère tiret deux espaces, plus facile à lire.
stylesheet
Stylesheet syntaxe laconique (type attribut est pas nécessaire):
Les règles peuvent être écrites comme une ligne courte:
règles longues multi-lignes peuvent être écrites:
background-color: lightgrey;
font-family: "Arial Black" , Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- L'accolade sur la même ligne avec les sélecteurs.
- Choisissez entre l'accolade gauche et ajouter un espace.
- J'utilise deux espaces en retrait.
- A l'espace ajouté entre le côlon et les valeurs de propriété.
- Utilisez un espace après la virgule et les symboles.
- Les valeurs de propriété doivent utiliser la fin de chaque symbole.
- Seulement lorsque la valeur de la propriété contient des espaces utilisent des guillemets.
- Accolade droite sur une nouvelle ligne.
- Jusqu'à 80 caractères par ligne.
| Après la virgule et ajouter des espaces virgule est une règle commune. |
|---|
Chargement JavaScript HTML
Utilisez une syntaxe simple pour charger le fichier de script externe (type attribut est pas nécessaire):
Utilisez JavaScript pour accéder à des éléments HTML
Un format mauvais HTML peut provoquer l'exécution d'erreurs JavaScript.
Les deux instructions JavaScript à sortie des résultats différents suivant:
HTML, JavaScript Essayez d'utiliser la même convention de dénomination.
Accès JavaScript spécifications du code .
les noms de fichiers en minuscules
La plupart des serveurs Web (Apache, Unix) sont sensibles à la casse: London.jpg London.jpg ne peut pas accéder.
D'autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse: London.jpg sont accessibles via London.jpg ou London.jpg.
Vous devez maintenir un style unifié, nous recommandons l'utilisation des noms de fichiers de minuscules cohérentes.
extension de nom de fichier
suffixe de fichier HTML peut être .html (ou r .htm).
extension de fichier CSS est Css.
JavaScript fichier .js suffixe.
La différence entre .htm et .html
L'extension .htm de fichier et .html sur la nature, il n'y a pas de différence. Navigateur et le serveur Web seront les traiter comme des fichiers HTML à traiter.
La différence est que:
l'application .htm dans les systèmes DOS précoces ou les systèmes sont maintenant seulement trois caractères.
Suffixe est pas particulièrement limitée aux systèmes Unix, généralement avec .html.
techniquement différence
Si une URL ne spécifie pas un nom de fichier (comme http://www.w3big.com/css/), le serveur renvoie le nom de fichier par défaut. Le nom de fichier par défaut est généralement index.html, index.htm, default.html et default.htm.
Si le serveur est configuré avec seulement "index.html" que le fichier par défaut, vous devez nommer le fichier "index.html", plutôt que "index.htm".
En général, cependant, le serveur peut mettre en place le fichier par défaut multiple, vous pouvez définir le fichier par défaut comme nécessaire.
Quoi qu'il en soit, HTML suffixe complet est ".html".