J'apprends le HTML5 récemment. Je suis nouveau sur le HTML5 et je me sens un peu mal à l'aise car certaines balises ont changé, en particulier les trois balises div et l'article de section. J'ai vérifié certaines informations et essayé d'utiliser HTML5 et CSS3 pour mettre en page la page Web. J'ai une petite idée. , et ci-dessous se trouve une simple page Web que je viens de présenter pour votre référence. Jetez-y d'abord un coup d'œil et ayez au moins une idée de la structure de html5.

div

Spécification HTML : "L'élément div n'a aucune signification particulière

Cette balise est celle que nous voyons et utilisons." la plupart d'une étiquette. Il n'a pas de sémantique en soi et est utilisé comme point d'ancrage pour la mise en page, le style ou la création de scripts.

section
Spécification HTML : « L'élément section représente une section générique d'un document ou d'une application. Une section, dans ce contexte, est un regroupement thématique de contenu, généralement avec un. titre."

Contrairement à la sémantique de div, en termes simples, section est un div avec une sémantique, mais ne pensez pas que ce soit vraiment aussi simple. Une section représente un élément de contenu d'actualité, généralement avec un titre. En voyant cela, nous pouvons penser qu'un article de blog ou un commentaire séparé peut simplement utiliser une section ? Continuez à lire :

« Les auteurs sont encouragés à utiliser l'élément article au lieu de l'élément section lorsqu'il serait logique de syndiquer le contenu de l'élément. Le cas échéant, l'article doit être utilisé pour remplacer la section. »

Alors, quand faut-il utiliser la section ? Ensuite, regardez :

« Des exemples de sections seraient les chapitres, les différentes pages à onglets dans une boîte de dialogue à onglets, ou les sections numérotées d'une thèse. La page d'accueil d'un site Web pourrait être divisée en sections pour une introduction, des actualités et des informations de contact. La page d'accueil d'un site Web peut être divisée en sections telles que l'introduction, les actualités et les coordonnées. En fait, je suis très intéressé par les informations véhiculées ici, car je pense que la section et l'article présentés ci-dessous sont plus adaptés aux applications modulaires. Ce sujet sera abordé dans un article spécial à l'avenir, je le passerai donc ici. pour l'instant.

Notez que le W3C met également en garde :

« L'élément section n'est pas un élément conteneur générique. Lorsqu'un élément est nécessaire à des fins de style ou pour faciliter la création de scripts, les auteurs sont encouragés à l'utiliser. l'élément div à la place. Une règle générale est que l'élément section n'est approprié que si le contenu de l'élément est répertorié explicitement dans le plan du document. "

section est plus qu'une simple balise de conteneur ordinaire. Lorsqu'une balise est uniquement destinée au style ou à faciliter la création de scripts, div doit être utilisé. De manière générale, une section est appropriée lorsque le contenu de l'élément apparaît explicitement dans le plan du document.


article

Spécification HTML : « L'élément article représente une composition autonome dans un document, une page, une application ou un site et qui est, en principe, distribuable ou réutilisable indépendamment. , par exemple dans la syndication. »
article est une balise de section spéciale, qui a une sémantique plus claire que la section, et représente un bloc indépendant et complet de contenu associé. Généralement, un article aura une section de titre (généralement contenue dans l’en-tête) et parfois un pied de page. Bien qu’une section soit également un contenu thématique, l’article lui-même est indépendant et complet en termes de structure et de contenu.
La spécification HTML répertorie ensuite certains scénarios applicables pour l'article. "Il peut s'agir d'un message de forum, d'un article de magazine ou de journal, d'une entrée de blog, d'un commentaire soumis par un utilisateur, d'un widget ou d'un gadget interactif, ou de tout autre élément de contenu indépendant

Lorsque l'article est intégré dans." article En principe, le contenu de l'article intérieur est lié au contenu de l'article extérieur. Par exemple, dans un article de blog, l'article contenant les commentaires soumis par l'utilisateur doit être masqué dans l'article de blog contenant.

