Pages web sémantiques Balises sémantiques XHTML_HTML/Xhtml_production de pages web

Un autre aspect important de la séparation de la structure et de la présentation est l'utilisation du balisage sémantique pour structurer le contenu du document. La présence d'un élément XHTML signifie que la partie du contenu marqué a une signification structurelle correspondante et qu'il n'y a aucune raison d'utiliser un autre balisage. En d'autres termes, ne laissez pas CSS faire ressembler un élément HTML à un autre élément HTML, par exemple en utilisant un en-tête

au lieu d'un en-tête de balise

.

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 permettre à chacun de comprendre intuitivement les balises (. balisage). Et en ce qui concerne le but et la fonction des attributs, il est évident que la série Hx ressemble beaucoup aux titres, car elle a des polices en gras et des tailles de police plus grandes. , sont utilisés pour les distinguer des autres mots et jouent un rôle d'emphase. Les listes et les tableaux vous indiquent clairement ce qu'ils font.

Deuxièmement, l'avantage le plus important des pages Web sémantiques est qu'elles sont conviviales pour les moteurs de recherche. Avec une bonne structure et une bonne sémantique, le contenu de votre page Web sera naturellement facilement exploré par les moteurs de recherche et vous pourrez économiser de l'argent. la promotion de votre site Web.

La sémantique et les utilisations spécifiques ont été expliquées dans la référence XHTML1.0 TAG. Certains TAGS et attributs faciles à oublier ou à confondre sont complétés ici.

,

,

,

,

, est le niveau le plus élevé.
Par exemple :

Copier le contenu dans le presse-papiers

Code :

<font face="NSimsun"><h1>Titre du document</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>

Sous-titre

Au lieu d'utiliser

Document Title

, ou Document Title, les moteurs de recherche s'intéressent évidemment à ce dernier. je ne penserai pas qu'il est le titre.

Marque de paragraphe, si vous connaissez

comme paragraphe, vous n'utiliserez plus
Et il n'est pas nécessaire d'utiliser

pour distinguer les paragraphes des paragraphes. Le texte dans

sera automatiquement renvoyé à la ligne et l'effet de retour à la ligne est meilleur que
. Les espaces entre les paragraphes peuvent également être contrôlés à l’aide de CSS, ce qui permet de distinguer facilement et clairement les paragraphes les uns des autres. L'utilisation de la hauteur de ligne permet de définir facilement l'espacement entre les lignes, puis de définir des effets tels que des lettrines, ce qui est parfait.
Par exemple :

Copier le contenu dans le presse-papiers

Code :

<font face="NSimsun"><p>Blue Idea www.blueidea.com est né en octobre 1999. Depuis le début de sa création, Blue Ideal a pour objectif de créer un foyer pour les concepteurs et les développeurs de sites Web, avec pour principal contenu l'introduction de la technologie de développement de réseaux et la création et la conception de sites Web. Le contenu de son site Web est bien conçu et les membres publient chaque jour des didacticiels soigneusement conçus, aidant ainsi les internautes de manière désintéressée. Il a également organisé de nombreux concours de design et développé de nombreux programmes connexes qui sont encore utilisés par de nombreux sites Web. Les travaux et critiques publiés ont attiré l'attention de nombreux médias et ont été salués par les experts, tout en établissant leur statut social. En conséquence, plusieurs groupes de collègues Internet ont rejoint Blue Ideal, devenant ainsi le plus grand site de design en Chine. un. <code><font face="NSimsun"><p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 <br></p><br><p>多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p></font>

Au fil des ans, le contenu de Blue Ideal a été continuellement enrichi et a été promu par certains sites Web nationaux bien connus et médias traditionnels, et a été successivement promu par Google, Baidu, Yahoo, Sohu, Il a été collecté par les principaux sites de recherche tels que Sina et Excite, et s'est classé premier dans le classement de recherche pour le mot-clé « conception et développement de sites Web » en chinois simplifié dans les trois principaux moteurs de recherche de Google, Baidu et Yahoo. Now Blue Ideal est devenu l'un des sites Web professionnels les plus influents du pays pour la conception et le développement de sites Web.

