Semantische Webseite xhtml semantische Tags

Ein weiterer wichtiger Aspekt der Trennung von Struktur und Darstellung ist die Verwendung von semantischem Markup zum Konstruktion von Dokumentinhalten. Die Existenz eines XHTML -Elements bedeutet, dass der Teil des markierten Inhalts eine entsprechende strukturierte Bedeutung hat und es keinen Grund gibt, andere Tags zu verwenden. Mit anderen Worten, lassen Sie CSS kein HTML -Element wie ein anderes HTML -Element aussehen, z.

Erstens geht es um den Unterschied zwischen Semantik und Standardstilen. Der Standardstil ist Ausdruck einiger häufig verwendeter Tags, die vom Browser festgelegt wurden. Ich persönlich denke, dass sein Hauptzweck darin besteht, alle die Verwendungen und Funktionen von Tags und Attributen intuitiv zu verstehen. Es ist offensichtlich, dass die HX -Serie dem Titel sehr ähnlich aussieht, da sie kühne und größere Schriftgrößen hat. <strong>, <em> wird verwendet, um es von anderen Wörtern zu unterscheiden und spielt eine Schwerpunkte. In Bezug auf die Liste und die Tabelle ist es offensichtlich, Ihnen zu sagen, was sie tun.

Zweitens ist das Wichtigste an semantischen Webseiten, dass sie zu Suchmaschinen freundlich sind. Mit einer guten Struktur und Semantik ist Ihr Webseiteninhalt von Natur aus einfach von Suchmaschinen krabbelt, und Ihre Website -Aktion kann viel Aufwand sparen.

Die spezifische Semantik und Verwendungen wurden in der XHTML1.0 -Tag -Referenz erklärt. Einige Tags und Attribute, die leicht zu vergessen oder verwirrt zu sein sind, werden hier ergänzt.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> werden als Titel verwendet und werden je nach Bedeutung reduziert. <h1> ist das höchste Niveau.

Zum Beispiel:

Code:

<div class = title> dokumenttitel </div> oder <span class = title> dokumenttitel </span>. Es ist offensichtlich, dass Suchmaschinen es nicht als Titel für letztere betrachten.

Absatzmarken, die <p> als Absätze wissen, werden Sie nicht mehr <br/> zum Brechen von Linien verwenden, und Sie müssen nicht zwischen Absätzen und Absätzen unterscheiden. Der Text in <p> </p> wickelt automatisch ein und der Effekt der Verpackung ist besser als <br>. Die Lücken zwischen Absätzen können auch mit CSS kontrolliert werden, was es einfach und klar macht, Absätze von Absätzen zu unterscheiden. Es wäre perfekt, wenn Sie den Reiseabstand leicht definieren und dann die Erstcharakter-Unterbrechungseffekte mithilfe von Linienhöhe definieren können.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

</p>

<p> Seit vielen Jahren wurde der Inhalt von Blue Ideal kontinuierlich angereichert und von einigen bekannten inländischen Websites und traditionellen Medien hervorgehoben. Es wurde von großen Suchseiten wie Google, Baidu, Yahoo, Sohu, Sina und ERRITE erfasst. Bei der Suche nach dem Design und der Entwicklung vereinfachter chinesischer Keywords der Website unter den drei wichtigsten Suchmaschinen von Google, Baidu und Yahoo hat es den ersten Platz belegt. Jetzt hat sich Blue Ideal zu einer der einflussreichsten professionellen Websites für Website -Design und -entwicklung in China entwickelt. </p> <ul>, <ol>, <li>

<ul> ungeordnete Listen sind sehr häufig und werden weit verbreitet. Auch die nicht ordnungsgemäße Listen werden häufig verwendet. Während des Web -Standardisierungsprozesses wird <ul> auch mehr für Navigationsbalken verwendet. Ursprünglich sind Navigationsbalken eine Liste, die dafür völlig korrekt ist. Wenn Ihr Browser CSS nicht unterstützt, ist der Navigationslink immer noch sehr gut, aber es ist etwas weniger schön.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

<li> Projekt 1 </li>

<li> Projekt 2 </li>

<li> Projekt 3 </li>

</ul> Inhalt in die Zwischenablage kopieren

Code:

<li> Kapitel 1 </li>

<li> Kapitel 2 </li>

<li> Kapitel 3 </li>

</ol> <dl>, <dt>, <dd>

DL ist die Definitionsliste. Beispielsweise kann die Erklärung und Definition von Wörtern im Wörterbuch in dieser Liste verwendet werden.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

<dt> Hund </dt>

<dd> Ein fleischfressendes Säugetier der Familie Canidae. </dd>

</dl> Inhalt in die Zwischenablage kopieren

Code:

<dt> Shanghai Beach </dt>

