So nutzen Sie die neuen Funktionen von HTML 5

Dieses Mal zeige ich Ihnen, wie Sie die neuen Funktionen von HTML 5 nutzen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der neuen Funktionen von HTML 5? Hier sind praktische Fälle, werfen wir einen Blick darauf.

Vorwort

Wie wir alle wissen, gehört HTML5 zum World Wide Web Consortium (W3C). Diese Organisation stellt Standards für die gesamte Internet-Community bereit und die so gebildeten Protokolle können verwendet werden auf der ganzen Welt. Im November 2016 aktualisierte das W3C den langjährigen HTML-5-Standard, das erste kleine Update seit zwei Jahren. Viele der ursprünglich für HTML 5.1 vorgeschlagenen Funktionen wurden aufgrund von Designfehlern und mangelnder Unterstützung durch Browser-Anbieter entfernt.

Obwohl einige Elemente und Funktionsverbesserungen in HTML 5.1 eingeführt wurden, handelt es sich immer noch um ein kleines Update. Zu den neuen Elementen gehören Kombinations-Tags, die jetzt a38fd2622755924ad24c0fc5f0b4d412, a5e9d42b316b6d06c62de0deffc36939, 631fb227578dfffda61e1fa4d04b7d25 umfassen und Entwicklern mehr Möglichkeiten bieten, ihrer Kreativität und ihrem Inhalt Ausdruck zu verleihen.

W3C hat mit der Entwicklung des HTML 5.2-Entwurfs begonnen, der voraussichtlich Ende 2017 veröffentlicht wird. Was wir hier vorstellen möchten, sind die neuen Funktionen und Verbesserungen, die in Version 5.1 eingeführt wurden. Sie müssen kein Javascript verwenden, um diese Funktionen nutzen zu können. Nicht alle Browser unterstützen diese Funktionen. Daher empfiehlt es sich, die Browserunterstützung zu überprüfen, bevor Sie sie in der Produktion verwenden.

Phishing-Angriffe verhindern

Die meisten Leute, die target ='_blank' verwenden, kennen eine interessante Tatsache nicht – neu geöffnete Tabs können window.opener.location ändern eine Phishing-Seite. Auf der geöffneten Seite wird in Ihrem Namen bösartiger JavaScript-Code ausgeführt. Da Benutzer darauf vertrauen, dass die Seite, die sie öffnen, sicher ist, haben sie keine Zweifel.

Um dieses Problem vollständig zu beseitigen, hat HTML 5.1 die Verwendung des rel="noopener"-Attributs durch Isolierung des Browserkontexts standardisiert. rel="noopener" kann in den Tags 3499910bf9dac5ae3c52d5ede7383485 verwendet werden.

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

Flexible Verarbeitung von Bildtiteln

614eb9dc63b3fb809437a716aa228d24-Tag stellt den mit dem 24203f2f45e6606542ba09fd2181843a-Element verbundenen Titel oder die Legende dar, normalerweise als Container für visuelle Elemente wie Bilder, Diagramme, Illustrationen usw. . In früheren HTML-Versionen konnte 614eb9dc63b3fb809437a716aa228d24 nur als untergeordnetes Tag des ersten oder letzten 24203f2f45e6606542ba09fd2181843a verwendet werden. HTML5.1 hat diese Einschränkung gelockert, sodass Sie 614eb9dc63b3fb809437a716aa228d24 jetzt überall in einem 24203f2f45e6606542ba09fd2181843a-Container verwenden können.

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

Rechtschreibprüfung ist eine Aufzählungseigenschaft, deren Wert eine leere Zeichenfolge, wahr oder falsch, sein kann. Wenn Sie den Status „true“ angeben, wird das Element auf Rechtschreibung und Grammatik überprüft.

element.forceSpellCheck() zwingt Benutzeragenten dazu, überprüfte Rechtschreibung und Grammatikfehler für Textelemente zu melden, selbst wenn der Benutzer die Eingabe nie auf dieses Element konzentriert hat.

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

Mit der neuen HTML-Version können Sie ein leeres 5a07473c87748fb1bf73f23d45547ab8-Element erstellen. Es kann ein untergeordnetes Element eines 5b7a15bed8615d1b843806256bebea72-, fc86e7b705049fc9d4fccc89a2e80ee3-Elements sein. Diese Funktion kann beim Entwerfen benutzerfreundlicher Formulare hilfreich sein.

Mit dem Attribut „allowfullscreen“, einer für Frame entwickelten booleschen Variablen, können Sie mithilfe der Methode „requestFullscreen()“ steuern, ob Inhalte im Vollbildmodus angezeigt werden können. Lassen Sie uns beispielsweise einen Iframe verwenden, der in einen YouTube-Player eingebettet ist. Das Attribut „allowfullscreen“ muss festgelegt werden, damit der Player das Video im Vollbildmodus anzeigen kann.

<article>
  <header>
  <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

HTML5.1 ermöglicht es Ihnen, Kopf- und Fußzeilen in eine andere Kopfzeile einzubetten. Sie können dem Kopfzeilenelement eine Kopf- oder Fußzeile hinzufügen, wenn diese im Absatzinhalt enthalten sind. Diese Funktion ist nützlich, wenn Sie Ausarbeitungs-Tags wie 2f8332c8dcfd5c7dec030a070bf652c3 zu semantischen Absatzelementen hinzufügen möchten.

Im folgenden Code enthält das 23c3de37f2f9ebcb477c4a90aac6fffd-Tag ein 15221ee8cba27fc1d7a26c47a001eb9b-Tag.

<article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
          Remove as much air as possible from the bag and seal it. </ins></p>
</article>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das img-Tag von HTML-Bildern

Wie lauten Name, ID und Klasse? in HTML? Was ist der Unterschied?

Das obige ist der detaillierte Inhalt vonSo nutzen Sie die neuen Funktionen von HTML 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!