5 HTML-Funktionen, die Sie vielleicht nicht kennen

Für ein Sprache so einfach und leicht zu erlernen, HTML bietet sicherlich eine unerwartete Menge nützlicher Funktionen, viele von denen die meisten von uns nicht wissen. Es ist schwer, mit der Zeit Schritt zu halten, und Sie denken vielleicht, dass alles so ist “Sie wissen vielleicht nicht” Die Artikel müssen sich auf die neuesten Tags beziehen, HTML hat auch einige ziemlich hilfreiche Funktionen, die schon eine Weile existieren.

In diesem Artikel zeige ich Ihnen von der Rechtschreibprüfung bis zum Hinzufügen von Tastenkombinationen fünf weniger bekannte HTML-Funktionen.

1. Überprüfen Sie die Rechtschreibung während der Eingabe

Das Rechtschreibprüfung Attribut fordert Browser auf, die Rechtschreibprüfung zu überprüfen, während ein Benutzer ein Element eingibt. Dieses Attribut hat eine globale Bedeutung, Sie können es zu jedem HTML-Tag hinzufügen.

Es funktioniert jedoch nur für Elemente, die dies können Texteingabe übernehmen. Es ist nützlich, es global zu haben, weil es sein kann von untergeordneten Elementen geerbt. Fügen Sie es beispielsweise einem hinzu

Etikett Alle untergeordneten Elemente, die Texteingaben enthalten, erben dieses Attribut.

