Grundlegende HTML-Syntax und Verwendung

Grundlegende HTML-Syntax und Verwendung

01 Vorlage

• Wenn Sie VScode zum Erstellen von HTML-Dateien verwenden, können Sie tippen! So erhalten Sie schnell eine HTML-Vorlage
• Hinweis: Dies sind englische Symbole! Nummer
  

02 Kommentare

• Die Tastenkombination ist Strg+/

03 Etikettentyp

• Unterteilt in Einzeletikett und Doppeletikett
• Doppeletikett
• Einzeletikett

04 Etikettenattribute

1. Doppelte Tags können mit anderen Tags verschachtelt werden

• Darstellungen

2. Attribute können nach dem Tag-Namen hinzugefügt werden

• Gemeinsame Attribute: id, class, title usw.

05 Öffnungsmethode

• Laden Sie das Plug-in Live Server in VScode herunter
• Klicken Sie mit der rechten Maustaste und wählen Sie „Mit Live Server öffnen“.
• Vorteile: Der Browser aktualisiert sich automatisch nach dem Speichern des Codes, es ist kein manuelles Update erforderlich.

06 Titel-Tag

• <h1> - <h6>

  Fonina-de-Fontaine

  Fonina-de-Fontaine

  Fonina-de-Fontaine

  Fonina-de-Fontaine

  Fonina-de-Fontaine

  Fonina-de-Fontaine

• Darstellungen

07 Absatz-Tags

• <p> </p>

Wird zum schnellen Festlegen von Absatztext verwendet, mit integriertem Einzugseffekt für die erste Zeile des Absatzes.

<p>芙宁娜，米哈游出品的游戏《原神》及其衍生作品中的角色，魔神名芙卡洛斯，“尘世七执政”中的末任水神，众水、众方、众民与众律法的女王，曾经统治着水之国枫丹 ，深受民众喜爱 。</p>

• Darstellungen

08 Textänderungs-Tag

1. Fetter Text

• <strong> </strong>

  Wird verwendet, um den Textfetteffekt schnell festzulegen.

2. Kursiver Text

• <em> </em>

Wird verwendet, um den Textkursiveffekt schnell festzulegen

3. Hochgestellter Text

• <sup> </sup>

Wird verwendet, um Text schnell als hochgestellten Effekt festzulegen

4. Tiefgestellter Text

• <sub> </sub>

Wird verwendet, um Text schnell als tiefgestellten Effekt festzulegen.

5. Text löschen

• <del> </del>

Wird verwendet, um Text schnell mit einem durchgestrichenen Effekt zu versehen, um Löschungen im Dokument zu beschreiben.

6. Text hinzufügen

• <ins> </ins>

Wird verwendet, um Text schnell mit einem Unterstreichungseffekt zu versehen, um Aktualisierungen und Korrekturen im Dokument zu beschreiben.

• Fall

<p>
        <strong>芙芙</strong>
        <em>芙芙</em>
        芙芙<sup>2</sup>
        芙芙<sub>2</sub>
        <del>芙芙</del>
        <ins>芙芙</ins>
</p

• Darstellungen

09 Bild-Tags

• <img src="" alt="">

Zitieren Sie ein Bild.

• **src: **Die Dateiadresse des Bildes [Festplattenadresse (relativer Pfad/absoluter Pfad), Netzwerkadresse].
• **alt:** Wenn das Bild nicht normal angezeigt werden kann, wird stattdessen die Textaufforderung angezeigt.

 <img src="image-20231212183411453.png" alt="图片加载失败">xxxxxxxxxx  <img src="image-20231212183411453.png" alt="图片加载失败">

• Darstellungen

10 Dateipfad

• Unterteilt in lokalen Pfad und Netzwerkpfad
• Lokale Pfade werden in relative Pfade und absolute Pfade unterteilt
  • Der relative Pfad ist der Bildpfad relativ zur Projektdatei (häufig verwendet).
  • Der absolute Pfad ist der Speicherort des Bildes auf dem lokalen Computer
  • Der Netzwerkpfad ist der Speicherort des Bildes im Netzwerk

11 Link-Tags

• <a href="" target=""> </a>

Springen Sie von einer Seite zur anderen (kann andere URLs oder lokales HTML sein).

• href

  Sprungadresse (ein Link oder eine andere HTML-Datei).

• Ziel

  So öffnen Sie den Link (_self – auf der aktuellen Seite öffnen [Standardwert] _blank – in einem neuen Tab öffnen).

12 Ankerpunkte

• <a href="#id" > </a>

• Die kooperative Verwendung von Tags und Attribut-IDs

• Wenn auf der Seite eine Bildlaufleiste angezeigt wird, können Sie zur angegebenen Beschriftungsposition auf dieser Seite springen.

• href

  springende Augen 标标签的【id值】.