Semantische Webseiten XHTML-semantische Tags_HTML/Xhtml_Webseitenproduktion-HTML-Tutorial-php.cn

Ein weiterer wichtiger Aspekt der Trennung von Struktur und Präsentation ist die Verwendung von semantischem Markup zur Strukturierung des Dokumentinhalts. Das Vorhandensein eines XHTML-Elements bedeutet, dass der Teil des markierten Inhalts eine entsprechende strukturelle Bedeutung hat und es keinen Grund gibt, ein anderes Markup zu verwenden. Mit anderen Worten: Lassen Sie nicht zu, dass CSS ein HTML-Element wie ein anderes HTML-Element aussieht, indem Sie beispielsweise eine

-Tag-Überschrift verwenden.

Zuallererst geht es um den Unterschied zwischen Semantik und Standardstilen. Der Standardstil ist der Ausdruck einiger häufig verwendeter Tags, die vom Browser festgelegt werden. Ich persönlich denke, sein Hauptzweck besteht darin, dass jeder Tags intuitiv verstehen kann. Markup) Und der Zweck und die Funktion von Attributen, es ist offensichtlich, dass die Hx-Serie den Titeln sehr ähnelt, da sie über fette Schriftarten und größere Schriftgrößen verfügt. , werden verwendet, um sie von anderen Wörtern zu unterscheiden und eine Rolle bei der Betonung zu spielen. Listen und Tabellen zeigen deutlich, was sie tun.

Zweitens besteht der wichtigste Vorteil semantischer Webseiten darin, dass sie für Suchmaschinen geeignet sind. Mit einer guten Struktur und Semantik wird der Inhalt Ihrer Webseite natürlich leicht von Suchmaschinen gecrawlt, und Sie können Geld sparen Geben Sie sich viel Mühe bei der Werbung für Ihre Website.

Die spezifische Semantik und Verwendung wurde in der XHTML1.0-TAG-Referenz erläutert. Einige TAGS und Attribute, die leicht vergessen oder verwechselt werden, werden hier ergänzt.

,
,
,
,
, ist die höchste Stufe.
Zum Beispiel:

Inhalt in die Zwischenablage kopieren
Code:
<h1>Dokumenttitel</h1><code><h1>文档标题</h1> <h2>次级标题</h2>
Untertitel

Anstatt
Document Title
oder Document Title zu verwenden, sind Suchmaschinen offensichtlich an Letzterem interessiert Ich glaube nicht, dass er der Titel ist.

Absatzmarkierung: Wenn Sie
als Absatz kennen, verwenden Sie
nicht mehr . Und es besteht keine Notwendigkeit, Absätze von Absätzen zu unterscheiden. Der Text in
wird automatisch umgebrochen und der Zeilenumbrucheffekt ist besser als bei
. Auch die Lücken zwischen den Absätzen können per CSS gesteuert werden, sodass Absätze einfach und klar voneinander unterschieden werden können. Mit der Zeilenhöhe können Sie ganz einfach den Abstand zwischen den Zeilen definieren und dann Effekte wie Initialen definieren, was perfekt ist.
Zum Beispiel:
Inhalt in die Zwischenablage kopieren
Code:
Blue Idea www.blueidea.com wurde im Oktober 1999 gegründet. Seit Beginn seiner Gründung hat sich Blue Ideal zum Ziel gesetzt, ein Zuhause für Website-Designer und -Entwickler zu schaffen, mit dem Hauptinhalt, Netzwerkentwicklungstechnologie sowie den Austausch von Website-Erstellung und -Design einzuführen. Der Inhalt der Website ist gut gemacht und die Mitglieder veröffentlichen jeden Tag sorgfältig ausgearbeitete Tutorials, um den Internetnutzern selbstlos zu helfen. Außerdem wurden viele Designwettbewerbe durchgeführt und viele verwandte Programme entwickelt, die immer noch von vielen Websites verwendet werden. Die veröffentlichten Arbeiten und Rezensionen haben die Aufmerksamkeit vieler Medien auf sich gezogen und von Experten gelobt und gleichzeitig ihren sozialen Status begründet. Infolgedessen haben sich eine Reihe von Internetkollegen Blue Ideal angeschlossen und sind zur größten Design-Website in China geworden. eins. <code>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。

Im Laufe der Jahre wurde der Inhalt von Blue Ideal kontinuierlich bereichert und von einigen bekannten inländischen Websites und traditionellen Medien beworben Google, Baidu, Yahoo, Sohu, Es wurde von großen Suchseiten wie Sina und Excite gesammelt und belegte in den drei großen Suchmaschinen von Google den ersten Platz im Suchranking für das Schlüsselwort „Website-Design und -Entwicklung“ in vereinfachtem Chinesisch. Baidu und Yahoo haben sich mittlerweile zu einer der einflussreichsten Websites für Website-Design und -Entwicklung entwickelt.

,
,

