Web-Frontend
H5-Tutorial
10 HTML5-Codefragmente, die Sie sofort bei der Website-Erstellung verwenden können, ausführliche Erklärung
10 HTML5-Codefragmente, die Sie sofort bei der Website-Erstellung verwenden können, ausführliche Erklärung
HTML ist einfach zu schreiben, aber beim Erstellen von Webseiten müssen Sie häufig dieselben Aufgaben wiederholt ausführen, beispielsweise das Erstellen von Formularen. In diesem Artikel habe ich 10 äußerst nützliche HTML-Codeschnipsel zusammengestellt, darunter HTML5 Startup-Vorlage, leeres Bild, Telefonanrufe tätigen und Textnachrichten senden, Autovervollständigung und mehr, um Ihnen zu helfen, die Entwicklung zu beschleunigen.
HTML5-Startvorlage
Wenn Sie ein neues Projekt starten, benötigen Sie eine Startvorlage. Hier ist eine einfache und übersichtliche Vorlage, die als Grundlage für Ihr HTML5-Projekt verwendet werden kann.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
Formular zum Abrufen von Wegbeschreibungen (Google Maps)
Hier ist ein einfacher, aber leistungsstarker Formularcode, mit dem der Benutzer seine Standortanweisungen zu einem bestimmten Ort eingeben kann. Sehr nützlich für Kontaktseiten.
<form action="http://maps.google.com/maps" method="get" target="_blank"> <label for="saddr">Enter your location</label> <input type="text" name="saddr" /> <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" /> <input type="submit" value="Get directions" /> </form>
Base64-codiertes leeres GIF-Bild
Ich empfehle nicht, transparente GIFs zu verwenden, aber ich weiß, dass auch im Jahr 2013 noch viele Menschen sie verwenden. Wenn Sie einer von ihnen sind, könnte Ihnen dieses Base64-codierte 1 * 1px leere GIF gefallen. Dieser Weg ist besser als die Verwendung von Bildern.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
Reguläre Ausdrücke für die E-Mail-Validierung
HTML5 führt zu erheblichen Verbesserungen der Formularfunktionalität, z. B. ermöglicht es, reguläre Ausdrucksmuster zur Validierung von E-Mails zu verwenden.
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />Flash einbetten
Müssen Sie häufig Flash-Dateien in HTML-Seiten einbetten? Wenn ja, sollten Sie den unten stehenden Flash-Einbettungscode besser für die zukünftige Verwendung speichern.
<object type="application/x-shockwave-flash" data="your-flash-file.swf" width="0" height="0"> <param name="movie" value="your-flash-file.swf" /> <param name="quality" value="high"/> </object>
HTML5-Video mit Flash-Fallback
Eine weitere tolle Funktion der neuen HTML5-Spezifikation ist das Video-Tag, mit dem Sie Videodateien einfach einbetten können. Leider können einige Browser eingebettete HTML5-Videos nicht verarbeiten. Daher ist dieser Code mit älteren Browsern kompatibel und verwendet Flash in Browsern, die kein HMTL5-Video unterstützen.
<video width="640" height="360" controls> <source src="VIDEO.MP4" type="video/mp4" /> <source src="VIDEO.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="FLASH.SWF"> <param name="movie" value="FLASH.SWF" /> <param name="flashvars" value="controlbar=over&image=POSTER.JPG&file=VIDEO.MP4" /> <img src="VIDEO.JPG" width="640" height="360" alt="TITLE" title="No video playback capabilities, please download the video below" /> </object> </video>
Anrufe und SMS
Im mobilen Web gibt es eine schnelle Möglichkeit, Anruf- und SMS-Links zu erstellen. Nachfolgend finden Sie einen Beispielcode. Denken Sie daran, ihn in Ihrer Code-Snippet-Bibliothek zu speichern.
<a href="tel:1-408-555-5555">1-408-555-5555</a> <a href="sms:1-408-555-1212">New SMS Message</a>
Funktion zur automatischen Vervollständigung
Mit dem dataList-Element können Sie in HTML5 eine Liste mit Daten zur automatischen Vervollständigung für ein Eingabefeld erstellen. Super nützlich! Hier ist ein Beispielcode.
<input name="frameworks" list="frameworks" /> <datalist id="frameworks"> <option value="MooTools"> <option value="Moobile"> <option value="Dojo Toolkit"> <option value="jQuery"> <option value="YUI"> </datalist>
Herunterladbare Dateien
HTML5 ermöglicht die Verwendung des Download-Attributs, um das Herunterladen von Dateien zu erzwingen. Hier ist ein Standardlink zu einer herunterladbaren Datei.
<!-- will download as "expenses.pdf" --> <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
Crash IE6
Im Jahr 2013 ist der Marktanteil von Internet Explorer 6, der Frontend-Entwicklern einen Albtraum bescherte, stark zurückgegangen. Aber einige Leute benutzen es immer noch. Wenn Sie diesen alten Browser loswerden möchten, finden Sie hier einen sehr interessanten Code, den Sie in Ihre HTML-Seite einfügen können, um den IE6 zum Absturz zu bringen.
<style>*{position:relative}</style><table><input></table>Das obige ist der detaillierte Inhalt von10 HTML5-Codefragmente, die Sie sofort bei der Website-Erstellung verwenden können, ausführliche Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
