Maison  >  Article  >  interface Web  >  Résumé des façons d'obtenir des effets d'animation dans les compétences du didacticiel HTML5 _html5

Résumé des façons d'obtenir des effets d'animation dans les compétences du didacticiel HTML5 _html5

WBOY
WBOYoriginal
2016-05-16 15:45:591606parcourir

L'éditeur utilise une voiture en mouvement comme exemple pour décrire trois façons d'implémenter l'animation HTML5. Les idées sont claires. L'animation n'est pas seulement du canevas, mais aussi du css3 et du javascript, une implémentation optimale peut être obtenue.

PS : En raison de la carte graphique, de l'intervalle des images d'enregistrement et éventuellement du processeur de votre ordinateur, le processus de lecture peut être un peu irrégulier ou déformé !
Il peut être implémenté de trois manières :
(1) Élément Canvas combiné avec JS
(2) Animation CSS3 pure (non prise en charge par tous les navigateurs grand public, tels que IE)
(3) CSS3 combiné avec Jquery
Savoir utiliser l'animation CSS3 est plus important que savoir utiliser l'élément <canvas> , comme CSS), mais l'effet que nous utilisons pour personnaliser le dessin à l'aide de Canvas ne peut pas être optimisé. La raison en est encore une fois que le matériel utilisé par le navigateur dépend principalement des capacités de la carte graphique. Actuellement, le navigateur ne nous donne pas d'accès direct à la carte graphique. Par exemple, chaque opération de dessin doit d'abord appeler certaines fonctions du navigateur.
1.canvas
Code HTML :

Copier le code
Le code est le suivant :



title>Animation en HTML5 utilisant l'élément canvas

"1000" height="600">Votre navigateur ne prend pas en charge l'élément <canvas>. Pensez à mettre à jour votre navigateur ! id="contrôles">




< ;/corps>


Code js :

Définir quelques variables :


Copier le code

Le code est la suivante :
var dx=5, //Taux actuelrate=1, //Vitesse de lecture actuelleani, //Boucle d'animation actuelle
c, / /Drawing (Contexte du canevas)
w, //Voiture [cachée](Contexte du canevas)
grassHeight=130, //Hauteur de l'arrière-plan
carAlpha=0, //Angle de rotation des pneus
carX=- 400 , //La position de la voiture dans la direction de l'axe x (sera modifiée)
carY=300, //La position de la voiture dans la direction de l'axe y (restera constante)
carWidth= 400, //La largeur de la voiture
carHeight=130, //La hauteur de la voiture
tiresDelta=15, //La distance entre un pneu et le châssis de la voiture le plus proche
axisDelta=20, / /La distance entre l'axe du châssis inférieur de la voiture et le pneu
rayon=60 //rayon du pneu



Pour instancier le canevas de la voiture (qui est initialement masqué), nous utilisons la fonction anonyme auto-exécutable suivante


Copier le code