Ungeordnete Listen sind sehr verbreitet und werden von allen häufig verwendet.
Geordnete Listen Es ist auch recht häufig verwendet. Im Zuge der Webstandardisierung wird
auch in Navigationsleisten verwendet. Ursprünglich war die Navigationsleiste eine Liste. Dies ist völlig korrekt, und wenn Ihr Browser kein CSS unterstützt, sind die Navigationslinks immer noch sehr praktisch. Es funktioniert gut, aber die Ästhetik ist etwas daneben.
Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> <ul>
Projekt 1
Projekt 2
Punkt 3< ;/li>
Inhalt in die Zwischenablage kopieren
Code:
<ol> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ol>

,
,

dl ist die „Definitionsliste“. Eine solche Liste kann beispielsweise für Erklärungen und Definitionen von Wörtern im Wörterbuch verwendet werden.
Zum Beispiel:
Inhalt in die Zwischenablage kopieren
Code:
<dl><code><dl> <dt>Dog</dt> <dd>A carnivorous mammal of the family Canidae.</dd> </dl> 
Hund

Ein fleischfressendes Säugetier aus der Familie der Canidae.

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

<dl><dt>Shanghai Beach</dt><dd>Dieser 1980 gedrehte „Shanghai Beach“ kann als der erfolgreichste und erfolgreichste bezeichnet werden klassische Dramaserie in der Geschichte des Hongkonger Fernsehens. Nach der Ausstrahlung in Hongkong sorgte es für großes Aufsehen. </dd> <dt>Chow Yun-fat</dt> <dd>Wie alle großen Filmstars bestätigte Chow Yun-fat eine Ära, ein goldenes Zeitalter der Hongkonger Filme. Die Windjacke, die Sonnenbrille, die kaltblütigen Waffen und das sonnige Lächeln sind alle im Film verankert. Wenn wir zurückblicken, wurde Fa Ge als Koordinate einer Ära eingraviert. </dd> </dl>
, zitieren, ,
Foren und Blogs verwenden häufig Zitate von anderen und verwenden , um kurze einzeilige Zitate zu kennzeichnen . . Webbrowser erkennen automatisch Inhalte zwischen . Leider erkennt der IE es nicht und manchmal kann zu Barrierefreiheitsproblemen führen. Aus diesem Grund empfehlen einige Leute, die Verwendung von zu vermeiden und Zitat-Tags manuell einzufügen. Durch das Hinzufügen einer einzelnen Zeile Referenzinhalt innerhalb eines , das die entsprechende Klasse enthält, können Sie die Referenz mit CSS formatieren, dies hat jedoch keine semantische Bedeutung. Sie können „The Q tag“ (http://diveintomark.org/archives/2002/05/04/the_q_tag) lesen, das von Mark Pilgrim für seine Ansichten zum Umgang mit -Themen geschrieben wurde. <cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.Für lange Zitate aus einem oder mehreren Absätzen sollten Sie
verwenden. CSS kann verwendet werden, um Stile für Referenzen zu definieren. Beachten Sie, dass ein Absatz eines Artikels nicht direkt in
platziert werden kann. Der zitierte Inhalt muss auch in einem Element enthalten sein, normalerweise
. Das Cite-Attribut kann sowohl mit als auch mit
verwendet werden, um die Quelladresse des zitierten Inhalts anzugeben. Beachten Sie, dass Sie das Zitatattribut nicht verwenden können, wenn Sie zum Zitieren von Inhalten das Tag verwenden.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code: <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.

Inhalt in die Zwischenablage kopieren

Code:The W3C says that <q cite="http://www.w3.org/TR/REC-html40/ struct/text.html#h-9.2.1">The presentation of phrase elements depends on the user agent.</q>.
Inhalt in die Zwischenablage kopieren Code: Das W3C sagt, dass <q cite="http://www.w3.org/TR/REC-html40/<🎜>struct/text.html# h-9.2.1">Die Darstellung von Phrasenelementenhängt vom Benutzeragenten ab.</q>.
Inhalt in die Zwischenablage kopieren
Code:
<blockquote cite="http://www.w3cn.org/"> “我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时， 我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"， 为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的， 每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备， 例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽； 针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。 这是一种恶性循环，是一种巨大的浪费。” </blockquote>
,

wird zur Hervorhebung verwendet. Die meisten Browser verwenden Kursivschrift, um hervorgehobene Inhalte anzuzeigen, und Fettschrift, um hervorgehobene Inhalte anzuzeigen. Wenn Sie bestimmen möchten, wie die hervorgehobenen Inhalte angezeigt werden, verwenden Sie am besten CSS, um deren Darstellung zu definieren. Setzen Sie keine Hervorhebung ein, wenn Sie lediglich einen visuellen Effekt erzielen möchten. Und wenn Sie betonen möchten, aber dennoch das Gefühl haben, dass die visuelle Wirkung von Fett- oder Kursivschrift nicht so gut ist, insbesondere von Kursivschrift für Chinesisch, können Sie andere, auffälligere Stile definieren, um den Hervorhebungseffekt zu erzielen.
Zum Beispiel:
Inhalt in die Zwischenablage kopieren
Code:
Text, der hervorhebt, wird normalerweise kursiv geschrieben,<code>强调 的文本通常用斜体显示， 然而， 特别强调 的文本通常以粗体显示。Text, der hervorhebt, wird jedoch normalerweise fett gedruckt .

, -Tag ist die Kopfzeile der Tabelle, das Hauptinhalt der Tabelle und das Tag ist das Ende der Tabelle.
Sie können auch den Bereich verwenden, um das Header-Attribut zu ersetzen und Zellen mit Header-Informationen zu markieren. Der Inhalt jedes Werts lautet wie folgt:
Zeile gibt die aktuelle Zelle an und stellt zugehörige Tabellen für die enthaltenen Zeilen bereit die aktuellen Zellenkopfinformationen.
col gibt die aktuelle Zelle an und stellt entsprechende Header-Informationen für die angegebene Spalte basierend auf der aktuellen Zelle bereit.
Zeilengruppe gibt die aktuelle Zelle an und stellt relevante Header-Informationen für die verbleibenden Zeilengruppen bereit, die die aktuelle Zelle enthalten.
Colgroup gibt die aktuelle Zelle an und stellt entsprechende Kopfzeileninformationen für die verbleibenden Spaltengruppen bereit, die basierend auf der aktuellen Zelle angegeben werden.
abbr wird verwendet, um den Abkürzungsnamen in der Kopfzelle zu definieren. Wenn dieses Attribut nicht definiert ist, wird der Standardzelleninhalt in abgekürzter Form angezeigt.
Zum Beispiel:
Inhalt in die Zwischenablage kopieren
Code:
<table id="mytable" Cellspacing="0" summary="Die technischen Spezifikationen der Apple PowerMac G5-Serie"><code><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <caption>Table 1: Power Mac G5 tech specs </caption> <tr> <th scope="col" abbr="Configurations" class="nobg">Configurations</th> <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th> <th scope="col" abbr="Dual 2">Dual 2GHz</th> <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> </tr> <tr> <th scope="row" abbr="Model" class="spec">Model</th> <td>M9454LL/A</td> <td>M9455LL/A</td> <td>M9457LL/A</td> </tr> <tr> <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th> <td class="alt">Dual 1.8GHz PowerPC G5</td> <td class="alt">Dual 2GHz PowerPC G5</td> <td class="alt">Dual 2.5GHz PowerPC G5</td> </tr> <tr> <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr> <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th> <td class="alt">512K per processor</td> <td class="alt">512K per processor</td> <td class="alt">512K per processor</td> </tr> </table>

< th Scope="col" abbr="Dual 2.5">Dual 2.5GHz

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

It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.
, ,
, Zusammenfassung

Tabellen in XHTML sollten nicht für das Layout verwendet werden. Wenn Sie jedoch die Daten in einer Liste beschriften möchten, sollten Sie eine Tabelle verwenden.
ist der Titel der Tabelle, das Attribut summar ist die Zusammenfassung, das
Tabelle 1: Leistung Technische Daten zum Mac G5
Konfigurationen Dual 1.8GHz Dual 2GHz
Modell M9454LL/A M9455LL/A M9457LL /A
G5 Processor Dual 1,8 GHz PowerPC G5 Dual 2 GHz PowerPC G5 Dual 2,5 GHz PowerPC G5
Frontside-Bus 900 MHz pro Prozessor 1 GHz pro Prozessor 1,25 GHz pro Prozessor< ;/td>

Level2 Cache 512 KB pro Prozessor 512 KB pro Prozessor 512 KB pro Prozessor
Sehen Sie sich den Effekt an: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm Inhalt in die Zwischenablage kopieren Code: , Wenn Sie del kennen, verwenden Sie nicht als durchgestrichenes Zeichen. Und del hat auch cite und datetime, um den Grund für das Löschen und den Zeitpunkt des Löschens anzugeben. ins bedeutet Einfügen und hat auch solche Attribute. Zum Beispiel: Inhalt in die Zwischenablage kopieren Code:  signifie code informatique. Le style par défaut est la police. Souvent rencontré dans les forums techniques et les blogs. Par exemple : <div class="blockcode"> Copier le contenu dans le presse-papiers <h5>Code :</h5> <code><code>p{margin:2px 0;}

ist der Titel der Tabelle, das Attribut summar ist die Zusammenfassung, das
,	,
Konfigurationen	Dual 1.8GHz	Dual 2GHz
Modell	M9454LL/A	M9455LL/A	M9457LL /A
G5 Processor	Dual 1,8 GHz PowerPC G5	Dual 2 GHz PowerPC G5	Dual 2,5 GHz PowerPC G5
Frontside-Bus	900 MHz pro Prozessor	1 GHz pro Prozessor	1,25 GHz pro Prozessor< ;/td>
Level2 Cache	512 KB pro Prozessor	512 KB pro Prozessor	512 KB pro Prozessor