In der schnelllebigen Welt des Internets erfordert die Verbesserung Ihrer Webentwicklungsfähigkeiten einen nachhaltigen und innovativen Ansatz, um sicherzustellen, dass Sie über die neuesten Technologien und Trends auf dem Laufenden bleiben. HTML-Elemente sind eine der wichtigsten Grundlagen dieser Entwicklung, da sie die Grundsprache darstellen, in der die Struktur und das Design von Webseiten aufgebaut sind. Es geht jedoch nicht nur um die Verwendung grundlegender Elemente, sondern es muss auch über den Einsatz ungewöhnlicher und innovativer HTML-Elemente nachgedacht werden, die das Benutzererlebnis attraktiver und funktionaler machen.
Als Webentwickler müssen Sie mit gängigen HTML-Elementen vertraut sein, z Und Und Stellt die Struktur und den Inhalt von Webseiten dar. HTML bietet jedoch noch viel mehr!
Durch die Erkundung dieser einzigartigen Elemente können Sie die Funktionalität der von Ihnen erstellten Webanwendungen verbessern und sie so von der Konkurrenz abheben. Verifizieren Gründe, warum das Erlernen von HTML für jeden Entwickler unerlässlich ist.
Schnelle Links
1. Und
Stellen Sie sich vor, Sie verfügen über umfangreiche Informationen oder Inhalte, von denen Sie nicht möchten, dass der Leser sofort verwirrt wird. Artikel werden Sie retten Und !
Diese Elemente bilden zusammen einen erweiterbaren Abschnitt mit einem Titel oder einer Zusammenfassung, auf den Website-Benutzer klicken können, um weitere Details anzuzeigen. Standardmäßig wird der Inhalt eines Elements nicht angezeigt , wodurch Ihre Seite aufgeräumt und organisiert bleibt.
Der Besucher kann einfach auf die Zusammenfassung klicken, um auf versteckte Informationen zuzugreifen.
<Details>Zusammenfassung> Klicken Sie auf zu Weitere Informationen anzeigenZusammenfassung>p>Diese Inhalt Es ist standardmäßig ausgeblendet, wird aber angezeigt, wenn der Benutzer auf die Schaltfläche klickt. Zusammenfassung.</p> </Details>Mit diesen Elementen können Sie große Abschnitte von Text, Code oder anderen Informationen ausblenden und so ein benutzerfreundliches Erlebnis bieten und gleichzeitig ein klares Design beibehalten. Diese Artikel können Ihnen auch helfen Verbessern Sie Ihre Fähigkeiten als Frontend-Designer.
2.
Es gibt Ihnen den Artikel Heben Sie bestimmte Teile Ihres Inhalts hervor und heben Sie sie optisch hervor. Bei der Verwendung eines Artikels Normalerweise versehen Browser den darin enthaltenen Text mit einer gelben Hintergrundfarbe, um die Aufmerksamkeit des Lesers darauf zu lenken.
Diese Funktion ist besonders nützlich, wenn Sie wichtige Schlüsselwörter, Phrasen oder Suchergebnisse auf Ihrer Webseite hervorheben möchten.
<p> Sie können dieKennzeichen>Kennzeichen</Kennzeichen> Tag zu Markieren Sie wichtige Wörter oder Ausdrücke. </p>Wenn eine Website beispielsweise über eine Suchfunktion verfügt, können Sie ein Element verwenden Um Übereinstimmungen mit Suchanfragen in den Ergebnissen hervorzuheben, damit Benutzer relevante Informationen leichter finden können.
3.
Sind Sie schon einmal auf Situationen gestoßen, in denen Inhalte veraltet oder nicht mehr relevant sind, Sie sie aber dennoch für historische Zwecke anzeigen oder auf Änderungen im Laufe der Zeit hinweisen möchten?
Erfahren Sie mehr über das Element ! Es stellt durchgestrichenen Text dar und zeigt alle Inhalte innerhalb des Elements in einer durchgestrichenen Schriftart an.
<p>
Dieses Produkt ist <s>Out-of-Stock</s> aktuell zum Aktionspreis erhältlich!
</p>In diesem Beispiel wird „Nicht vorrätig“ als durchgestrichener Text angezeigt, der darauf hinweist, dass sich der Lagerstatus des Produkts geändert hat.
4.
Wenn Sie Datums- und Uhrzeitangaben in Ihrem Inhalt eine semantische Bedeutung hinzufügen möchten, ist ein Element erforderlich Es wird sich als nützlich erweisen.
Mit dem datetime-Attribut können Sie eine maschinenlesbare Version des Datums oder der Uhrzeit angeben, die Browsern, Suchmaschinen und Bildschirmleseprogrammen hilft, den Kontext zu verstehen.
<p>
Die Unabhängigkeitserklärung wurde unterzeichnet am
<Zeitdatetime="1776-07-04">Juli 4, 1776</Zeit>.
</p>Einen Gegenstand verwenden , geben Sie dem Inhalt mehr Struktur und machen ihn einem breiteren Nutzerkreis zugänglich, auch Menschen mit Behinderungen, die Screenreader verwenden.
5.
Die Verwaltung von Texten in mehreren Sprachen auf einer Webseite kann manchmal schwierig sein, insbesondere wenn jeder Teil eine unterschiedliche Formatierung erfordert.
Der Artikel wird Ihnen präsentiert Helfen Sie, indem Sie einen Textabschnitt isolieren, der aufgrund unterschiedlicher Sprachanforderungen vom Browser unterschiedlich behandelt werden sollte.
<p><bdi>5,000</bdi> Personen nahmen an der Konferenz teil.
</p>In diesem Beispiel wird das Element umbrochen mit der Nummer 5000. Dadurch wird sichergestellt, dass sich der umgebende Text nicht mit der Nummer überschneidet, wenn er in einer anderen Sprache ist oder ein anderes Format erfordert.
6. , ,
Beim ostasiatischen Schreiben, bei dem häufig Aussprachehinweise, Furigana oder andere Anmerkungen über oder unter den Buchstaben verwendet werden, spielen die Elemente eine Rolle Und Und Diese Rolle.
<p>
Ich lerne
<Rubin>chinesisch<rt>Kann</rt></Rubin>Wort<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>In diesem Beispiel enthält das Element Auf dem Zeichen 漢 (Kanji) enthält das Element Zur Aussprache かん (war). Artikel sind verfügbar Fallback-Klammern für Browser, die keine roten Annotationen unterstützen.
7.
Wenn Sie lange Wörter haben, die die Formatierung beeinträchtigen könnten, hilft Ihnen Element weiter. Schlägt eine Möglichkeit für einen Zeilenumbruch (Wortumbruchmöglichkeit) in einem langen Wort vor, wobei der Browser den Text möglicherweise umbrechen möchte.
Dies ist ein Beispiel für eine lange URL: https://www.example.org/ mit/einem/langen/Pfad/und/einer?query=string.Im obigen Beispiel enthält die lange URL ein Element, das es dem Browser ermöglicht, sie bei Bedarf in zwei Zeilen aufzuteilen und dabei das Layout des umgebenden Inhalts beizubehalten. Verifizieren Ein Anfängerleitfaden für responsive HTML-Bilder.
8. Und
Für wissenschaftliche oder mathematische Symbole, chemische Formeln oder Fußnoten können Sie Elemente und für tiefgestellten bzw. hochgestellten Text verwenden.
<p>
Die chemische Formel für Wasser ist H<unten>2</unten>O, und der Satz des Pythagoras ist ein<sup>2</sup> + B<sup>2</sup> = c<sup>2</sup>.
</p>In diesem Beispiel wird ein Element verwendet , um die 2 in H2O als Index anzuzeigen, während das Element den Exponenten im Satz des Pythagoras anzeigt.
9.
Müssen Sie numerische Messungen innerhalb eines bekannten Bereichs darstellen, z. B. Festplattennutzung, Bewertungen oder Testergebnisse? Der Artikel wird Ihnen helfen .
Mithilfe der Attribute „Wert“, „Minimum“ und „Maximum“ können Sie den aktuellen Wert, den Minimalwert bzw. den Maximalwert der Messung angeben.
<meter value="75"min="0"max="100">75%In diesem Beispiel stellt es ein Element dar Ein Testergebnis von 75 %.
10.
Wenn Sie ein Dialogfeld, ein Bedingungsüberlagerungsfenster oder modale Popup-Interaktionen erstellen müssen, ein Element ist der richtige Weg. Sie können das Attribut verwenden XNUMXh geöffnetUm das Dialogfeld standardmäßig anzuzeigen.
<DialogXNUMXh geöffnet><p>Dies ist ein Dialogfeld!</p><Taste im nun erscheinenden Bestätigungsfenster nun wieder los.>Menu</Taste im nun erscheinenden Bestätigungsfenster nun wieder los.></Dialog>In diesem Beispiel wird dank des Designs beim Laden der Seite ein einfaches Dialogfeld mit einem Absatz und einer Schaltfläche zum Schließen angezeigt XNUMXh geöffnet. Für erweiterte Interaktionen können Sie den Inhalt und das Verhalten des Dialogfelds mithilfe von JavaScript anpassen.
11.
Benutze einen Gegenstand Um verwandte Optionen innerhalb eines Dropdown-Menüelements zu gruppieren . Dadurch können Sie Optionen organisieren und kategorisieren, um die Navigation und Auswahl zu erleichtern.
- Es handelt sich um ein Containerelement, das Tags sammelt Innerhalb eines Elements verwandt .
- Hilft beim Organisieren von Optionen durch Erstellen einer visuellen Gruppierung oder Klassifizierung im Dropdown-Menü.
- Erfordert ein Tag Ein Beschriftungsattribut, das den Namen oder Titel des Optionssatzes angibt.
- Es kann ein Element enthalten Ein oder mehrere Unterelemente, die individuelle Entscheidungen innerhalb der Gruppe darstellen.
Beispielsweise:
<wählen><optgroupEtikette="Asien"><ganz ohne irgendetwas tun oder drücken zu müssen.Wert=„kr“>Südkorea</ganz ohne irgendetwas tun oder drücken zu müssen.></optgroup><optgroupEtikette="Europa"><ganz ohne irgendetwas tun oder drücken zu müssen.Wert="de">Deutschland</ganz ohne irgendetwas tun oder drücken zu müssen.></optgroup></wählen>In diesem Beispiel wird die Dropdown-Auswahlliste in zwei Abschnitte unterteilt: Asien und Europa. Jede Gruppe enthält Elemente, die verschiedene Länder innerhalb dieser Region repräsentieren.
Verbessern Sie Ihre Kenntnisse in der Webentwicklung
Das Erlernen weniger bekannter HTML-Elemente kann Ihre Webentwicklungsfähigkeiten erheblich verbessern. Obwohl nicht anerkannt, bieten sie für bestimmte Kontexte wertvolle Vorteile.
Das Hinzufügen dieser Elemente zu Ihren Fähigkeiten verbessert die Interaktivität und Zugänglichkeit und vereinfacht den Webentwicklungsprozess. Denken Sie daran: Auch wenn es ungewohnt sein mag, hat es einen großen Einfluss auf Ihren Weg als Webentwickler. Sie können es jetzt ansehen Sie können unterwegs programmieren: Die besten HTML-Bearbeitungs-Apps für Android.
