recherche

Maison >interface Web >Tutoriel H5 >Partage de plusieurs exemples de pages de compétences du didacticiel de conception et de modification HTML5_html5

Partage de plusieurs exemples de pages de compétences du didacticiel de conception et de modification HTML5_html5

WBOY
WBOYoriginal
2016-05-16 15:46:271849parcourir

Pour comprendre et se familiariser avec les nouveaux éléments sémantiques du HTML5, le meilleur moyen est de prendre comme exemple un document HTML classique, puis de l'enrichir de quelques nouveaux nutriments du HTML5. Voici la page que nous souhaitons transformer. La page est très simple et ne contient qu'un seul article.

ApocalypsePage_Original.html, c'est une page au format très standardisé, et tous les styles proviennent de feuilles de style externes.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html lang="zh- CN">  
  3. <tête>  
  4.   <meta charset="utf- 8">  
  5.   <titre>Apocalypse Nowtitre>  
  6.   <lien rel="feuille de style"  href="ApocalypsePage_Original.css">  
  7. tête>  
  8.   
  9. <corps>  
  10. <div class="En-tête" >  
  11.   <h1>Comment le monde pourrait finh1>  
  12.   <p cours="Teaser" > >     <p classe
  13. ="Byline" >par Ray N. Carnationp>   div>
  14.       <div
  15.  class
  16. ="Contenu" >  
  17.   <p><span classe="LeadIn">À l'heure actuellespan>, vous vous sentez probablement plutôt bien. Après tout, la vie dans le monde développé est confortable<span class="style1">—span>probablement plus confortable que ce a été pour l'être humain moyen tout au long de toute l'histoire enregistrée. 🎜>   <p>
    18. Mais ne soyez pas trop satisfait. Il y a encore de nombreuses façons horribles dont tout cela pourrait s'effondrer. Dans ce article, vous découvrirez quelques-uns de nos favoris.
  18. p>           <
    19. h2
  19. >
    20. Apocalypse maya
  20. h2>     <p>
    21. Les sceptiques suggèrent que le calendrier maya se dirige simplement vers une nouvelle ère de 5 126 ans. après 2012, et ne prédit pas réellement une apocalypse mettant fin à une vie. Mais étant donné que les Mayas morts depuis longtemps avaient tort sur pratiquement tout le reste, pourquoi devrions-nous leur faire confiance sur ce point ?
  21. p>            <
    22. h2
  22. >
    23. Prise de contrôle du robot
  23. h2>     <p>
    24. Pas aussi effrayant qu'une prise de contrôle de vampires ou de morts-vivants, une la rébellion des robots est toujours une pensée inquiétante. Nous sommes déjà dépassés en nombre par nos gadgets technologiques, et même Bill Gates craint le jour où son robot esclave japonais le retournera par les chevilles et lui demandera (d'une voix convenablement robotique) "Qui est ton papa maintenant ?"
  24. < /p>           <
    25. h2
  25. >
    26. Singularité inexpliquée
  26. h2>  
  27.   <p>Nous ne savons pas comment l'univers a commencé, donc nous ne peuvent pas assurez-vous que cela ne se terminera pas simplement, peut-être aujourd'hui, et peut-être avec rien de plus excitant qu'une bouffée d'antimatière et un léger bruit pétillant.p >  
  28.      
  29.   <h2>Changement climatique incontrôlable h2>  
  30.   <p>Rejetée par certains, la prophétie de catastrophe d'Al Gore peut encore se réaliser. Si c'est le cas, nous devrons peut-être faire face à des tempêtes vicieuses, à des pénuries alimentaires générées et et des réparateurs de climatisation maussades.p>   
  31.      
  32.   <h2>Épidémie mondialeh2>  
  33.   <p>Dans le futur, un virus mortel pourrait frapper. Les prédictions diffèrent quant à la source de la maladie, mais les candidats incluent des singes dans la jungle africaine, des bioterroristes, des oiseaux et des porcs atteints de la grippe, des guerriers du futur, une race extraterrestre, des hôpitaux qui utilisent trop d'antibiotiques, des vampires, la CIA et non lavé choux de Bruxelles. Quelle que soit la source, c'est clairement une mauvaise nouvelle.p>  
  34.   
  35. div>   
  36.   
  37. <div class="Pied de page" >  
  38.   <p classe="Avis de non-responsabilité" >Ces prédictions apocalyptiques ne reflètent pas les opinions de l'auteur.p>   
  39.   <p>  
  40.     <a href="À propos de nous. html">À propos de nousa>  
  41.     <a href="Avis de non-responsabilité. html">Avis de non-responsabilitéa>  
  42.     <a href="Contactez-nous. html">Contactez-nousa>  
  43.   p>  
  44.   <p>Copyright © 2014 p>  
  45. div>   
  46. corps>  
  47. html>  

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个