,
,
1. 
   
   
   
   La liste non ordonnée est très courante et largement utilisée par tout le monde,
   La liste ordonnée est également assez couramment utilisé. Dans le processus de normalisation du Web,
   est également davantage utilisé dans les barres de navigation. À l'origine, la barre de navigation était une liste, c'est tout à fait correct, et lorsque votre navigateur ne prend pas en charge CSS, les liens de navigation restent très pratiques. Cela fonctionne bien, mais l'esthétique est un peu décalée.
   Par exemple : Copier le contenu dans le presse-papiers
   Code :<font face="NSimsun"><ul><br><li>项目一</li><br><li>项目二</li><br><li>项目三</li><br></ul></font> <font face="NSimsun"><ul></font>
   • Projet 1
   • Projet 2
   • ;/li>
   Copier le contenu dans le presse-papiers
   Code :
   <font face="NSimsun"><ol><br><li>第一章</li><br><li>第二章</li><br><li>第三章</li><br></ol></font>

   ,

   ,

   
   
   dl est la "liste de définitions". Par exemple, ce type de liste peut être utilisé pour les explications et les définitions de mots dans le dictionnaire.
   Par exemple :

   Copier le contenu dans le presse-papiers

   Code :

   <font face="NSimsun"><dl><code><font face="NSimsun"><dl><br><dt>Dog</dt><br><dd>A carnivorous mammal of the family Canidae.</dd><br></dl> </font>

   Chien

Un mammifère carnivore de la famille des Canidés.

Copier le contenu dans le presse-papiers

<font face="NSimsun"><dl><br><dt>上海滩</dt><br><dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。<br>当年在香港播出以后，产生了巨大的轰动效应。</dd><br><dt>周润发</dt><br><dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。<br>风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd><br></dl></font>Code :

<font face="NSimsun"><dl><strong><dt>Shanghai Beach</dt></strong><dd>Cette "Shanghai Beach" filmée en 1980 peut être qualifiée de la plus réussie et série dramatique classique de l'histoire de la télévision de Hong Kong. <br>Après sa diffusion à Hong Kong, elle a fait sensation. </dd><br><dt>Chow Yun-fat</dt><br><dd>Comme toutes les grandes stars de cinéma, Chow Yun-fat a confirmé une époque, un âge d'or du cinéma hongkongais. <br>Le coupe-vent, les lunettes de soleil, les pistolets de sang-froid et le sourire ensoleillé sont tous scellés dans le film Quand on regarde en arrière, Fa Ge a été gravé comme la coordonnée d'une époque. </dd><br></dl></font>

, cite, ,

Les forums et les blogs utilisent souvent des citations d'autres personnes et utilisent . Malheureusement, IE ne le reconnaît pas et parfois, peut entraîner des problèmes d'accessibilité. Pour cette raison, certaines personnes vous recommandent d'éviter d'utiliser et d'insérer manuellement des balises de citation. En ajoutant une seule ligne de contenu de référence dans un contenant la classe appropriée, vous pouvez styliser la référence avec CSS, mais cela n'a aucune signification sémantique. Vous pouvez lire The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag) écrit par Mark Pilgrim pour son point de vue sur le traitement des problèmes liés à <font face="NSimsun"><cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.</font>Pour les citations longues d'un ou plusieurs paragraphes, utilisez

. CSS peut être utilisé pour définir des styles pour les références. Notez qu'un paragraphe d'article ne peut pas être placé directement dans

, le contenu cité doit également être inclus dans un élément, généralement

. L'attribut cite peut être utilisé avec et

pour fournir l'adresse source du contenu cité. Il convient de noter que si vous utilisez la balise au lieu de la balise pour citer le contenu, vous ne pouvez pas utiliser l'attribut cite.

Par exemple : Copier le contenu dans le presse-papiers

Code :<font face="NSimsun"><p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p></font>

Copier le contenu dans le presse-papiers

Code :<font face="NSimsun"><p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/<br />struct/text.html#h-9.2.1">The presentation of phrase elements<br>depends on the user agent.</q>.</p></font>

Copier le contenu dans le presse-papiers Code : <font face="NSimsun"><p>Le W3C dit que <q cite="http://www.w3.org/TR/REC-html40/<🎜>struct/text.html# h-9.2.1">La présentation des éléments de phrasedépend de l'agent utilisateur.</q>.</p></font>

Copier le contenu dans le presse-papiers

Code :

<font face="NSimsun"><blockquote cite="http://www.w3cn.org/"><br><p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，<br>     我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，<br>     为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，<br>     每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，<br>     例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；<br>     针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。<br>     这是一种恶性循环，是一种巨大的浪费。”</p><br></blockquote></font>

,

est utilisé pour l'accentuation, La plupart des navigateurs affichent le contenu mis en évidence en italique et en gras pour le contenu en surbrillance. Cependant, si vous souhaitez déterminer comment le contenu en surbrillance est affiché, le meilleur moyen est d'utiliser CSS pour définir son apparence. N'utilisez pas l'accent lorsque tout ce que vous voulez est un effet visuel. Et si vous souhaitez souligner tout en estimant que l'effet visuel du gras ou de l'italique n'est pas très bon, en particulier l'italique pour le chinois, vous pouvez définir d'autres styles plus accrocheurs pour obtenir l'effet d'accentuation.
Par exemple :

