Heim > Artikel > Web-Frontend > 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

黄舟Original: 2017-03-22 15:21:062025Durchsuche

　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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwendung von HTML5+SignalR2.0 (.Net) zur Codefreigabe nativer WebvideosNächster Artikel：Verwendung von HTML5+SignalR2.0 (.Net) zur Codefreigabe nativer Webvideos

In Verbindung stehende Artikel

Mehr sehen