将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

Code XML/HTML复制内容到剪贴板
  1. @charset "utf-8"
  2. /*Document CSS*/
  3. corps{
  4. /*font-family Pour utiliser des polices sûres, suivez d'abord le principe spécial puis général,
  5. Donnez d'abord la police que vous souhaitez, puis une police plus sûre,
  6. Se termine enfin par une police sans empattement*/
  7. famille de polices : "Lucida sans Unicode", "Lucida Grande", Genève, sans-serif
  8. max-width : 800px; /*La largeur maximale ne dépasse pas 800 pixels*/
  9. }
  10. /*Style de la zone de titre en haut de la page*/
  11. .En-tête {
  12. background-color : #7695FE ; /*Toute valeur de couleur est acceptable*/
  13. bordure : fine #336699 solide /*attribut de bordure tout-en-un*/
  14. padding : 10px ; /* 10 pixel padding, la distance entre la bordure et le contenu*/
  15. margin : 10px; /* Marge de 10 pixels, la distance entre la bordure et les éléments environnants*/
  16. text-align: center; /*Le texte de l'en-tête est centré*/
  17. }
  18. /*Titre dans l'en-tête<h1>Style*/
  19. .En-tête h1{
  20. marge : 0px ;
  21. couleur : blanc
  22. font-size: xx-large; /*Un contrôle précis peut être effectué en pixels ou en unités em*/
  23. }
  24. /*Style de sous-titre d'en-tête*/
  25. .En-tête .Teaser{
  26. marge : 0px ;
  27. poids de la police : gras
  28. }
  29. /*Style de ligne de signature dans l'en-tête*/
  30. .En-tête .Byline{
  31. style de police : italique
  32. taille de police : petite
  33. marge : 0px ;
  34. }
  35. .Contenu{
  36. taille de police : moyenne
  37. famille de polices : Cambria, Cochin, Géorgie, "Times New Roman", Times, serif
  38. /*Rembourrage maximum gauche et droit*/
  39. rembourrage-haut : 20px
  40. padding-right : 50px ;
  41. rembourrage-bas : 5px ;
  42. padding-gauche : 50px ;
  43. line-height : 120 % ; /*La distance entre deux lignes de texte adjacentes*/
  44. }
  45. .Content .LeadIn{
  46. poids de la police : gras
  47. taille de police : grande
  48. variante de police : petites majuscules ;
  49. }
  50. .Contenu .h2{
  51. couleur : #24486C
  52. marge inférieure : 2px ;
  53. taille de police : moyenne
  54. }
  55. .Contenu p{
  56. marge supérieure : 0px ;
  57. }
  58. .Pied de page{
  59.  alignement du texte : centre ;
  60. taille de police : x-small ;
  61. }
  62. .Pied de page .Avertissement{
  63. style de police : italique
  64. }
  65. .Pied de page p{
  66. marge : 3px ;
  67. }

De cette façon, notre feuille de style a été pliée. Voyons maintenant quel sera le résultat ? Comme indiqué ci-dessous :

Utilisez HTML5 pour construire la page

Toujours un élément incontournable de la conception Web, il s'agit d'un conteneur intuitif et polyvalent qui vous permet d'appliquer des styles à n'importe quel bloc de la page. Mais le problème avec
est qu'il ne reflète aucune information sur la page.

Pour améliorer cette situation avec HTML5, remplacez

par un élément avec une sémantique plus descriptive.

Dans ApocalypsePage_Revised.html, les attributs de classe Header et Footer et

