10 HTML5-Codefragmente, die Sie sofort bei der Website-Erstellung verwenden können, ausführliche Erklärung-H5-Tutorial-php.cn

10 HTML5-Codefragmente, die Sie sofort bei der Website-Erstellung verwenden können, ausführliche Erklärung

黄舟

Freigeben： 2017-03-22 15:21:06

Original

2091 Leute haben es durchsucht

　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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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">

Nach dem Login kopieren

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}" />

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!