Kennen Sie diese acht HTML5 -Tags?

Webentwickler verwenden während der Website -Konstruktion zahlreiche HTML -Tags. Während viele mit gemeinsamen HTML5-Tags wie <code><p></p> , <h1></h1> und <div> vertraut sind, bieten einige weniger bekannte Tags erhebliche Vorteile. In diesem Artikel werden acht solcher Tags untersucht, ihre W3C -Spezifikationen untersucht und praktische Beispiele bereitgestellt. <p> <strong> HTML5 -Tag -Verwendung </strong> </p> verstehen <p> W3C -Spezifikationen bieten konzeptionelle Übersichten, aber die praktische Anwendung kann eine Herausforderung sein. Gute Praxis ist nicht immer streng definiert. Dieser Artikel bietet empfohlene Nutzungsbeispiele. </p> <p> <strong> Key Takeaways </strong> </p> <ul> <li> Verwenden Sie <code><mark></mark>, um den für die Benutzeraktivität relevanten Text hervorzuheben und die Sichtbarkeit zu verbessern.

für weniger wichtige Text einsetzen, wobei die visuelle Wirkung minimiert wird. <small></small>

Verwenden Sie

für kurze Inline -Zitate und <q></q> für längere Auszüge, wobei die semantische Genauigkeit beibehalten wird. <blockquote></blockquote>

implementieren

organisieren <ins></ins> Optionen mit <del></del>, um Auswahlmöglichkeiten zu kategorisieren und die Benutzererfahrung zu verbessern. <s></s>

<select></select> 1. Kontextbeschwerde mit <optgroup></optgroup>

Das <strong> Tag bedeutet "Relevanz" oder "Prüfung". Relevanz ist kontextabhängig; Elemente sind relevant, wenn sie während einer bestimmten Aktivität nützlich sind. Beispielsweise könnten Suchergebnisse mit <mark></mark> gekennzeichnet werden, um die Relevanz für die Suchabfrage anzuzeigen.

Praktisches Beispiel: <mark></mark> Auf einer Seite "billigste Ferienpakete" können die Preise der günstigsten Pakete mit <mark></mark>:

hervorgehoben werden

<strong> Best Practices: <mark></mark>

sollte nicht nur zum Styling verwendet werden; Verwenden Sie dafür CSS. Verwenden Sie es nicht, um die Bedeutung zu bezeichnen (verwenden Sie <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div class=&quot;deal-list&quot;&gt; &lt;div&gt; &lt;h2&gt;Vanuatu Cruise&lt;/h2&gt; &lt;p&gt;&lt;mark&gt;9&lt;/mark&gt; - 5 Nights&lt;/p&gt; &lt;p&gt;A relaxing cruise...&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Fiji Resort Getaway&lt;/h2&gt; &lt;p&gt;&lt;mark&gt;9&lt;/mark&gt; - 6 Nights&lt;/p&gt; &lt;p&gt;Includes all you can eat buffet...&lt;/p&gt; &lt;/div&gt; &lt;div&gt; &lt;h2&gt;Pacific Island Hiking&lt;/h2&gt; &lt;p&gt;99 - 5 Nights&lt;/p&gt; &lt;p&gt;Hike your way...&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> oder

dafür). Verwenden Sie <strong>, um die Relevanz der aktuellen Benutzeraktion hervorzuheben. <mark> <strong> 2. Niedrigere Bedeutung mit <em> <mark>

<strong> reduziert die Textgröße, ein visuelles Nebenprodukt seiner semantischen Bedeutung: die geringere Bedeutung. Verwenden Sie es für weniger kritische Informationen, die häufig in Fußzeilen oder Seitenleisten zu finden sind. <small>

Praktisches Beispiel:

In einer Fußzeile: <small>

oder in einer Produktliste: <strong>

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

Best Practices:

kann die Bedeutung des bereits mit <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;h3&gt;Woolen Llama Print Jumper&lt;/h3&gt; &lt;em&gt;.99&lt;/em&gt;&lt;small&gt; - Excludes tax&lt;/small&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> oder

hervorgehobenen Textes nicht senken. Verwenden Sie es nicht nur für die Größenregelung. <strong> <small> 3. Zitate mit <strong> und <em>

Verwenden Sie <q> für kurze Inline -Zitate und <blockquote> für längere Blockzitate. Diese sind für Zitate und nicht für das Styling (verwenden Sie <span> dafür).

<strong> Praktisches Beispiel:

<q>He hasn't eaten anything as good in his whole life!

<div class="deal-list">
  <div>
    <h2>Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2>Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2>Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

<strong> Best Practices: Beide Unterstützung cite Attribute (URL der Quelle) und <cite> Tags (Quellentitel).

<strong> 4. Einfügung, Löschen und Korrektur mit <ins>, <del> und <s>

<ins> Markierungen hinzugefügt Text, <del> Text entfernt und <s> Text nicht mehr korrekt. Alle Unterstützung cite und datetime Attribute für den Kontext.

<strong> Praktisches Beispiel:

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

<strong> Best Practices: Verwenden Sie <s> für Korrekturen, bei denen das Original ersetzt wird. Verwenden Sie diese nicht nur zum Styling.

<strong> 5. Organisierende Optionen mit <optgroup>

<optgroup> kategorisiert Optionen in <select> Elemente und verbessert die Navigation. Es hat label und disabled Attribute.

<strong> Praktisches Beispiel:

<h3>Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

<strong> Best Practices: <optgroup> selbst kann nicht direkt ausgewählt oder gestylt werden.

<strong> 6. Vordefinierte Optionen mit <datalist>

<datalist> definiert gültige Auswahlmöglichkeiten für <input> Tags und liefert eine Dropdown -Vorschlag -Liste.

<strong> Praktisches Beispiel:

<blockquote>
  <p>Infuse your life with action. Don't wait for it to happen. Make it happen.</p>
  <cite>Bradley Whitford - Author</cite>
</blockquote>

<strong> Best Practices: Browserunterstützung variiert; Die Validierung hängt vom Typ <input> ab.

Abschließend bieten diese häufig übersehenen HTML5-Tags wertvolle semantische Verbesserungen und verbesserte Benutzererfahrungen. Das Verständnis der ordnungsgemäßen Nutzung führt zu sauberer, zugänglicheren und effektiveren Webentwicklung.

Das obige ist der detaillierte Inhalt vonKennen Sie diese acht HTML5 -Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!