Le code est le suivant :
(function(){ var car=document.createElement('canvas'); //Créer un élémentcar.height=carHeight axisDelta radius; //Définir la hauteur
car.width=carWidth; //Définir la largeur
w=car.getContext('2d'))(); >
Cliquez sur le bouton « Play » pour simuler la fonction « lecture d'image » en exécutant de manière répétée l'opération « dessiner la voiture » ​​à intervalles réguliers :





Copier le code
Le code est le suivant :



fonction play(s){ //Le paramètre s est un bouton

if(ani){ //Si ani n'est pas nul, cela nous représente Il y a déjà une animation
clearInterval(ani); //il faut donc l'effacer (arrêter l'animation) ani=null s.innerHTML='Play' ; //Renommer le bouton en "Play" }else{ ani=setInterval(drawCanvas,40); //Nous définirons l'animation à 25 ips [images par seconde], 40/1000, ce qui est un -vingt-cinquième
s.innerHTML='Pause'; //Renommer le bouton en "Pause"
}
}



L'accélération et la décélération sont obtenues en modifiant la distance de déplacement grâce aux méthodes suivantes :





Copiez le code
Le code est le suivant :


fonction vitesse(delta){
var newRate=Math.max(rate delta,0.1);
dx=newRate/rate*dx;
Méthode d'initialisation pour le chargement de la page :
//init
function init(){
c=document.getElementById('canvas').getContext('2d'); ;
}



Méthode principale :



Copier le code
Le code est le suivant :
function drawCanvas (){
c.clearRect(0,0,c.canvas.width, c.canvas.height); //Effacer le canevas (affiché) pour éviter les erreurs
c.save(/); /Enregistrer les valeurs et l'état actuels des coordonnées, correspondant à des opérations "push" similaires
drawGrass(); //Dessiner l'arrière-plan
c.translate(carX,0); //Déplacer les coordonnées du point de départ
c.translate(carX,0); 🎜>drawCar(); //Dessine une voiture (toile cachée)
c.drawImage(w.canvas,0,carY); //Dessine la voiture qui est finalement affichée
c.restore(); /Restaurer l'état du canevas, correspondant C'est similaire à l'opération "pop"
carX =dx; //Réinitialiser la position de la voiture dans la direction de l'axe X pour simuler la marche en avant
carAlpha =dx/ radius; //Augmente l'angle du pneu proportionnellement
if (carX>c.canvas.width){ //Définissez des conditions limites régulières
carX=-carWidth-10 //Vous pouvez également inverser la vitesse en dx; *=-1;
}
}



Dessiner l'arrière-plan :



Copier le code
Le code est le suivant :
function drawGrass( ){
//Créez un dégradé linéaire. Les deux premiers paramètres sont les coordonnées du point de départ du dégradé, et les deux derniers paramètres sont les coordonnées du point final du dégradé
var grad=c. createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height);
//Spécifiez la couleur du dégradé pour le dégradé linéaire, 0 représente la couleur de départ du dégradé, 1 représente la couleur de fin du dégradé
grad.addColorStop(0,'#33CC00');
grad.addColorStop(1,'#66FF22');
c.fillStyle=grad; .fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight
}

Dessinez la carrosserie de la voiture :


Copiez le code

Le code est le suivant :
function drawCar( ){ w.clearRect(0,0,w.canvas.width,w.canvas.height); //Effacer le plan de travail cachéw.strokeStyle='#FF6600'; //Définissez la couleur de la bordure
w.lineWidth=2; //Définissez la largeur de la bordure en pixels
w.fillStyle='#FF9900'; //Définissez la couleur de remplissage
w.beginPath( ); //Commencer à dessiner un nouveau chemin
w.rect(0,0,carWidth,carHeight); //Dessiner un rectangle
w.stroke(); //Dessiner une bordure
w.fill); (); //Remplir l'arrière-plan
w.closePath(); //Fermer le nouveau chemin dessiné
drawTire(tiresDelta radius,carHeight axisDelta); //Nous commençons à dessiner la première roue
drawTire(carWidth); -tiresDelta-radius,carHeight axisDelta); / /De même, le deuxième
}



Dessiner des pneus :


Copier le code

Le code est le suivant :
function drawTire( x,y){ w.save(); w.translate(x,y);
w.rotate(carAlpha); ;
w.lineWidth=1;
w.fillStyle='#0099FF';
w.beginPath(); PI,false );
w.fill();
w.closePath();
w.beginPath();
w.moveTo(radius,0); (-radius ,0);
w.stroke();
w.closePath();
w.beginPath();
w.moveTo(0,radius); .lineTo( 0,-radius);
w.stroke();
w.closePath();
w.restore();
Comme le principe est simple et que des commentaires détaillés sont faits dans le code, je ne les expliquerai pas un par un ici !


2.CSS3


Vous verrez que nous avons complètement réalisé le même effet d'animation que ci-dessus sans un seul code JS :

Code HTML :



Copiez le code
Le code est le suivant :





Animations en HTML5 utilisant des animations CSS3

châssis">



< div class="vr">


>


herbe">





Code CSS :
corps
{
padding:0;
marge:0
}



