Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML.
Ci-dessus: Langue de balisage - Formulaires
Source originale Chapitre 6 <strong>, <em> et autres éléments de phrase
Dans l'introduction et les chapitres précédents, le concept de balises sémantiques a été légèrement mentionné, en utilisant des balises pour identifier la signification des fichiers au lieu de simplement définir l'effet d'affichage avec des balises. La conception d'une page Web qui utilise complètement les balises sémantiques est une bonne idée. Cependant, je pense que cet objectif est trop idéal. Bien sûr, ne pas atteindre complètement l'objectif ne signifie pas que le processus d'effort est sans valeur. Au moins, il est utile de travailler vers cet objectif.
En réalité, il est souvent nécessaire d'ajouter des étiquettes non sémantiques pour atteindre des objectifs de conception spécifiques, principalement parce que les navigateurs célèbres aujourd'hui ne peuvent pas soutenir les normes de 100%. Certaines règles CSS ne peuvent pas afficher l'effet correct dans certains navigateurs, et malheureusement, nous devons utiliser des balises supplémentaires en train d'atteindre certains objectifs de conception.
Il y a un concept important qui doit être pris au sérieux: c'est-à-dire essayer d'écrire des structures sémantiques autant que possible apportera des avantages pratiques. Dans le même temps, bien que le support des normes n'ait pas atteint à 100%, il a traversé le point critique afin que nous puissions désormais écrire des pages Web en utilisant des méthodes qui répondent aux normes du réseau. Parfois, nous devons faire des sacrifices, mais plus il y a d'étiquettes conformes aux normes, plus elle sera facile pour l'avenir. Effet d'affichage par rapport aux étiquettes de structure
Ce chapitre discutera de la différence entre les effets d'affichage et les étiquettes structurelles, ou plutôt les différences entre l'utilisation de <strong> remplacement <b> et l'utilisation de <em> remplacement <i>. Plus loin dans ce chapitre, nous discuterons également de plusieurs autres éléments de phrase et leur importance dans la grammaire d'étiquette structurée conforme standard et structurée.
Vous avez peut-être entendu dire que certaines personnes suggèrent d'utiliser <strong> remplacement <b> lorsqu'ils ont besoin de texte gras, mais ils ne vous disent pas davantage pourquoi un tel remplacement est nécessaire. Sans savoir pourquoi , il est vraiment difficile de s'attendre à ce que d'autres concepteurs Web changent leurs habitudes d'utilisation des étiquettes simplement parce qu'ils en ont entendu parler. Pourquoi <strong> est-il meilleur que <b> <i>?
Quels sont les avantages de retirer les balises <b> et <i> et de les remplacer par <strong> et <em>? En fait, tout cela est d'exprimer la sémantique et la structure , pas seulement pour montrer l'effet . Tous les exemples de ce livre s'efforcent également de suivre ce concept. Voyez ce que disent les experts
Tout d'abord, examinons comment W3C décrit <strong> et <em> dans la spécification de l'élément de phrase HTML4.01 (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):
Les éléments de phrase peuvent ajouter des informations structurelles aux fragments de texte. Les éléments de phrase commun ont la signification suivante:
<em> représentant stressé <strong> représente un accent plus fortNous discutons donc ici de deux degrés différents de l'accent. Par exemple, c'est un seul mot ou une phrase. Lorsqu'il est prononcé, il doit être plus fort, avec un ton plus élevé, plus rapide prononcé, ou ... eh bien, il est plus souligné que le contenu du texte général.
W3C décrit ensuite le paragraphe suivant:
L'effet d'affichage des éléments de la phrase varie avec le navigateur. D'une manière générale, le navigateur visuel doit afficher le contenu texte en italique et le contenu texte en gras. Le logiciel de synthèse vocale peut modifier les paramètres de synthèse avec le contenu, tels que le volume, la tonalité et la vitesse, etc.
Ahh! La dernière phrase est particulièrement intéressante. Le logiciel de synthèse de la parole (nous l'appelions un lecteur d'écran) gérera correctement le texte qui doit être souligné, ce qui est en effet une bonne chose.
En revanche, <b> ou <i> ne sont que de simples balises d'effet d'affichage. Si notre objectif est de séparer la structure de l'effet d'affichage, l'utilisation <strong> et <em> est le bon choix. Je veux juste afficher du texte audacieux et italique avec CSS. D'autres exemples seront discutés plus loin dans ce chapitre.
Ensuite, regardez deux exemples d'identification pour nous aider à comprendre leurs différences. Méthode A
Votre numéro de commande pour référence future est: <b> 6474-82071 </b> .Method B
Votre numéro de commande pour une référence future est: <strong> 6474-82071 </strong> .Rough and Beautiful
Cette situation est un exemple parfait d'utiliser <strong> plus que <b>. Nous avons l'intention de rendre le texte spécifique de la phrase plus important. En plus d'afficher les numéros de commande en gras, nous espérons également que les lecteurs d'écran modifieront également la façon dont ils expriment ce contenu: augmenter le volume, changer la tonalité ou la vitesse. La méthode B peut atteindre les deux objectifs en même temps. Alors quoi?
De même, le remplacement de <em> par <i> peut exprimer une importance en même temps, plutôt que d'afficher simplement le contenu texte en italique. Jetons un coup d'œil à ces deux exemples: Méthode A
Il ne m'a pas fallu non pas, mais <i> trois </i> heures pour pelleter mon allée ce matin.method b
Cela ne m'a pas fallu non plus, mais <em> trois </em> heures pour pelleter mon allée ce matin.
Dans l'exemple précédent (la situation réelle lorsque ce livre a été écrit), mon but était de faire en sorte que le mot trois exprime dans un ton accent, tout comme j'ai lu ce mot fort, visuellement, la méthode B sera affichée en italique dans la plupart des navigateurs, et le lecteur d'écran ajustera le ton, la vitesse ou le volume de manière appropriée. Tant qu'il est audacieux ou en italique, c'est bien
Il convient de noter que dans de nombreux cas, seul l'effet texte des gras et de l'italique est nécessaire pour afficher visuellement. En d'autres termes, supposons que vous ayez une liste de liens dans la barre latérale, et que vous aimez laisser tous les liens s'afficher avec le même effet: c'est-à-dire audacieux (figure 6-1)
Figure 6-1. Exemple de liaisons en gras placées dans la barre latérale
En plus des fonctionnalités visuelles, nous n'avons pas l'intention de mettre l'accent sur le contenu des liens. C'est un bon endroit pour modifier l'apparence des liens avec le CSS, afin qu'ils ne soient pas particulièrement soulignés par les lecteurs d'écran et autres navigateurs non visuels.
Par exemple, voulez-vous vraiment que le lien audacieux soit lus plus rapidement, plus fort et plus élevé? Probablement pas, le gras ici est juste l'effet d'affichage. Le poids de police équivaut à audacieux
Afin d'atteindre l'effet d'affichage de la figure 6-1, supposons que la barre de liaison est placée dans <div> avec des identifiants définis sur la barre latérale, afin que nous puissions utiliser CSS pour spécifier que les liens dans #idebar doivent être affichés en gras:
#sidebar a {
Police-poids: Bold;
}
Extrêmement simple, je pense que c'est un peu ridicule quand je le mentionne, mais c'est en effet un bon moyen d'aider à séparer la structure et les effets d'affichage. C'est audacieux!
De même, vous pouvez appliquer des idées similaires lorsque vous réfléchissez au texte italique. Lorsque vous ne voulez pas souligner le contenu et que vous souhaitez simplement afficher le texte en italique, vous pouvez utiliser l'attribut de style police pour gérer ces situations via CSS.
Utilisons le même #idebar comme exemple. Par exemple, si vous souhaitez que tous les liens de #sidebar soient affichés en italique, vous pouvez écrire ceci:
#sidebar a {
Style de police: italique;
}
C'est un autre concept simple, mais dans le domaine de la grammaire de marquage structurée, je pense qu'il est très important de discuter de ces situations - en utilisant CSS pour traiter la vidéosurveillance au lieu d'afficher des étiquettes d'effet. Parfois, la solution la plus simple est également la plus facile à ignorer. Partagez audacieux et en italique
Lorsque je prévois d'afficher le contenu texte en gras et en italique en même temps, je pense que je dois d'abord réfléchir à une question, quel degré d'accent prévoyez-vous de transmettre? Sur la base de la réponse à cette question, je choisirai l'étiquette appropriée: <em> (mettant l'accent) ou <plus fort accent), puis marquer le texte avec l'étiquette sélectionnée.
Par exemple, comme pour l'exemple suivant, j'avais initialement prévu de laisser le plaisir être affiché en gras et en italique en même temps, mais à la fin, j'ai choisi d'utiliser <em> pour souligner ce mot.
Les sites de construction avec des normes Web peuvent être <em> amusants </em>!
La plupart des navigateurs ne présenteront ce mot qu'en italique. Pour utiliser à la fois en gras et en italique, nous avons plusieurs options. Oh, j'espère vraiment que vous êtes d'accord avec la phrase ci-dessus. <span ordinaire>
Une méthode consiste à utiliser un package <span> normal en dehors du plaisir et à spécifier la règle CSS pour afficher toutes les <span> en gras. La syntaxe de balise ressemble à ceci:
Les sites de construction avec des normes Web peuvent être <em> <pan> amusants </span> </em>!
Et CSS ressemble à ceci:
Em Span {
Police-poids: Bold;
}
La partie sémantique évidente n'est pas bonne car nous avons ajouté des balises supplémentaires, mais cette méthode est toujours utile pour tout le monde. Souligner avec la classe
Une autre méthode consiste à spécifier une classe pour la balise <em> et à ajouter un effet gras dans CSS. La syntaxe de balise ressemble à ceci:
Les sites de construction avec des normes Web peuvent être <em class = bold> fun </em>!
Et CSS ressemble à ceci:
em.bold {
Police-poids: Bold;
}
L'utilisation de <em> peut réaliser l'effet italique (bien que sémantiquement souligne le contenu texte), et l'ajout d'une classe audacieuse fera apparaître le texte à l'intérieur <em> en gras.
Des méthodes similaires peuvent également être utilisées pour modifier <strong>. Pour le moment, lorsque nous soulignons un certain paragraphe, nous pouvons concevoir la classe italique avec un effet italique, puis faire correspondre l'effet en gras d'origine.
La langue de balisage ressemble à ceci:
Les sites de construction avec des normes Web peuvent être <Strong Class = Italic> Fun </strong>!
Et CSS est comme ceci:
Strong.Italic {
Style de police: italique;
}
Page précédente 2 3 3 4 5 Page suivante Lire le texte intégral