Page Web sémantique xhtml Tags sémantiques

Un autre aspect important de la séparation de la structure et de la représentation est l'utilisation du balisage sémantique pour construire un contenu de document. L'existence d'un élément XHTML signifie que la partie du contenu tagué a un sens structuré correspondant, et il n'y a aucune raison d'utiliser d'autres balises. En d'autres termes, ne laissez pas CSS faire un élément HTML ressembler à un autre élément HTML, comme l'utilisation de <v> au lieu du titre de balise <p>.

Tout d'abord, il s'agit de la différence entre la sémantique et les styles par défaut. Le style par défaut est l'expression de certaines balises couramment utilisées définies par le navigateur. Je pense personnellement que son objectif principal est de laisser tout le monde comprendre intuitivement les utilisations et les fonctions des balises et des attributs. Il est évident que la série HX ressemble beaucoup au titre car elle a des tailles de police audacieuses et plus grandes. <strong>, <em> est utilisé pour le distinguer des autres mots et joue un rôle d'accent. Quant à la liste et à la table, il est évident de vous dire ce qu'ils font.

Deuxièmement, la chose la plus importante à propos des pages Web sémantiques est qu'elles sont amicales avec les moteurs de recherche. Avec une bonne structure et une bonne sémantique, le contenu de votre page Web est naturellement facile à ramper par les moteurs de recherche, et la promotion de votre site Web peut économiser beaucoup d'efforts.

La sémantique et les utilisations spécifiques ont été expliquées dans la référence de balise XHTML1.0. Certaines balises et attributs faciles à oublier ou à confondre seront complétés ici.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, sont utilisés comme titres et sont réduits selon l'importance. <h1> est le plus haut niveau.

Par exemple:

Code:

<div class = title> title du document </div>, ou <span class = title> title du document </span>. Il est évident que les moteurs de recherche ne le considéreront pas comme un titre pour ce dernier.

Les paragraphes marquent, sachant <p> comme des paragraphes, vous n'utiliserez plus <br/> pour briser les lignes, et vous n'avez pas besoin de faire la distinction entre les paragraphes et les paragraphes. Le texte dans <p> </p> enveloppera automatiquement, et l'effet de l'emballage est meilleur que <br>. Les lacunes entre les paragraphes peuvent également être contrôlées à l'aide de CSS, ce qui facilite la distinction des paragraphes des paragraphes. Il serait parfait si vous pouvez facilement définir l'espacement des voyages, puis définir les effets d'amortissement du premier caractères en utilisant la hauteur de ligne.

Par exemple: copier le contenu dans le presse-papiers

Code:

</p>

<p> Depuis de nombreuses années, le contenu de Blue Ideal a été enrichi en continu et a été mis en évidence par certains sites Web domestiques bien connus et médias traditionnels. Il a été collecté par des sites de recherche majeurs tels que Google, Baidu, Yahoo, Sohu, Sina et Excite. Il s'est classé premier dans la recherche de la conception et du développement de sites Web de mots clés chinois simplifiés parmi les trois principaux moteurs de recherche de Google, Baidu et Yahoo. Maintenant, Blue Ideal est devenu l'un des sites Web professionnels les plus influents dans la conception et le développement de sites Web en Chine. </p> <ul>, <l>, <li>

<ul> Les listes non ordonnées sont très courantes et sont largement utilisées. Les listes non ordonnées <OL> sont également très couramment utilisées. Pendant le processus de normalisation Web, <ul> est également utilisé davantage pour les barres de navigation. À l'origine, les barres de navigation sont une liste, ce qui est complètement correct pour le faire. Lorsque votre navigateur ne prend pas en charge CSS, le lien de navigation est toujours très bon, mais il est un peu moins beau.

Par exemple: copier le contenu dans le presse-papiers

Code:

<li> Projet 1 </li>

<li> Projet 2 </li>

<li> Projet 3 </li>

</ul> Copiez du contenu dans le presse-papiers

Code:

<li> Chapitre 1 </li>

<li> Chapitre 2 </li>

<li> Chapitre 3 </li>

</l> <dl>, <dt>, <dd>

DL est la liste de définition. Par exemple, l'explication et la définition des mots dans le dictionnaire peuvent être utilisées dans cette liste.

Par exemple: copier le contenu dans le presse-papiers

Code:

<dt> chien </dt>

<dd> un mammifère carnivore de la famille Canidae. </dd>

</dl> Copier le contenu dans le presse-papiers

Code:

<DT> Shanghai Beach </dt>

<DD> Ce "Shanghai Bund", filmé en 1980, est le drame le plus réussi et le plus classique de l'histoire de Hong Kong TV.

Après avoir été diffusé à Hong Kong cette année-là, cela a provoqué une énorme sensation. </dd>

<dt> chow yun-gratin </dt>

