Web-Frontend und semantisches Verständnis von HTML

1. Was ist ein Web-Frontend?

Das WEB-Frontend wird aus dem Design und der Produktion von Webseiten entwickelt. Da die Arbeit immer verfeinert wird, muss jemand die Produktion von Grafiken für Webseiten abschließen, daher taucht der Begriff WEB-Frontend-Entwicklung auf. Die WEB-Frontend-Entwicklung verwendet hauptsächlich HTML-, CSS- und JavaScript-Technologien, um von Künstlern bereitgestellte Kunstwerke in Webseiten umzuwandeln. Gleichzeitig müssen SEO- und Backend-Daten berücksichtigt werden. Das WEB-Frontend entspricht einer Zwischenplattform, die Künstler, Backend und Benutzer verbindet.

2. Was ist HTML-Semantik?

　1.) Im Grunde dreht es sich um mehrere Haupt-Tags, wie Titel (H1~H6), Liste (li), Hervorhebung (starkes Em) usw.

　2.) Laut Die Strukturierung des Inhalts (Inhaltssemantik) und die Auswahl geeigneter Tags (Codesemantik) erleichtern Entwicklern das Lesen und Schreiben eleganterer Codes, während Browser-Crawler und Maschinen ihn gut analysieren können.

3. Warum Semantik?

　1.) Um eine gute Inhaltsstruktur und Codestruktur auf der Seite ohne CSS darzustellen: um bei nackter Ausführung gut auszusehen

　2.) Benutzererfahrung: wie Titel , Alt wird verwendet, um Substantive zu erklären oder Bildinformationen zu erklären, und die flexible Verwendung von Label-Tags.

　3.) Förderlich für SEO: Stellen Sie eine gute Kommunikation mit Suchmaschinen her und helfen Sie Crawlern, effektivere Informationen zu crawlen: Crawler-Abhängigkeit Verwenden Sie Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen.

4.) Analysieren Sie bequem andere Geräte (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten sinnvoll darzustellen

5.) Es ist einfacher für die Teamentwicklung und -wartung und die Semantik ist besser lesbar. Dies ist ein wichtiger Trend im nächsten Schritt von Webseiten, die alle diesem Standard folgen, was die Differenzierung verringern kann.

4. Worauf sollten Sie beim Schreiben von HTML-Code achten?

　1.) Verwenden Sie so wenig semantische Tags wie div und span

　2.) Wenn die Semantik nicht offensichtlich ist, versuchen Sie, p zu verwenden, wenn Sie div oder p verwenden können, weil p hat standardmäßig einen oberen und unteren Abstand, was für die Kompatibilität mit speziellen Terminals von Vorteil ist.

　3.) Verwenden Sie keine reinen Stil-Tags wie: b, Schriftart, u usw., sondern verwenden Sie stattdessen CSS-Einstellungen .

4.) Text, der hervorgehoben werden muss, kann in das Strong- oder Em-Tag eingefügt werden (Browser-Standardstil, wenn Sie ihn mit CSS angeben können, verwenden Sie diese nicht), der Standardstil von Strong ist fett (verwenden Sie nicht b), em ist kursiv (ohne i);

5.) Wenn Sie eine Tabelle verwenden, verwenden Sie caption für den Titel, thead für den Tabellenkopf, tbody für den Hauptteil und tfoot für der Schwanz. Der Tabellenkopf sollte von den allgemeinen Zellen unterschieden werden. Verwenden Sie th für den Tabellenkopf und td für die Zellen Beschreiben Sie den Zweck des Formulars.

7.) Der Beschreibungstext, der jedem Eingabelabel entspricht, muss das Label-Tag verwenden, und indem Sie das ID-Attribut für die Eingabe festlegen und for=someld im Label-Tag festlegen, Der Beschreibungstext ist mit der entsprechenden Eingabe verknüpft.