Die Rechtschreibprüfung funktioniert alles text Typen: Text, Suche, url, und Email. Es funktioniert auch an </code>, und bearbeitbare Elemente</strong> (Elemente mit <code>inhaltlich editierbar</code> Attribut).</p> <p>Sein Wert kann eine leere Zeichenfolge sein, <code>wahr</code>, oder <code>falsch</code>. Die leere Zeichenfolge und <code>wahr</code> werden <strong>Aktivieren Sie die Rechtschreibprüfung</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Geben Sie hier etwas ein </p> </pre> <p>Im obigen Code, <strong>beide <code><div></code> und <code><p></code> Tags prüfen die Rechtschreibung</strong> wenn ein Benutzer in sie eingibt.</p> <p>Wenn der Benutzer hat <strong>deaktivierte Rechtschreibprüfung</strong> In den Browsereinstellungen wird die Rechtschreibung nicht geprüft, <strong>selbst wenn <code>Rechtschreibprüfung</code> wurde hinzugefügt</strong>.</p> <h4>2. Seien Sie vor gefährdeten CDN-Ressourcen sicher</h4> <p>Es ist ziemlich üblich, Ressourcen wie Skripte und Stylesheet-Dateien durch zu hosten <abbr>CDN</abbr>s. Aber wenn die <strong>CDN wird kompromittiert</strong>, Dies gilt auch für diese gehosteten Dateien. Wenn eine abgerufene Ressource auf Ihrer Website gefährdet ist, gilt dies auch für Ihre Website!</p> <p>Sehen Sie, was das Mozilla Developer Network zu dem Problem sagt:</p> <blockquote><p><q>Das Verwenden von CDNs birgt auch das Risiko, dass ein Angreifer, wenn er die Kontrolle über ein CDN erlangt, beliebige schädliche Inhalte in Dateien auf dem CDN einfügen (oder die Dateien vollständig ersetzen kann) und somit möglicherweise alle Websites angreifen kann, die Dateien abrufen von dieser CDN.</q></p></blockquote> <p>Um das zu verhindern, <strong>Subresource Integrity (SRI)</strong> wurde Anfang 2014 von W3C eingeführt. Dieses Schema <strong>vergleicht den Hashwert</strong> (das Ergebnis der Anwendung einer Hash-Funktion auf eine Eingabe) <strong>einer Ressource</strong> um es zu bestätigen.</p> <p>Angenommen, es gibt eine JavaScript-Datei unter <code>https://example.com/example.js</code>. Zuerst Du <strong>Eine Hash-Funktion anwenden</strong> zu dieser Datei dann <strong>addiere den produzierten Hashwert</strong> zum <strong><code>Integrität</code> Attribut</strong> des <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>Nun, wann immer eine Webseite Ihrer Site mit dem obigen Code geladen werden muss <code>beispiel.js</code>, der Browser <strong>wendet zuerst die Hash-Funktion an</strong>, und lädt und läuft <code>beispiel.js</code> nur wenn es ist <strong>Hashwert entspricht dem <code>Integrität</code> Wert</strong>.</p> <p>Ob <strong><code>example.com</code> wurde kompromittiert</strong> und <strong><code>beispiel.js</code> wurde eingemischt</strong> mit dann der Hashwert von <code>beispiel.js</code> passt nicht zum <strong><code>Integrität</code> Wert</strong>. </p> <p>Die häufigsten CDNs bieten bereits <strong>SRI <code>Integrität</code> Werte</strong>, Sie können hier aber auch eine generieren.</p> <h4>3. Überschreiben Sie die Formularziele in den Senden-Schaltflächen</h4> <p>Sie kennen wahrscheinlich die <strong><code>Ziel</code> Attribut</strong>, derjenige, der entscheidet <strong>wo sich eine Hyperlink-Ressource öffnet</strong>, zum Beispiel auf derselben Seite oder in einem neuen Tab. Vielleicht wissen Sie auch dasselbe <code>Ziel</code> Attribut in der <code><form></code> tag entscheidet <strong>Dort wird die Antwort aus der Formularübermittlung angezeigt</strong>.</p> <p>In einem der frühen Entwürfe von HTML5, <code>Formtarget</code> wurde zusammen mit vier anderen Formularübergabeattributen definiert: <strong><code>Formaktion</code>, <code>formenctype</code>, <code>Formmethode</code></strong>, und <strong><code>Formnovalidat</code></strong>. </p> <p>Diese Attribute können sein <strong>verwendet mit Senden-Schaltflächen</strong>, und sie überschreiben ihre jeweiligen Attribute im <code><form></code> Tag, zu dem die Schaltflächen gehören.</p> <p>Wenn also ein Formular mit einer Schaltfläche gesendet wird, die eine <code>Formtarget</code> Attribut, das <strong>Antwort wird entsprechend angezeigt <code>Formtarget</code> Wert</strong>, anstatt der <code>Ziel</code> Wert von <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>Wenn im obigen Code das Formular über die zweite Schaltfläche zum Senden (<code>drucken</code> ) wird die Antwort <strong>erscheinen in einem neuen Browserkontext</strong>, wie in einem neuen Tab.</p> <h4>4. Blenden Sie Elemente semantisch aus</h4> <p>Wenn es darum geht <strong>Elemente verstecken</strong>, Wir alle durchliefen verschiedene Phasen des Versteckens: using <strong><code>Deckkraft: 0</code>, <code>Sichtbarkeit: versteckt</code>, <code>Höhe: 0; Breite: 0</code>, <code>Anzeige: keine</code>, <code>Text-Gedankenstrich: -999px</code></strong> in unserer CSS-Datei.</p> <p>Jede Methode hat ihren Zweck, keine davon ist überflüssig, und auch nicht diese: die <strong><code>versteckt</code> HTML-Attribut</strong>. Wenn ein Element hat <code>versteckt</code> darauf angegeben, wird es ausgeblendet.</p> <pre name="code"> <div hidden>… </div> </pre> <p>Es funktioniert das <strong>genauso wie das <code>Anzeige: keine;</code> CSS-Regel;</strong> das Element mit dem <code>versteckt</code> Attribut <strong>wird nicht gerendert</strong> auf der Seite. Jedes Skript innerhalb des Elements wird ausgeführt, und wenn es sich um ein Formularsteuerelement handelt, wird es zusammen mit übergeben <strong>andere Formularkontrollen während der Formularübermittlung</strong>.</p> <p>Der Vorteil von <code>versteckt</code> Ist es das? <strong>semantisch angemessen</strong>, Bei HTML5 dreht sich alles um Semantik und <code>versteckt</code> ist Teil der HTML5-Umgebung!</p> <p>Wenn ein Element verborgen ist, muss es auch sein <strong>in allen Plattformen versteckt</strong>, Nicht nur in Webbrowsern, sondern auch in Bildschirmlesern, Fernsehern, Projektoren usw.</p> <p>Es ist auch <strong>nicht stilabhängig</strong>, Auch wenn Sie das Autoren-CSS von einer Seite entfernen, bleibt das Element ausgeblendet. Im Fall von <code>Anzeige: keine;</code> das wird nicht passieren Denken Sie also an <code>versteckt</code> als die <strong>Ironclad-Version von <code>Anzeige: keine;</code></strong>.</p> <h4>5. Fügen Sie Tastenkombinationen hinzu</h4> <p>Das <strong><code>Zugangsschlüssel</code> globales Attribut</strong> wurde bereits in HTML4 definiert und so <strong>Erstellt eine Tastenkombination</strong> mit dem der Benutzer ein Element auf der Seite bedienen kann.</p> <p>Die Tastenkombination für eine Verknüpfung wird angezeigt <strong>hängt von zwei dingen ab</strong>:</p> <ol><li>das <strong><code>Zugangsschlüssel</code> Wert</strong> dass wir einem Element geben</li> <li>das <strong>vorbelegte Schlüssel, die von einem Browser verwendet werden</strong> für dasselbe Element</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Mozilla Developer Network</figcaption></figure><p>Nehmen Sie dieses Beispiel:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Aussicht </button> </pre> <p>Wenn Sie in Firefox sind <strong>Drücken Sie die Tastenkombination Alt + Umschalttaste + V (oder Alt + Strg + V</strong> in macOS) erhalten Sie die Warnung “Ansicht angeklickt”.</p> <p>Da die vordefinierten Browserschlüssel je nach Browser und Betriebssystem unterschiedlich sind, wird dies empfohlen <strong>Informieren Sie die Benutzer über die Tastenkombinationen</strong> für die Verknüpfungen verwendet.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <IMG> CSS-Eigenschaften, die Sie kennen sollten</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">5 iPhone Apps, um Ihre Investitionen zu verfolgen</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5 Festplatten-Formatierungs- und Partitionierungsprogramme</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Nächste Artikel</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">5 Ideen Windows 10 sollte von Mac OS X Yosemite kopieren</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Vorheriger Artikel</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">5 HTML-Elemente, die Sie möglicherweise nicht kennen</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Nützliche Informationen und Tipps zur Webentwicklung. Programmierung, Webdesign, CSS, HTML, JAVASCRIPT. Konfigurieren und installieren Sie WINDOWS neu. Erstellung von Websites und Anwendungen von Grund auf neu. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>