<DD> Comme toutes les grandes stars du cinéma, Chow Yun-Fat a confirmé une époque, un âge d'or des films de Hong Kong.

Les couches de vent, les lunettes de soleil, les pistolets doubles à sang froid et les sourires ensoleillés sont tous scellés dans le film. Lorsque nous regardons en arrière, Fa GE a été gravé comme les coordonnées d'une époque. </dd>

</dl> <cite>, citer, <q>, <blockquote>

Les forums et les blogs utilisent souvent des citations d'autres, en utilisant <q> pour marquer de courtes citations à une seule ligne. Le navigateur Web reconnaîtra automatiquement le contenu entre <q>. Malheureusement, IE ne peut pas reconnaître et parfois <q> peut causer des problèmes d'accessibilité. Pour cette raison, certaines personnes recommandent de ne pas utiliser <q> et d'insérer manuellement des marques de référence. Ajoutez une seule ligne de contenu de référence à un <span> contenant la classe appropriée, alors vous pouvez utiliser CSS pour styliser la référence, mais cela n'a pas de sens sémantique. Vous pouvez lire les vues de la balise Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) lors de la manipulation <q> des questions connexes écrites par Mark Pilgrim.

Pour de longues citations d'un ou plusieurs paragraphes, <blockquote> doit être utilisé. CSS peut être utilisé pour définir le style de référence. Notez qu'un article ne peut pas être placé directement dans <lockquote> et que le contenu cité doit également être inclus dans un élément, généralement <p>. L'attribut cite peut être utilisé avec <q> ou <lockquote> pour fournir l'adresse source du contenu référencé. Il convient de noter que si vous utilisez <span> au lieu du contenu de référence de balise, vous ne pouvez pas utiliser l'attribut cite.

Par exemple: copier le contenu dans le presse-papiers

Code:

Code:

Code:

struct / text.html # h-9.2.1> La présentation des éléments de phrase

Copier le contenu dans le presse-papiers

Code:

<p> La plupart d'entre nous ont une expérience profonde. Chaque fois que la version du navigateur grand public est mise à niveau, le site Web que nous venons de construire peut devenir obsolète.

Nous devons mettre à niveau ou reconstruire le site Web. Par exemple, la guerre typique du navigateur de 1996 à 1999,

Pour être compatible avec NetScape et IE, le site Web a dû écrire du code différent pour ces deux navigateurs. De la même manière,

Chaque fois que la nouvelle technologie de réseau et les appareils interactifs émergent, nous devons également faire une nouvelle version pour prendre en charge cette nouvelle technologie ou ce nouvel appareil.

Par exemple, la technologie WAP qui prend en charge l'accès à Internet mobile. Il y a d'innombrables questions similaires: le code du site Web est gonflé et compliqué, ce qui gaspille une grande partie de notre bande passante;

Les effets spéciaux du DHTML pour un certain navigateur bloquent certains clients potentiels; Les codes difficiles à utiliser, les personnes handicapées ne peuvent pas parcourir les sites Web, etc.

C'est un cercle vicieux et un énorme déchet. </p>

</lockquote> <em>, <strong>

<em> est utilisé pour l'accent, <strong> est utilisé pour l'accent. La plupart des navigateurs utilisent l'italique pour afficher le contenu et les gras surlignés pour afficher le contenu en surbrillance. Cependant, ce n'est pas nécessaire. S'il s'agit de déterminer comment l'accent est affiché, la meilleure façon est d'utiliser CSS pour définir leurs performances. N'utilisez pas l'accent lorsque tout ce que vous voulez, ce sont des effets visuels. Et si vous voulez souligner mais que vous sentez toujours que audacieux ou en italique ne sont pas si bons dans l'effet visuel, en particulier l'italique pour le chinois, vous pouvez complètement définir d'autres styles plus accrocheurs pour obtenir l'effet de l'accent.

Par exemple: copier le contenu dans le presse-papiers

Code:

Cependant, les textes avec un accent particulier sont généralement indiqués en gras. </p> <s table>, <td>, <h>, <genture>, résumé

Les tableaux de XHTML ne doivent pas être disposés. Cependant, s'il s'agit de marquer les données de la liste, un tableau doit être utilisé. <th> est le titre du tableau, le résumé d'attribut est le résumé, la balise <légende> est la description de l'en-tête, la balise <thead> est l'en-tête, la balise <tbody> est le contenu principal de la table, et la balise <tfoot> est la fin de la table.

Il peut également être utilisé pour remplacer l'attribut des en-têtes et marquer les cellules contenant des informations d'en-tête, où le contenu de chaque valeur est le suivant:

La ligne indique la cellule actuelle, fournissant des informations d'en-tête pertinentes pour les lignes contenant la cellule actuelle.