Définissez l'animation de rotation de la carrosserie et des pneus (vous verrez qu'en gros, chaque animation a quatre versions de définition : version native/webkit[Chrome|Safari]/ms[pour une compatibilité ascendante avec IE10]/moz[FireFox 】)


Copiez le code

Le code est le suivant :

/*Définir l'animation : passer de la position -400px à la position 1600px*/
@keyframes carAnimation
{
0% { left:-400px } /* Spécifier la position initiale, 0% équivaut à from*/
100% { left:1600px; } /* Spécifie la position finale, 100% équivaut à to*/
}
/* Safari et Chrome */
@ -webkit-keyframes carAnimation
{
0% {left:-400px; }
100% {left:1600px;
}
/* Firefox */
@ -moz -keyframes carAnimation
{
0% {left:-400; }
100% {left:1600px;
}
/*IE ne prend pas encore en charge cette définition. est pour Back compatible avec IE10*/
@-ms-keyframes carAnimation
{
0% {left:-400px }
100%{left:1600px }
} @keyframes; tyreAnimation
{
0% {transform: rotate(0); }
100% {transform: rotate(1800deg);
}
@-webkit-keyframes tyreAnimation
{
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(1800deg }
}
@-moz-keyframes tyreAnimation
{
0% { -moz-transform : rotation(0); }
100 % { -moz-transform : rotation(1800deg) }
}
@-ms-keyframes tyreAnimation
{
0% { -ms-transform: rotate(0); }
100% { -ms-transform: rotate(1800deg); }
} #container
{
position :relative;
largeur:100%;
hauteur:600px;
overflow:hidden; /*C'est très important*/
}
#car
{
position :absolute; / *La voiture est positionnée de manière absolue dans le conteneur*/
width:400px
height:210px /*La hauteur totale de la voiture, pneus et châssis compris*/
z-index; :1; /*Laissez la voiture au-dessus de l'arrière-plan*/
top:300px; /*Distance du haut (axe y)*/
gauche:50px; /
/* Le contenu suivant donne à l'élément une animation prédéfinie et les attributs associés*/
-webkit-animation-name:carAnimation; /*name*/
-webkit-animation-duration:10s; durée*/
-webkit-animation-iteration-count:infinite; /*Nombre d'itérations-infini*/
-webkit-animation-timing-function:linear /*Lire l'animation à la même vitesse depuis le début pour terminer* /
-moz-animation-name:carAnimation; /*name*/
-moz-animation-duration:10s /*duration*/
-moz-animation-iteration-count : infini; /*Nombre d'itérations - illimité*/
-moz-animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/
-ms-animation-name:carAnimation ; /*Nom*/
-ms-animation-duration:10s /*Duration*/
-ms-animation-iteration-count:infinite; /*Nombre d'itérations-infini*/
- ms-animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/
animation-name:carAnimation; /*Name*/
animation-duration:10s; */
animation-iteration-count:infinite; /*Nombre d'itérations-infini*/
animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/
}
/*corps*/
#châssis
{
position:absolue;
largeur:400px
hauteur:130px
arrière-plan:#FF9900; border: 2px solid #FF6600;
}
/*Tire*/
.tire
{
z-index:1 /*Identique à ci-dessus, le pneu doit également être placé dans l'arrière-plan au-dessus*/
position:absolute;
bottom:0;
border-radius:60px; /*circle radius*/
height:120px;
width:120px; /* 2*radius=width */
background:#0099FF; /*fill color*/
border:1px solid #3300FF
-webkit-animation-name : tyreAnimation ;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite
-webkit-animation-timing-function:linear; nom :tyreAnimation;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite
-moz-animation-timing-function:linear; animation -name:tyreAnimation;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite
-ms-animation-timing-function:linear; - name:tyreAnimation;
animation-duration:10s;
animation-iteration-count:infinite;
animation-timing-function
}
#fronttire
{
right:20px; /*Réglez la distance entre le pneu droit et le bord à 20*/
}
#backtire
{
left:20px /*Définissez la distance entre le pneu gauche; pneu et le bord à 20*/
}
#grass
{
position:absolute; /*Le fond est positionné de manière absolue dans le conteneur*/
width:100% height:130px;
bottom:0;
/*Laissez la couleur d'arrière-plan dégradée linéairement, en bas, représenter le point de départ du dégradé, la première valeur de couleur est la valeur de départ du dégradé, la deuxième valeur de couleur est la valeur finale*/
background:linear-grdaient(bottom,#33CC00,#66FF22);
background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); -moz-linear-gradient(bottom, #33CC00,#66FF22);
background:-ms-linear-gradient(bottom,#33CC00,#66FF22
}
.hr,.vr {
position:absolue ;
arrière-plan:#3300FF;
}
.hr
{
hauteur:1px
largeur:100%; du pneu*/
gauche:0
top:60px
}
.vr
{
largeur:1px;
hauteur:100%; /*Ligne verticale du pneu*/
gauche
haut:0
}

3.JQuery et CSS3
C'est une méthode avec un bon effet et une bonne compatibilité (d'autant plus qu'IE9 ne prend pas encore en charge CSS3)
Code HTML (vous pouvez voyez qu'il n'est pas différent du code HTML en CSS3) :


Copiez le codeLe code est le suivant :



Animations en HTML5 à l'aide d'animations CSS3< /titre> <br></head> <br><corps> <br><div id="conteneur"> id="châssis"></div> <br><div id="backtire" class="tire"> <br><div class="hr"></div> ><div class="vr"></div> <br></div> "hr" <</div> <br><div class="vr"></div> <br></div> id="herbe"></div> <br></div> <br><footer></footer> >CSS : <br><style> <br>corps <br>{ <br>padding :0; <br>marge :0; <br>} <br>#conteneur <br>{ <br>position : relatif; <br>width:100%; <br>height:600px; <br>overflow:hidden; /*C'est très important*/ <br>} <br>#car <br>{ <br>position : Absolute; /* La voiture est positionnée de manière absolue dans le conteneur*/ <br>width:400px <br>height:210px /*La hauteur totale de la voiture, pneus et châssis compris*/ <br>z-index; 1; /*Laissez la voiture au-dessus de l'arrière-plan*/ <br>top:300px; /*Distance depuis le haut (axe y)*/ <br>gauche:50px /*Distance depuis la gauche (x-); axe)*/ <br>} <br>/*Corps*/ <br>#chassis <br>{ <br>position:absolue; <br>largeur:400px <br>hauteur:130px <br>arrière-plan; :#FF9900; <br>border: 2px solid #FF6600 <br>} <br>/*tire*/ <br>.tire <br>{ <br>z-index:1 /*Identique à ci-dessus, le pneu doit également être placé au-dessus de l'arrière-plan*/ <br>position:absolute <br>bottom:0 <br>border-radius:60px /*circle radius*/ <br>height:120px; *radius=height */ <br>width:120px; /* 2*radius=width */ <br>background:#0099FF; /*fill color*/ <br>border:1px solid #3300FF <br>- o-transform:rotate(0deg); /*rotate( Unité : degré)*/ <br>-ms-transform:rotate(0deg); <br>-webkit-transform:rotate(0deg); -transform:rotate(0deg); <br>} <br>#fronttire <br>{ <br>right:20px /*Réglez la distance entre le pneu droit et le bord à 20*/ <br>} <br>#backtire <br>{ <br>left:20px; / *Réglez la distance entre le pneu gauche et le bord à 20*/ <br>} <br>#grass <br>{ <br>position:absolute; /*L'arrière-plan est positionné de manière absolue dans le conteneur*/ <br>width:100% ; <br>height:130px <br>bottom:0 <br>/*Laissez la couleur d'arrière-plan dégradée linéairement, en bas, représenter le point de départ du dégradé, la première valeur de couleur est la valeur de départ du dégradé, la seconde La valeur de couleur est la valeur terminale*/ <br>background:linear-grdaient(bottom,#33CC00,#66FF22 <br>); background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); <br>background :-moz-linear-gradient(bottom,#33CC00,#66FF22); (en bas,#33CC00,#66FF22); <br>} <br>.hr,.vr <br>{ <br>position : absolue <br>arrière-plan :#3300FF <br>} <br>.hr; <br>{ <br>hauteur:1px; <br>largeur:100%; /*ligne horizontale */ <br>gauche:0 <br>haut:60px <br>} <br>.vr <br>{ <br>largeur : 1px ; <br>hauteur :100 % ; /*ligne verticale*/ <br>gauche :60px <br>haut :0 <br>} <br></style> 🎜><br><br> <br><br>Code JS : <br><br>Introduisez d'abord l'API en ligne : <br><br><br><br><br><br>Copier le code<br><br> </div> code Comme suit :<p><strong><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></ script> <br>Implémenter le code d'animation (assez concis) : </strong><br><br></p> <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode28'));">Copiez le code<u></u></span>Le code est le suivant :</div> <div class="msgborder" id="phpcode29"> <br><script> <br>$(function(){ <br>var rot=0; <br>var prefix=$('.tire').css('-o-transform') ?'-o-transform':($('.tire').css('-ms-transform')?'-ms-transform':($('.tire').css('-moz-transform ')?'-moz-transform':($('.tire').css('-webkit-transform')?'-webkit-transform':'transform'))); <br>var origin={ /*Définir notre point de départ*/ <br>left:-400 <br>}; <br>var animation={ /*L'animation est réalisée par jQuery*/ <br>left:1600 /*Définir la position que nous allons passer à la position finale*/ <br>}; <br>var rotate=function(){ /*Cette méthode sera appelée par la roue qui a tourné*/ <br>rot =2 <br>$('.tire; '). css(prefix,'rotate(' rot 'deg)'); <br>var options={ /*Paramètres à utiliser par jQuery*/ <br>easing:'linear', / *Spécifiez la vitesse, ici c'est juste linéaire, c'est-à-dire une vitesse uniforme*/ <br>durée:10000, /*Spécifiez la durée de l'animation*/ <br>complete:function(){ <br>$('#car') .css(origine) .animate(animation,options); <br>}, <br>étape:rotation <br>} <br>options.complete(); script> <br> <br><br> <br>Explication simple : le préfixe identifie d'abord quelle définition est actuellement utilisée (-o?-moz?-webkit?-ms?), puis définit la position de départ et la position de fin de l'animation. Ensuite, une fonction est définie qui définit l'angle de rotation (cette fonction sera exécutée à chaque étape de l'animation). Ensuite, une animation est définie d’une manière qui aboutit à un appel en auto-boucle infini ! </div>Cet article, à travers un exemple d'animation simple, montre plusieurs façons courantes d'implémenter une animation sous HTML5. <p></p> </div></span> </div></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration:</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent:<a class="dBlack" title="Triez quelques nouvelles fonctionnalités de HTML5 et les attributs communs des compétences du didacticiel Canvas_html5" href="http://m.php.cn/fr/faq/5654.html">Triez quelques nouvelles fonctionnalités de HTML5 et les attributs communs des compétences du didacticiel Canvas_html5</a></span><span>Article suivant:<a class="dBlack" title="Triez quelques nouvelles fonctionnalités de HTML5 et les attributs communs des compétences du didacticiel Canvas_html5" href="http://m.php.cn/fr/faq/5656.html">Triez quelques nouvelles fonctionnalités de HTML5 et les attributs communs des compétences du didacticiel Canvas_html5</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348281.html" title="Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes" class="aBlack">Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348372.html" title="Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)" class="aBlack">Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348373.html" title="Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9" class="aBlack">Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348374.html" title="Expressions régulières et nouveaux éléments HTML5" class="aBlack">Expressions régulières et nouveaux éléments HTML5</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348469.html" title="Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur" class="aBlack">Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!</p></div><div class="footermid"><a href="http://m.php.cn/fr/about/us.html">À propos de nous</a><a href="http://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="http://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>