Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

Eine Anleitung zum Schreiben von HTML-Code

高洛峰
Freigeben： 2017-02-24 10:12:31
Original
1083 Leute haben es durchsucht

Allgemeine Konventionen

Tags

Selbstschließende Tags, kein Abschluss erforderlich (zum Beispiel: img input br hr, usw.);
Optionales schließendes Tag, das geschlossen werden muss (zum Beispiel: oder ); 

<img src="images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>

<!-- Recommended -->
<img class="avatar" src="...">
Nach dem Login kopieren

Klasse und ID

Klasse sollte nach Funktion oder Inhalt benannt werden, nicht Ausdruck

Klasse und ID sollten in Kleinbuchstaben benannt werden Buchstaben, wenn sie aus mehreren Wörtern bestehen, verwenden Sie die Trennung durch Bindestriche.
Verwenden Sie eindeutige IDs als Javascript-Hooks und vermeiden Sie das Erstellen von Klassen ohne Stilinformationen. 

<!-- Not recommended -->
<p class="j-hook left contentWrapper"></p>

<!-- Recommended -->
<p id="j-hook" class="sidebar content-wrapper"></p>
Nach dem Login kopieren

Attributreihenfolge

HTML-Attribute sollten in einer bestimmten Reihenfolge erscheinen, um die Lesbarkeit zu gewährleisten.

id

class

name
data-xxx
src, for, type, href
title, alt
aria-xxx, role


<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">
Nach dem Login kopieren

Anführungszeichen

Verwenden Sie für die Definition von Attributen einheitlich doppelte Anführungszeichen. 

<!-- Not recommended -->
<span id=&#39;j-hook&#39; class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
Nach dem Login kopieren

b Verschachtelung

a Verschachtelung p ist nicht zulässig und unterscheidet sich von anderen Einschränkungen. Es gibt auch strenge Verschachtelungsbeschränkungen, zum Beispiel darf a nicht verschachtelt werden.

Strikte Verschachtelungsbeschränkungen sind nicht in allen Browsern zulässig, da die meisten Browser Fehlertoleranz berücksichtigen und die generierten Dokumentbäume möglicherweise voneinander abweichen.

Semantische Verschachtelungsbeschränkungen

  • verwendet unter
      ; ,
      werden unter



      Strikte Verschachtelungsbeschränkungen


      Inline-Level-Elemente können nur Text oder andere Inline-Level-Elemente enthalten Elemente; Die interaktiven Elemente ,