<dd> Dieser 1980 gedrehte "Shanghai -Bund" ist das erfolgreichste und klassischste Drama in der Geschichte des Hongkong -Fernsehens.

Nachdem es in diesem Jahr in Hongkong ausgestrahlt wurde, verursachte es eine große Sensation. </dd>

<dt> Chow yun-fat </dt>

<dd> Wie alle großartigen Filmstars bestätigte Chow Yun-Fat eine Ära, ein goldenes Zeitalter von Filmen von Hongkong.

Windmäntel, Sonnenbrillen, kaltblütige Doppelwaffen und sonniges Lächeln sind im Film versiegelt. Wenn wir zurückblicken, wurde Fa Ge als Koordinaten einer Ära eingraviert. </dd>

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

Foren und Blogs verwenden häufig Zitate von anderen, wobei <q> kurze Einzellinienzitate markieren. Der Webbrowser erkennt den Inhalt zwischen <q> automatisch. Leider kann der IE nicht erkennen, und manchmal kann <q> einige Zugänglichkeitsprobleme verursachen. Aus diesem Grund empfehlen einige Leute, <Q> nicht zu verwenden und Referenzmarken manuell einzufügen. Fügen Sie einer <span> mit der entsprechenden Klasse eine einzelne Referenzinhaltszeile hinzu. Dann können Sie CSS verwenden, um die Referenz zu stylen, aber dies hat keine semantische Bedeutung. Sie können die Ansichten des Q -Tags (http://diveIntomark.org/archives/2002/05/04/the_q_tag) zur Handhabung <q> verwandte Probleme, die von Mark Pilgrim geschrieben wurden, lesen.

Für lange Zitate von einem oder mehreren Absätzen sollte <blockquote> verwendet werden. CSS kann verwendet werden, um den Referenzstil zu definieren. Beachten Sie, dass ein Artikel nicht direkt in <blockquote> platziert werden kann und der zitierte Inhalt auch in einem Element enthalten sein muss, normalerweise <p>. Das Attribut zitieren kann mit <q> oder <blockquote> verwendet werden, um die Quelladresse des referenzierten Inhalts anzugeben. Es ist zu beachten, dass Sie das Zitatattribut nicht verwenden können, wenn Sie <span> anstelle von <Q> Tag -Referenzinhalt verwenden.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

Code:

Code:

struct/text.html#H-9.2.1> Die Präsentation von Phrasenelementen

Kopieren Sie den Inhalt in die Zwischenablage

Code:

<p> Die meisten von uns haben eine tiefgreifende Erfahrung. Immer wenn die Mainstream -Browser -Version aktualisiert wird, kann die von uns erstellte Website veraltet sein.

Wir müssen die Website aktualisieren oder wieder aufbauen. Zum Beispiel der typische Browserkrieg von 1996 bis 1999,

Um mit NetScape und IE kompatibel zu sein, musste die Website für diese beiden Browser einen anderen Code schreiben. Ähnlich,

Immer wenn neue Netzwerktechnologie und interaktive Geräte auftreten, müssen wir auch eine neue Version erstellen, um diese neue Technologie oder dieses neue Gerät zu unterstützen.

Zum Beispiel die WAP -Technologie, die den mobilen Internetzugang unterstützt. Es gibt unzählige ähnliche Fragen: Der Website -Code ist aufgebläht und kompliziert, was einen Großteil unserer Bandbreite verschwendet.

DHTML -Spezialeffekte für einen bestimmten Browser blockieren einige potenzielle Kunden; Schwierige Codes, behinderte Menschen können keine Websites usw. durchsuchen.

Dies ist ein Teufelskreis und ein großer Abfall. </p>

</blockquote> <em>, <strong>

<em> wird zur Betonung verwendet, <strong> wird zur Betonung verwendet. Die meisten Browser verwenden Kursivschrift, um den hervorgehobenen Inhalt und die Fettdrucks zu zeigen, um den hervorgehobenen Inhalt anzuzeigen. Dies ist jedoch nicht erforderlich. Wenn der Schwerpunkt angezeigt wird, besteht der beste Weg, CSS zu verwenden, um ihre Leistung zu definieren. Verwenden Sie keinen Schwerpunkt, wenn Sie nur visuelle Effekte haben möchten. Und wenn Sie betonen möchten, aber dennoch das Gefühl haben, dass mutige oder Kursivschrift nicht so gut im visuellen Effekt sind, insbesondere Kursivschrift für Chinesen, können Sie einige andere auffälligere Stile vollständig definieren, um den Einfluss der Betonung zu erreichen.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

Texte mit besonderem Schwerpunkt werden jedoch normalerweise fett gezeigt. </p> <telle>, <td>, <Th>, <Caption>, Zusammenfassung

Tabellen in XHTML sollten nicht angelegt werden. Wenn jedoch die Daten der Liste markiert werden sollen, sollte eine Tabelle verwendet werden. <Th> ist der Tabellentitel, die Attributzusammenfassung ist die Zusammenfassung, das <Caption> -Tag ist die Header -Beschreibung, das <thead> -Tag ist der Header, das <tbody> -Tag ist der Hauptinhalt der Tabelle und das <tfoot> -Tag ist das Ende der Tabelle.

Es kann auch verwendet werden, um das Headerattribut zu ersetzen und Zellen zu markieren, die Header -Informationen enthalten, wobei der Inhalt jedes Werts wie folgt lautet:

Zeile gibt die aktuelle Zelle an und liefert relevante Header -Informationen für Zeilen, die die aktuelle Zelle enthalten.

Col gibt die aktuelle Zelle an und liefert entsprechende Header -Informationen für die gemäß der Stromzelle angegebenen Spalten.

RowGroup gibt die aktuelle Zelle an und liefert relevante Header -Informationen für die verbleibenden Zeilengruppen, die die aktuelle Zelle enthalten.

ColGroup gibt die aktuelle Zelle an und liefert entsprechende Headerinformationen für die verbleibenden Spaltengruppen, die basierend auf der aktuellen Zelle angegeben sind.

ABBR wird verwendet, um den Abkürzungsnamen in der Header -Zelle zu definieren. Wenn diese Eigenschaft nicht definiert ist, wird der Standardzellinhalt weggelassen.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

<Caption> Tabelle 1: Power Mac G5 -Tech -Spezifikationen </caption>

<tr>

<th scope = col abbr = configurations class = nobg> Konfigurationen </th>

<th Scope = col abbr = Dual 1,8> Dual 1,8 GHz </th>

<th Scope = col abbr = dual 2> Dual 2GHz </th>

<th Scope = col abbr = dual 2,5> Dual 2,5 GHz </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 = Zeile abbr = G5 -Prozessorklasse = Specalt> G5 -Prozessor </th>

<td class = Alt> Dual 1,8 GHz PowerPC G5 </td>

<td class = Alt> Dual 2GHz powerpc g5 </td>

<td class = Alt> Dual 2,5 GHz powerpc g5 </td>

</tr>

<tr>

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

<td> 900 MHz pro Prozessor </td>

<td> 1 GHz pro Prozessor </td>

<td> 1,25 GHz pro Prozessor </td>

</tr>

<tr>

<th Scope = Zeile abbr = l2 cache class = Specalt> Level2 Cache </th>

<td class = Alt> 512K pro Prozessor </td>

<td class = Alt> 512K pro Prozessor </td>

<td class = Alt> 512K pro Prozessor </td>

</tr>

</table> Effekt anzeigen: http://www.bluidea.com/articleimg/2006/02/3228/csstables.htm

Code:

Wenn Sie DEL kennen, verwenden Sie <s> nicht mehr als Stripeghrough. Die Verwendung von Del ist offensichtlich semantischer. Darüber hinaus wird das DEL mit Cite und DateTime ausgestattet, um den Grund für die Löschung und die Zeit der Löschung anzugeben. INS bedeutet Insertion, und es gibt solche Attribute.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

Es bedeutet Computercode. Der Standardstil ist Schriftart. Es wird oft in technischen Foren und Blogs auftreten.

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

Das <ABBR> -Tag repräsentiert die Abkürzung auf der Webseite, und das <Akronym> Tag ist eine Abkürzung. (Hinweis: Hier trennen wir die Abkürzung und Abkürzung. Der Bereich der Abkürzung ist größer als die Abkürzung, um die Abkürzung des ersten Buchstabens zu erhalten

Schreiben Sie mit <Akronym> Tag) Browser unter Windows IE6.0 unterstützen nicht <abbr> Tags. In IE können Sie CSS auf <Akronym> anwenden, aber nicht auf <abbr> Tags.

IE zeigt eine Eingabeaufforderung für das Titelattribut des <Akronym> -Tags an, ignoriert jedoch das <abbr> -Tag.

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

Zum Beispiel: Inhalt in die Zwischenablage kopieren

Code:

Code:

Das Titelattribut wird verwendet, um zusätzliche Anweisungen für Elemente zu geben. Titattribute können für alle Tags mit Ausnahme von Base, BaseFont, Head, HTML, Meta, Param, Skript und Titel verwendet werden. Aber es ist nicht notwendig.

Die ALT -Eigenschaft ist ein User Agent (UA), der keine Bilder, Formulare oder Applets anzeigen und Ersatztext angibt. Die Sprache des Ersatztextes wird durch das Lang -Attribut angegeben. Kopieren Sie den Inhalt in die Zwischenablage

Code:

Code:

Standardstil:

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

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

Semantik:

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

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

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/

Schlechte Tags:

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

Das Q -Tag

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

HTML, XHTML, Semantik und die Zukunft des Webs

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