Production de page Web Introduction de l'article Webjx: 10 extraits de code HTML5 pratiques que vous devriez certainement collecter.
HTML5 est une étape importante dans le développement de la technologie Web. Pour le développement frontal, si vous pouvez trouver des codes qui peuvent devoir être réutilisés fréquemment dans le développement à l'avenir, je pense que vous ne refuseras pas. Vous trouverez ci-dessous plus de 10 extraits de code HTML5 que nous avons soigneusement collectés. Je crois que vous l'aimerez!
Le modèle le plus simple pour HTML5Si vous devez démarrer un nouveau projet HTML5, vous aurez certainement besoin du modèle le plus simple. Voici un modèle HTML5 très simple et clair. Je crois que tout le monde l'aimera!
<! Doctype html><html>
<adal>
<Meta Charset = UTF-8>
<Title> Untitled </Title>
<! - [Si lt ie 9]>
<script src => </ script>
<! [endif] ->
</ head>
<body>
Le contenu principal du Web
</docy>
</html>
Voici un code très simple. Il utilise l'utilisateur pour saisir l'emplacement et obtenir l'emplacement de Google Map, qui est très adapté pour générer des formulaires de contact.
<form form = méthode = get target = _blank><étiquette pour = SADDR> Entrez l'emplacement </BEALD>
<entrée type = nom de texte = SADDR />
<Type d'entrée = nom caché = daddr
Valeur = 350 5th Ave New York, NY 10018 (Empire State Building) />
<Type d'entrée = Soumider Value = Get Directions />
</ form> Fichier GIF à blanc codé de base64 de la taille 1x1
Personnellement, je ne recommande pas d'utiliser ce gif vierge transparent, mais même en 2013, de nombreuses personnes l'utilisent toujours. Vous aimez peut-être aussi utiliser cette méthode.
<img src = data: image / gif; base64, r0lgodlhaqabaiaaaaaaaaaap /// yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7>Le formulaire régulier est autorisé à être utilisé dans HTML5 pour la vérification des entrées:
<Type d'entrée = données de texte = votre Flash-File.swflargeur = 0 hauteur = 0>
<param name = film Value = your-flash-file.swf />
<param name = qualité de qualité = high />
</ object> Film et prend en charge le secours
Une autre fonctionnalité la plus utile de HTML5 est la balise vidéo, qui vous permet d'intégrer facilement des fichiers vidéo. Cependant, de nombreux anciens navigateurs ne le soutiennent pas, donc le code suivant sera très utile
<largeur vidéo = 640 hauteur = 360 commandes><source src = __ vidéo __. MP4 type = vidéo / mp4 />
<source src = __ vidéo __. Ogv type = vidéo / ogg />
<largeur d'objet = 640 hauteur = 360 type = application / x-shockwave-flash
data = __ flash __. SWF>
<param name = film Value = __ Flash __. Swf />
<param name = flashvars value = ControlBar = over & amp;
image = __ Affiche __. JPG & amp; file = __ vidéo __. MP4 />
<img src = __ vidéo __.
Titre = pas de capacités de lecture vidéo, veuillez télécharger la vidéo ci-dessous />
</ objet>
</ Video> Liens d'appel iPhone et SMS
Apple introduit un moyen très pratique de créer des liens téléphoniques et texte sur iPhone. Le code est le suivant:
<a href = tel: 1-408-555-5555> 1-408-555-5555 </a><a href = sms: 1-408-555-1212> nouveau message SMS </a> Fonction de remplissage automatique de HTML5
En utilisant des éléments de données de données, HTML5 permet d'utiliser un ensemble de données pour générer des fonctions de remplissage automatique. Maintenant, vous n'avez pas besoin d'utiliser du code JS tiers ou des bibliothèques de classe!
<entrée name = frameworks list = frameworks /><datalist id = frameworks>
<Valeur d'option = mootools>
<Valeur d'option = MOOBILE>
<Valeur d'option = Dojo Toolkit>
<Valeur d'option = jQuery>
<Valeur d'option = yui>
</DATALIST> Le fichier peut être téléchargé directement <! - Téléchargera en tant que dépenses.pdf ->
<a href = / files / adlafjlxjewfasd89asd8f.pdf
Télécharger = dépenses.pdf> Téléchargez votre rapport de dépenses </a> Crash Old Version Browser IE6
Vous devez savoir que IE6 est assez utilisé en Chine. Si je ne prends pas en charge IE6 dans votre application Web ou votre site Web, ajoutez ce code et je crois que vos utilisateurs mettront à niveau IE6, hehe!
<style> * {position: relative} </pysty> <s table> <fort> </ table>