COL indique la cellule actuelle, fournissant des informations d'en-tête correspondantes pour les colonnes spécifiées en fonction de la cellule actuelle.

Rowgroup indique la cellule actuelle, fournissant des informations d'en-tête pertinentes pour les groupes de lignes restants contenant la cellule actuelle.

Colgroup indique la cellule actuelle, fournissant des informations d'en-tête correspondantes pour les groupes de colonnes restants spécifiés sur la base de la cellule actuelle.

ABBR est utilisé pour définir le nom d'abréviation dans la cellule d'en-tête. Si cette propriété n'est pas définie, le contenu cellulaire par défaut est omis.

Par exemple: copier le contenu dans le presse-papiers

Code:

<Dens> Tableau 1: Power Mac G5 Tech Spécifications </pention>

<tr>

<th Scope = Col abbr = Configurations Class = Nobg> Configurations </th>

<th Scope = Col ABBR = Dual 1.8> Dual 1,8 GHz </ Th>

<th Scope = Col ABBR = Dual 2> Dual 2 GHz </ Th>

<th Scope = COL ABBR = DUAL 2,5> DUAL 2,5 GHz </ Th>

</tr>

<tr>

<th scope = row abbr = modèle class = spec> modèle </th>

<TD> M9454LL / A </TD>

<TD> M9455LL / A </TD>

<TD> M9457LL / A </TD>

</tr>

<tr>

<th scope = row abbr = g5 processeur class = Specalt> g5 processeur </th>

<td class = alt> double 1,8 GHz powerpc g5 </td>

<td class = alt> double 2GHz Powerpc G5 </td>

<td class = alt> double 2,5 GHz powerpc g5 </td>

</tr>

<tr>

<th scope = row abbr = frontside bus class = spec> frontside bus </th>

<TD> 900 MHz par processeur </td>

<TD> 1 GHz par processeur </td>

<TD> 1,25 GHz par processeur </td>

</tr>

<tr>

<th scope = row abbr = l2 cache class = specalt> niveau2 cache </th>

<td class = alt> 512k par processeur </td>

<td class = alt> 512k par processeur </td>

<td class = alt> 512k par processeur </td>

</tr>

</ table> Affichage de l'effet: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

Code:

Si vous connaissez Del, n'utilisez plus <s> comme un strikethrough. L'utilisation de Del est évidemment plus sémantique. De plus, le Del est également livré avec CITE et DateTime pour indiquer la raison de la suppression et le temps de la suppression. Ins signifie insertion, et il y a de tels attributs.

Par exemple: copier le contenu dans le presse-papiers

Code:

Cela signifie le code informatique. Le style par défaut est la police. Il est souvent rencontré dans les forums techniques et les blogs.

Par exemple: copier le contenu dans le presse-papiers

Code:

La balise <bbr> représente l'abréviation sur la page Web, et la balise <cronym> est une abréviation. (Remarque: ici, nous séparons l'abréviation et l'abréviation.

Écrivez avec <cronym> tag) Les navigateurs sous Windows IE6.0 ne prennent pas en charge les balises <bbr>. Dans IE, vous pouvez appliquer CSS à <CreronyM> mais pas aux balises <BBR>.

IE affichera une invite pour l'attribut de titre de la balise <cronym>, mais ignorera la balise <bbr>.

Voir: http://www.w3cn.org/article/translate/2005/115.html

Par exemple: copier le contenu dans le presse-papiers

Code:

Code:

L'attribut de titre est utilisé pour fournir des instructions supplémentaires pour les éléments que les attributs de titre peuvent être utilisés sur toutes les balises, sauf la base, la basefont, la tête, le html, la méta, le param, le script et le titre. Mais ce n'est pas nécessaire.

La propriété ALT est un agent utilisateur (UA) qui ne peut pas afficher des images, des formulaires ou des applets et spécifie le texte de remplacement. La langue du texte de remplacement est spécifiée par l'attribut Lang. Copier le contenu dans le presse-papiers

Code:

Code:

Style par défaut:

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/tr/css21/sample.html

Sémantique:

http://www.456bereastreet.com/lab/developing_with_web_standards/zh

http://www.456bereastreet.com/lab/developing_with_web_standards

http://www.w3cn.org/article/translate/2005/114.html

http://www.w3cn.org/article/translate/2005/114.html

http://www.junchenwu.com/2005/11/html_tags.html

http://brainstormsandraves.com/articles/semantics/structure/

http://www.w3.org/tr/html401/struct/text.htm

http://www.simplebits.com/bits/simplequiz/

Mauvais tags:

http://www.htmldog.com/guides/htmlintermediate/badtags/

La balise Q

http://diveintomark.org/archives/2002/05/04/the_q_tag

Html, xhtml, sémantique et avenir du web

http://www.westciv.com/style_master/house/good_oil/xhtml/index.html