Copier le contenu dans le presse-papiers

Code :

<font face="NSimsun"><p><em>Le texte qui met l'accent sur</em> est généralement en italique,<code><font face="NSimsun"><p><em>强调</em> 的文本通常用斜体显示，<br>然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p></font>Cependant, le texte qui met l'accent sur .

, le contenu principal du tableau et la balise est la fin du tableau.
Vous pouvez également utiliser scope, qui peut être utilisé pour remplacer l'attribut headers et marquer les cellules contenant des informations d'en-tête. Le contenu de chaque valeur est le suivant :
la ligne indique la cellule actuelle et fournit des tableaux associés pour les lignes contenant. les informations d’en-tête actuelles.
col indique la cellule actuelle et fournit les informations d'en-tête correspondantes pour la colonne spécifiée en fonction de la cellule actuelle.
Rowgroup indique la cellule actuelle et fournit des informations d'en-tête pertinentes pour les groupes de lignes restants contenant la cellule actuelle.
Colgroup indique la cellule actuelle et fournit les informations d'en-tête correspondantes pour les groupes de colonnes restants spécifiés en fonction de la cellule actuelle.
abbr est utilisé pour définir le nom de l'abréviation dans la cellule d'en-tête. Si cet attribut n'est pas défini, le contenu de la cellule par défaut sera sous forme abrégée.
Par exemple :

Copier le contenu dans le presse-papiers

Code :

<font face="NSimsun"><table id="mytable" cellpacing="0" summary="Les spécifications techniques de la série Apple PowerMac G5"><code><font face="NSimsun"><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"><br><caption>Table 1: Power Mac G5 tech specs </caption><br>   <tr><br><th scope="col" abbr="Configurations" class="nobg">Configurations</th><br><th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th><br><th scope="col" abbr="Dual 2">Dual 2GHz</th><br>     <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th><br>   </tr><br>   <tr><br><th scope="row" abbr="Model" class="spec">Model</th><br><td>M9454LL/A</td><br><td>M9455LL/A</td><br><td>M9457LL/A</td><br>   </tr><br>   <tr><br><th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th><br><td class="alt">Dual 1.8GHz PowerPC G5</td><br><td class="alt">Dual 2GHz PowerPC G5</td><br><td class="alt">Dual 2.5GHz PowerPC G5</td><br>   </tr><br>   <tr><br><th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th><br><td>900MHz per processor</td><br><td>1GHz per processor</td><br><td>1.25GHz per processor</td><br>   </tr><br>   <tr><br><th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br>   </tr><br></table></font>

  < th scope="col" abbr="Dual 2,5">Dual 2,5GHz

 

 

<font face="NSimsun"><p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p></font>

 

 

<font face="NSimsun"><p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p></font>

, résumé

Les tableaux en XHTML ne doivent pas être utilisés pour la mise en page. Cependant, si vous souhaitez étiqueter les données dans une liste, vous devez utiliser un tableau.

est la description de l'en-tête, la balise

Tableau 1 : Alimentation Spécifications techniques du Mac G5

,	,
est le titre du tableau, le résumé d'attribut est le résumé, la balise
Configurations	Double 1,8GHz	Double 2GHz
Modèle	M9454LL/A	M9455LL/A	M9457LL /A
Processeur G5	Double PowerPC G5 1,8 GHz	Double PowerPC G5 2 GHz	Double PowerPC G5 2,5 GHz
Bus frontal	900 MHz par processeur	1 GHz par processeur	1,25 GHz par processeur< ;/td>
Level2 Cache	512K par processeur	512K par processeur	512 Ko par processeur

Voir l'effet : http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm Copier le contenu dans le presse-papiers Code : , Si vous connaissez del, n'utilisez pas comme barré. Utiliser del est évidemment plus sémantique. Et del a également cite et datetime pour indiquer la raison de la suppression et l'heure de la suppression. ins signifie insérer et possède également de tels attributs. Par exemple : Copier le contenu dans le presse-papiers Code : </strong><br><br> signifie code informatique. Le style par défaut est la police. Souvent rencontré dans les forums techniques et les blogs. <br>Par exemple : <div class="blockcode"> <em>Copier le contenu dans le presse-papiers</em> <h5>Code :</h5> <code><font face="NSimsun"><code>p{margin:2px 0;}