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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
