简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

Explication détaillée des compétences du didacticiel _html5 de l'application HTML5 CSS3

WBOY
Libérer： 2016-05-16 15:48:21
original
1439 Les gens l'ont consulté

Les concepteurs Web peuvent réaliser des choses intéressantes en utilisant HTML4 et CSS2.1. Nous pouvons compléter la structure logique des documents et créer des sites Web riches en contenu sans utiliser l'ancienne disposition basée sur des tableaux. Nous pouvons ajouter un style magnifique et subtil à notre site Web sans utiliser les balises En fait, nos capacités de conception actuelles nous ont éloignés de cette terrible ère de guerres de navigateurs, de protocoles propriétaires et de ces pages Web laides pleines de scintillements, de défilements et de flashs.

Bien que nous utilisions désormais couramment HTML4 et CSS2.1, nous pouvons faire mieux ! Nous pouvons restructurer notre code et rendre le code de notre page plus sémantique. Nous pouvons réduire la quantité de code de style qui donne aux pages une belle apparence et les rendre plus évolutives. Maintenant, HTML5 et CSS3 attendent avec impatience tout le monde. Voyons s'ils peuvent vraiment amener notre design au niveau supérieur...

.

Dans le passé, les concepteurs utilisaient souvent des mises en page basées sur des tableaux sans aucune sémantique. Mais en fin de compte, grâce à des innovateurs comme Jeffrey Zeldman et Eric Meyer, les concepteurs intelligents ont lentement accepté la disposition

relativement plus sémantique au lieu de la disposition en tableau et ont commencé à appeler des feuilles de style externes. Mais malheureusement, une conception Web complexe nécessite de nombreux codes de structure de balises différents, nous appelons cela le syndrome "
-soup". Peut-être connaissez-vous le code suivant :


Copier le codeLe code est le suivant :


Démonstration de soupe Div





Texte Lorem ipsum bla bla bla.

Texte Lorem ipsum bla bla bla.


Texte Lorem ipsum bla bla bla.


Balises : HMTL, code, démo


class=" de côté">

Informations tangentielle

content"> ;

Texte Lorem ipsum bla bla bla.


Texte Lorem ipsum bla bla bla.


Lorem texte ipsum bla bla bla.












Bien que ce soit un peu réticent, l'exemple ci-dessus peut quand même illustrer que l'utilisation de HTML4 pour coder une conception complexe est encore trop lourde (en fait, xHTML1.1 n'est rien de plus). Mais ce qui est passionnant, c'est que HTML5 résout le syndrome "
-soupe" et nous offre un nouvel ensemble d'éléments structurels. Ces nouveaux éléments HTML5 ont une sémantique plus détaillée pour remplacer ces balises
dénuées de sens, et fournissent en même temps des hooks CSS « ​​naturels » pour les appels CSS.

Ce qui suit est un exemple de solution HTML5 :


Copier le code

Le code est le suivant :





Démonstration de soupe Div


Publié le 11 juillet 2009

Texte Lorem ipsum bla bla bla.


Texte Lorem ipsum bla bla bla.


Texte Lorem ipsum bla bla bla.




Balises : HMTL, code, démo




<à part>

Informations tangentielle

Texte Lorem ipsum bla bla bla.


Texte Lorem ipsum bla bla bla.


Texte Lorem ipsum bla bla bla.




Balises : HMTL, code, démo






& lt;div>标签， Il s'agit d'un CSS3 qui utilise un identifiant de classe et un identifiant CSS3.所有class和id 的。

跟class属性说再见，欢迎整洁的标签　　

     的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

L'identifiant de classe et l'identifiant de la classe DIV sont associés à un CSS : div #actualités    {}


复制代码代码如下 :
div.section {}
div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}


我们再来看看基于HTML5的实例 : section {}


复制代码代码如下 :
article {}
en-tête {}
pied de page {}
à part {}


C'est un progrès, mais il reste encore certains problèmes à résoudre. Dans l'instance
, nous devons appeler l'élément dans la page via l'attribut class ou id. Cette logique nous permettra d'appliquer des styles à n'importe quel élément du document, que ce soit dans son ensemble ou individuellement. Par exemple, dans l'exemple
, les éléments .section et .content sont facilement positionnés. Mais dans l’exemple HTML5, il y aura de nombreux éléments de section dans le document lui-même. En fait, nous pourrions ajouter des sélecteurs d'attributs spécifiques pour appeler ces différents éléments de section, mais heureusement, je n'ai pas quelques sélecteurs CSS avancés pour cibler différents éléments de section maintenant.

N'utilisez pas de classe et d'identifiant pour localiser les éléments HTML-5

Voyons maintenant comment localiser une instance d'un élément de page HTML5 sans utiliser de classe et d'identifiant. Nous pouvons utiliser trois sélecteurs CSS pour localiser et identifier les éléments dans l'instance. Comme suit :

Sélecteur descendant : [CSS 2.1] : EF
Sélecteur frère : [CSS 2.1] : E F
Sélecteur enfant : [CSS 2.1] : E >

Voyons comment positionner les éléments de section dans le document sans utiliser de classe et d'identifiant :

Localisez l'élément

Étant donné que notre exemple n'est pas un ensemble complet de code HTML5, nous supposons qu'il y a un élément

Étiquettes associées：
css3 html5
source：php.cn
Article précédent：Exemple d'apprentissage détaillé des sockets Web HTML5 pour la communication en duplex intégral_compétences du didacticiel HTML5 Article suivant：HTML5 implémente les compétences du didacticiel WeChat masturbation game_html5
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！