La question est de savoir ce qui compte comme « contenu indépendant complet » ? L'un des moyens les plus simples de le savoir est de voir si le contenu est complet dans le flux RSS. Vérifiez si le contenu est complet et indépendant sans son contexte.

Exemple :

Page html :





Copier le code

Le code est tel suit :

Page Web HTML5 CSS3

La douleur elle-même est importante, le coaching elitVivamus sera poursuivi et il a été ciblé. Mécène déteste ce ferment. Le cours s'adresse aux commanditaires qui se tournent vers les rivages à travers nos mariages, à travers les projets hyméniens. Fusce sagittis porta mauris, il est important de mettre de la peur dans les flèches des forces de l'ordre. Mais les membres du personnel médical ont besoin d’un soulagement de la douleur. Jusqu'au temps du pulvinar. Mais c'est une mauvaise idée, et cela a été dit. J'ai peur du bateau, c'est important d'être enceinte, c'est un gros verre. Nous vivons et maintenant nous parlons. Le client est très important, le client sera suivi par le client. Chez quelqu'un juste un petit peu. Les membres des ultricies sont responsables des résultats. Sauce au jasmin mon eros. La maison sera suivie de véhicules immobiliers. Il faisait froid ou masse.

Une démonstration des éléments de la liste

• 
  
• 
  
• 
  
• 
  
• 
  

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   

<à part>

< De telle sorte que l'auteur Le Bureau est toujours aussi complet. Aigue interdum vulputée énéenne, sed dapibus mi ultricies convallis. Discutez à partir de maintenant et décorez-le si vous ne le faites pas. Investir toujours la couche. demain eu nibh lorem Mais il est important de se soucier de la vie du personnel médical et de la détester. Ce n'est pas un homme riche et il est très facile à comprendre. Mécène veut que le football soit amusant et non ciblé. C'est complètement doux, c'est pour ça que c'est flatteur. Chacun est censé prendre soin de la propriété. La vie des enfants du chagrin des enfants. Le client est très important, le client sera suivi par le client. Mais le déroulement de la campagne sera la vallée de l'Ullamcorper. Jusqu'à ce que la vie soit grande, il n'y a pas de piscine, ni même de jardin. En cas de morbidité, il est important de s'occuper de l'ulcère, et non de la fièvre elle-même, ni du parcours du lit. Jusqu'à ce qu'il ne se lance même plus dans la salade. Si ce n'est pas moche, qui va faire carrière dans la vie maintenant.

&copie; Copyright Dave Woods 2009

page css :

copier le code

@charset "utf-8";
/* Document CSS */
#container{
largeur : 840px ;
marge : 20px auto ;
arrière-plan :#fff ;
rembourrage : 30 px ;
débordement : caché ;
}
/*------------------- en-tête -*/
#main-navigation {
border-bottom:5px solide #666 ;
}
#main-navigation ul{
overflow:hidden;
largeur : 100 % ;
list-style:aucun;
taille de police : 1,6 em ;
}
#main-navigation li{
float:left;
}
#main-navigation li a{
background:#999;
marge : 0 5px 0 0 ;
rembourrage : 5px 30px ;
affichage:bloc;
couleur :#fff;
text-decoration:aucun;
}
#main-navigation li.current a{
background:#666;
}
#main-navigation li a:hover{
background:#777;
}
/*-------------------------- article -------------- ----------*/
article{
largeur : 100 % ;
débordement : caché ;
}
section{
float:left;
largeur : 500 px ;
}
/*-------------------------- article -------------- ----------*/
à part{
float:right;
largeur : 310 px ;
}
/*---------------- article ---------- ----------*/
pied de page{
width:840px;
marge : 20px automatique ;
taille de police : 1,4 em ;
text-align:center;
}

总结：
article de la section div ，仅仅用作样式化或者Section de crochet (crochet), section de crochet, section de crochet, section de crochet Il s'agit d'un article similaire à celui de l'article.的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav et 的使用也是如此，这两个标签也是特殊的 section，在使用 nav et de côté 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了因为其实说Section 起来，article 才是一个完整的整体。

最后附上我的首个html5页面源码：http://xiazai.jb51.net/201308/yuanma/demoh5_jb51.net.ra r