Heim >Web-Frontend >HTML-Tutorial >Standardhandbuch zum Schreiben von HTML-Code_HTML/Xhtml_Webseitenproduktion
Standardhandbuch zum Schreiben von HTML-Code_HTML/Xhtml_Webseitenproduktion
- WBOYOriginal
- 2016-05-16 16:36:071789Durchsuche
Allgemeine Konventionen
Tag
Selbstschließendes Tag, muss nicht geschlossen werden (zum Beispiel: img input br hr usw.);
Optionales schließendes Tag (schließendes Tag), muss geschlossen werden (zum Beispiel: oder < ; /body>);
Reduzieren Sie die Anzahl der Tags so weit wie möglich;
- <img src="images/google.png " alt="Google">
- <Eingabe Typ="Text" Name="Titel">
- <ul>
- <li>Stilli>
- <li>Leitfadenli>
- ul>
- <span class="avatar" >
- <img src=".. .">
- span>
- <img Klasse="avatar" src="...">
Klasse und ID
Klasse sollte nach Funktion oder Inhalt benannt werden, nicht nach Ausdruck;
Klasse und ID sollten in Kleinbuchstaben geschrieben werden. Wenn sie aus mehreren Wörtern bestehen, verwenden Sie eine Bindestrich-Trennung.
Verwenden Sie eine eindeutige ID als Javascript-Hook , und vermeiden Sie das Erstellen von Klassen ohne Stilinformationen
- <div class="j- Hook left contentWrapper">div>
- <div id="j- Hook" class="sidebar content-wrapper">< /div>
Attributreihenfolge
HTML-Attribute sollten in einer bestimmten Reihenfolge erscheinen, um die Lesbarkeit zu gewährleisten.
id
Klasse
Name
data-xxx
src, for, type, href
Titel, alt
aria-xxx, Rolle
- <a id="..." Klasse="..." datenmodal="toggle" href="###"> a>
- <Eingabe Klasse="form- control" type="text">
- <img src=".. ." alt="...">
Anführungszeichen
Verwenden Sie für die Definition von Attributen einheitlich doppelte Anführungszeichen.
- <span id='j- Hook' class=text>Google span>
- <span id="j- Hook" class="text">Googlespan>
b Verschachtelt
a erlaubt keine Verschachtelung von Divs. Zu den verschiedenen Einschränkungen gehört beispielsweise keine Verschachtelung von a.
Strenge Verschachtelungsbeschränkungen sind nicht in allen Browsern zulässig; die meisten Browser beherrschen die Fehlertoleranz und die generierten Dokumentbäume können sich voneinander unterscheiden.
Semantische Verschachtelungsbeschränkungen
- ;
- verwendet unter ; , ,
, werden unter ;
Strenge Verschachtelungsbeschränkungen
Inline-Level-Elemente können nur Text oder andere Inline-Level-Elemente enthalten; , ; verschachtelt werden 🎜>kann die Elemente
,~
,
- /
- ,
- nicht verschachteln ;/
- /
- ,
- /
- ,