ont été remplacés par
et
. Une partie du code est la suivante :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <en-tête>  
  2.   <h1>Comment le monde pourrait finh1>  
  3.   <p cours="Teaser" > >     <p classe
  4. ="Byline" >par Ray N. Carnationp>   en-tête>  
  5. ...    <pied de page
  6. >  
  7.   <p classe
  8. ="Avis de non-responsabilité" >Ces prédictions apocalyptiques ne reflètent pas les opinions de l'auteur.p>      <p>  
  9.     <a href
  10. ="À propos de nous. html">À propos de nousa>   ...      p
  11. >  
  12.   <p>Copyright © 2014
  13. p>   pied de page>  
  14. 当然，对应的 ApocalypsePage_Revised.css 文件也需要进行修改，将其中的 .Header et .Footer en-tête et pied de page 。如下： Code XML/HTML复制内容到剪贴板
  1. /*Style de la zone de titre en haut de la page*/
  2. en-tête {
  3. background-color : #7695FE ; /*Toute valeur de couleur est acceptable*/
  4. bordure : fine #336699 solide /*attribut de bordure tout-en-un*/
  5. padding : 10px ; /* 10 pixel padding, la distance entre la bordure et le contenu*/
  6. margin : 10px; /* Marge de 10 pixels, la distance entre la bordure et les éléments environnants*/
  7. text-align: center; /*Le texte de l'en-tête est centré*/
  8. }
  9. /*Titre dans l'en-tête<h1>Style*/
  10. en-tête h1{
  11. marge : 0px ;
  12. couleur : blanc
  13. font-size: xx-large; /*Un contrôle précis peut être effectué en pixels ou en unités em*/
  14. }

Enfin, il y a un élément qui doit être utilisé dans le fichier exemple, qui est l'élément

, qui représente un contenu complet et autonome.

L'élément

doit contenir le contenu d'un reportage ou d'un article, y compris le titre, la signature et le corps du texte. Ainsi, la structure après avoir ajouté l'élément

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <article>  
  2.   <en-tête>  
  3.   <h1>Comment le monde pourrait finh1>  
  4.   <p cours="Teaser" > >     <p classe
  5. ="Byline" >par Ray N. Carnationp>     en-tête>  
  6.   <div class
  7. ="Contenu" >     <p><
  8. span classe="LeadIn">À l'heure actuellespan>, vous vous sentez probablement plutôt bien. Après tout, la vie dans le monde développé est confortable<span class="style1">—span>probablement plus confortable que ce a été pour l'être humain moyen tout au long de toute l'histoire enregistrée. 🎜> ...      div>   
  9. article
  10. >   重新设计后，页面结构如下：
  11. 用
    添加插图 很多页面都是包含图片的。但是，插图 (figure) 与图片的概念还不完全一样。插图虽然独立于文本，但是文本中会提到它。 一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的 HTML 记，在正文的第一段和第二段之间的位置，部分代码如下： Code XML/HTML
    12. 复制内容到剪贴板
  1. ...   
  2. <div class="Contenu" >  
  3. <p><span classe="LeadIn">À l'heure actuellespan>, vous êtes ...p>   
  4. <div class="FloatFigure" >  
  5. <img src="crâne_humain. jpg" alt="Crâne humain">  
  6. <p>Serez-vous la dernière personne debout si l'un de ces apocalyptiques   
  7. les scénarios se déroulent ?p>  
  8. div>  
  9. <p>Mais ne soyez pas trop suffisant. Il y a...p>  
  10. ...  


相应的 样式表规则如下：

Code XML/HTML复制内容到剪贴板
  1. .FloatFigure{   
  2.   flotteur : gauche ;   
  3.   marge : 0px 20px 0px 0px ;   
  4. }   
  5. .FloatFigure p{   
  6.   largeur maximale : 300 px ;   
  7.   taille de police : petite ;   
  8.   style de police : italique ;   
  9.   marge inférieure : 5 px ;   
  10. }  


下图展示了这个示例的外观，插图恰好在第一段文本之后，浮动在后面文本的左侧，图题的文本的宽度我们限制住了，让图题显示很充实、很优雅。

HTML5 中提供了一个

元素，图题可以放在
中的
元素里，经过改造，代码如下：

Code XML/HTML复制内容到剪贴板
  1. <figure classe="FloatFigure" >
  2. <img src="crâne_humain. jpg" alt="Crâne humain">
  3. <figcaption>Serez-vous la dernière personne debout si l'un de ces apocalyptiques
  4. des scénarios se déroulent ?figcaption>
  5. figure>


Bien entendu, le sélecteur dans la feuille de style peut être modifié en conséquence.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. .FloatFigure{
  2. flotteur : gauche ;
  3. marge : 0px 20px 0px 0px ;
  4. }
  5. .FloatFigure figcaption{
  6. largeur maximale : 300 px ;
  7. taille de police : petite
  8. style de police : italique
  9. marge inférieure : 5px ;
  10. }


Enfin, l'attribut alt dans l'élément peut être supprimé, car le titre contient une description complète de l'image.

Ajouter une note en utilisant

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：Tutoriel sur l'utilisation de Localstorage dans les compétences du didacticiel HTML5_html5Article suivant：Tutoriel sur l'utilisation de Localstorage dans les compétences du didacticiel HTML5_html5

Articles Liés

Voir plus