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

Standardhandbuch zum Schreiben von HTML-Code_HTML/Xhtml_Webseitenproduktion

WBOY
Freigeben： 2016-05-16 16:36:07
Original
1786 Leute haben es durchsucht

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;

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <img src="images/google.png " alt="Google">
  2. <Eingabe Typ="Text" Name="Titel">
  4. <ul>
  5. <li>Stilli> 
  6. <li>Leitfadenli> 
  7. ul>
  10. <span class="avatar" >
  11. <img src=".. ."> 
  12. span>
  15. <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

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  2. <div class="j- Hook left contentWrapper">div>
  5. <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

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <a id="..." Klasse="..." datenmodal="toggle" href="###"> a>
  3. <Eingabe Klasse="form- control" type="text">
  5. <img src=".. ." alt="...">

Anführungszeichen

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  2. <span id='j- Hook' class=text>Google span>
  5. <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
      ;
      verwendet unter ; , , , werden unter ;

      Strenge Verschachtelungsbeschränkungen


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


      Beispiel

      Behandeln Sie die von Ihnen erstellte Seite wie ein Buch und ordnen Sie die Semantik der Tags ihren Funktionen und Bedeutungen zu

      Name des Buches:


      Titel jedes Kapitels des Buches:


      Titel des Artikels innerhalb des Kapitels:


      Untertitel/Untertitel: < ;h4>


      Kapitelabsatz:

      HEAD
      Dokumenttyp

      Fügen Sie in der ersten Zeile jeder HTML-Seite eine Standardmodusdeklaration hinzu, um eine konsistente Leistung in jedem Browser sicherzustellen.

      XML/HTML-CodeInhalt in die Zwischenablage kopieren
      1. >
      2. Sprachattribut
      5. <html lang="zh- Hans"> 
      8. <html lang="zh- cmn-Hans">
      11. <html lang="zh- cmn-Hant">
      14. <html lang="en" >

      Zeichenkodierung

      Verwendung der BOM-freien UTF-8-Kodierung als Dateiformat
      Das Meta, das die Zeichenkodierung angibt, muss das erste direkte untergeordnete Element von head sein

      XML/HTML-CodeInhalt in die Zwischenablage kopieren
      1. <html>
      2. <Kopf>
      3.  <meta charset="utf- 8"> 
      4.  … 
      5. Kopf>
      6. <Körper>
      7.  … 
      8. Körper>
      9. html>

      IE-Kompatibilitätsmodus

      Priorisieren Sie die Verwendung der neuesten Versionen der IE- und Chrome-Kernel.

      XML/HTML-CodeInhalt in die Zwischenablage kopieren
      1. <meta http-equiv="X-UA -Kompatibel" Inhalt="IE=edge,chrome=1">

      SEO-Optimierung

      XML/HTML-CodeInhalt in die Zwischenablage kopieren
      1. <Kopf>
      2.  <meta charset="utf- 8"> 
        3. " " 🎜>
      3.  <Titel>Style GuideTitel>
      4.  <
      5. meta name="keywords" Inhalt="Ihre Schlüsselwörter">
      6.  <meta Name="Beschreibung" Inhalt="Ihre Beschreibung">
      7.  <meta Name="Autor" Inhalt="Autor,E-Mail-Adresse">
      8. Kopf> Ansichtsfenster Ansichtsbereich: Bezieht sich im Allgemeinen auf die Größe des Inhaltsbereichs des Browserfensters, ausgenommen Symbolleisten, Registerkarten usw.; Breite: Browserbreite, die Breite des sichtbaren Bereichs der Seite im Ausgabegerät; Gerätebreite: sichtbare Breite des Bildschirms des Ausgabegeräts; Maximum-Skalierung: maximales Skalierungsverhältnis; Legen Sie für mobile Geräte die Breite des sichtbaren Bereichs und die anfängliche Skalierung fest.
      9. XML/HTML-CodeInhalt in die Zwischenablage kopieren
        1. <meta name="viewport" Inhalt="width=device-width, initial-scale=1.0">

      iOS-Symbol

      Apple-Touch-Icon-Bilder werden automatisch in abgerundete Ecken und Hervorhebungen verarbeitet.
      Apple-Touch-Icon-Precomposed verhindert, dass das System automatisch Effekte hinzufügt und zeigt direkt das Originaldesign an

      XML/HTML-Code
      Inhalt in die Zwischenablage kopieren
      1. verfügen
      2. <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> 
      5. <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" Größen="72x72">
      8. <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" Größen="114x114">
      11. <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" Größen="144x144">
      Favicon

      Wenn Favicon nicht angegeben ist, fordern die meisten Browser favicon.ico im Stammverzeichnis des Webservers an. Um sicherzustellen, dass das Favicon zugänglich ist und 404-Fehler vermieden werden, muss eine der beiden folgenden Methoden befolgt werden:

      Platzieren Sie die Datei favicon.ico im Stammverzeichnis des Webservers.

      Verwenden Sie den Link, um das Favicon anzugeben



      XML/HTML-Code

      Inhalt in die Zwischenablage kopieren
      1. <Link rel="Verknüpfungssymbol" href="path/to/favicon.ico">

      HEAD-Vorlage

      XML/HTML-CodeInhalt in die Zwischenablage kopieren
      1. >  
      2. <html lang="zh- cmn-Hans">  
      3. <Kopf>  
      4.     <meta charset="utf- 8">  
      5.     <meta http-equiv=" X-UA-kompatibel" Inhalt="IE=edge,chrome=1">  
      6.     <Titel>Style-GuideTitel>  
      7.     <meta Name="Beschreibung"  Inhalt="不超过150个字符">  
      8.     <meta name="keywords"  Inhalt="">  
      9.     <meta Name="Autor"  Inhalt="Name, email@gmail.com">  
      10.   
      11.       
      12.     <meta name="viewport"  Inhalt="width=device-width, initial-scale=1.0">   
      13.   
      14.       
      15.     <link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">  
      16.   
      17.  <link rel="alternate" Typ="application/rss xml" Titel="RSS" href="/rss.xml" /> 
      18.  <Link rel="Verknüpfungssymbol " href="path/to/favicon.ico">
      19. Kopf>

      HTML-Kommentare

      Modulkommentare

      XML/HTML-CodeInhalt in die Zwischenablage kopieren
      2. <div class="article- Liste"> 
      3. ...
      4. div>
      5. Kommentare blockieren
      标签 语义

      		段落

      ...

      		 标题
        		无序列表
          		有序列表
          		大段引用
          一般引用
          为样式加粗而加粗
          为强调内容而加粗
          为样式倾斜而倾斜
          为强调内容而倾斜
          code 代码标识
          abbr 缩写
          Tag           		Semantik

          		Absatz

          ...

          		 Titel
            		Ungeordnete Liste
              		Geordnete Liste
              		Langes Zitat
              Allgemeine Zitate
              Fett für Stil fett
              Fett, um den Inhalt hervorzuheben
              Neigung für Stilneigung
              Zum Hervorheben von Inhalten neigen
              Code Code-Identifikation
              Abkürzung Abkürzung