recherche

Maison >interface Web >Tutoriel H5 >10 extraits de code HTML5 prêts à être utilisés dans la production de sites Web, explication détaillée

10 extraits de code HTML5 prêts à être utilisés dans la production de sites Web, explication détaillée

黄舟
黄舟original
2017-03-22 15:21:062093parcourir

　HTML est facile à écrire, mais lors de la création de pages Web, vous devez souvent effectuer les mêmes tâches à plusieurs reprises, comme créer des formulaires. Dans cet article, j'ai rassemblé 10 extraits de code HTML super utiles, notamment un modèle de démarrage HTML5, une image vierge, des appels téléphoniques et l'envoi de messages texte, Saisie semi-automatique et bien plus encore pour vous aider à accélérer le développement.

Modèle de démarrage HTML5

Lorsque vous démarrez un nouveau projet, vous avez besoin d'un modèle de démarrage. Voici un modèle simple et épuré qui peut servir de base à votre projet HTML5. 

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

Formulaire pour obtenir un itinéraire (Google Maps)

Voici un code de formulaire simple mais puissant où l'utilisateur peut saisir ses indications de localisation vers un endroit spécifique. Très utile pour les pages de contact. 

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

Image GIF vierge codée en Base64

Je ne recommande pas d'utiliser des GIF transparents, mais je sais que même en 2013, de nombreuses personnes les utilisent encore. Si vous êtes l'un d'entre eux, vous apprécierez peut-être ce GIF vierge 1 * 1px encodé en Base64. Cette méthode est meilleure que d’utiliser des images. 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

Expressions régulières pour la validation des e-mails

HTML5 apporte de grandes améliorations à la fonctionnalité des formulaires, par exemple en permettant d'utiliser des modèles d'expressions régulières pour valider les e-mails. 

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Intégrer Flash

Avez-vous souvent besoin d'intégrer des fichiers Flash dans des pages HTML ? Si tel est le cas, vous feriez mieux de sauvegarder le code d'intégration Flash ci-dessous pour une utilisation future. 

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

Vidéo HTML5 avec solution de secours Flash

Une autre fonctionnalité intéressante de la nouvelle spécification HTML5 est la balise Vidéo, qui vous permet d'intégrer facilement des fichiers vidéo. Mais malheureusement, certains navigateurs ne peuvent pas gérer les vidéos HTML5 intégrées. Par conséquent, ce code est compatible avec les anciens navigateurs et utilise Flash dans les navigateurs qui ne prennent pas en charge la vidéo HMTL5. 

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

Appel et SMS

Dans le Web mobile, il existe un moyen rapide de créer des liens d'appel et de SMS. Vous trouverez ci-dessous un exemple de code, n'oubliez pas de l'enregistrer dans votre bibliothèque d'extraits de code. 

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

Fonctionnalité de saisie semi-automatique

À l'aide de l'élément dataList, HTML5 vous permet de créer une liste de données de saisie semi-automatique pour un champ de saisie. Hyper utile ! Voici un exemple de code. 

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

Fichiers téléchargeables

HTML5 permet d'utiliser l'attribut de téléchargement pour forcer le téléchargement de fichiers. Voici un lien standard vers un fichier téléchargeable. 

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Crash IE6

En 2013, la part de marché d'Internet Explorer 6, qui faisait un cauchemar aux développeurs front-end, a beaucoup baissé. Mais certains l’utilisent encore. Si vous souhaitez vous débarrasser de cet ancien navigateur, voici un code très intéressant à inclure dans votre page HTML pour faire crasher IE6. 

<style>*{position:relative}</style><table><input></table>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisation de HTML5+SignalR2.0 (.Net) pour réaliser le partage de code de vidéos Web nativesArticle suivant：Utilisation de HTML5+SignalR2.0 (.Net) pour réaliser le partage de code de vidéos Web natives

Articles Liés

Voir plus