Artikel Einführung von Wulin.com (www.vevb.com): Ich erinnere mich an eine schreckliche Erfahrung. Die Seite wurde mit einem Dutzend oder Dutzenden von Divs verschachtelt. Ich fühle mich schwindelig, als ich es las ... einige von ihnen können Span -Tags, P -Tags und Divs verwenden. Diejenigen, die H1 und HX verwenden können, verwenden auch Div -Tags. Es ist wirklich sprachlos ... zu dieser Zeit hoffe ich, dass der Entwickler einige Konzepte und Handlungen von "semantischen Tags" hat.
Ich sehe, dass einige Rekrutierungsanforderungen mit der Word -Web -Semantik und dem Verständnis/Vertraut mit Webstandards vertraut sind. Tag-Semantik ist Teil der Webstandards, daher habe ich einen Beitrag geändert, den ich früher im Blog-Park gepostet habe, und dann gepostet ... Ich hoffe, dass Front-End-Anfänger wissen können, dass es so etwas gibt.
Ich erinnere mich an eine schreckliche Erfahrung. Die Seite wurde mit einem Dutzend oder Dutzenden von Divs verschachtelt. Ich fühlte mich schwindelig, als ich es angesehen habe ... Einige von ihnen können Span -Tags, P -Tags und Divs verwenden. Diejenigen, die H1 und HX verwenden können, verwenden auch Div -Tags. Es ist wirklich sprachlos ... zu dieser Zeit hoffe ich, dass der Entwickler einige Konzepte und Handlungen semantischer Tags hat ...
1: (Theorie) Was ist ein semantisches Etikett?
Semantische Tags sollen versuchen, HTML -Tags mit entsprechenden Strukturen so weit wie möglich zu verwenden. Nehmen Sie als Beispiel Tisch:
<tabelle>
<tr>
<td> Verbraucherartikel </td>
<td> Verbrauchsmenge </td>
</tr>
<tr>
<td> essen </td>
<td> 20 yuan </td>
</tr>
</table>
Hast du gesehen, was mit der obigen Tabelle los ist? Hehe, dann schau dir dieses semantische Label an
<tabelle>
<Caption> Buchhaltung ausgeben </caption>
<kopf>
<tr>
<Th> Verbraucherartikel </th>
<Th> Verbrauchsmenge </th>
</tr>
</head>
<tbody>
<td> essen </td>
<td> 20 yuan </td>
</tbody>
</table>
Die Tags dieser beiden Codeteile sind unterschiedlich. Die Tag -Codes in der zweiten Tabelle stehen zweifellos eher den Webstandards.
<Caption>: Titel der Tabelle;
<Head>: der Kopfzeile eines Tisches;
<Th>: Säulenkopf einer bestimmten Spalte der Tabelle.
Lassen Sie uns darüber sprechen, was wir gewohnt sind
<title> Einführung in den Blog Park </title> <body> Blog Park ist ein Softwareentwicklungstechnologiepark. Es wurde 2004 hier gegründet ... </body>
Schauen Sie, warum wissen wir, wo der Titel ist, wenn wir einen Artikel lesen? Oben im Browser. Warum können Suchmaschinen dann kriechen? Es ist so, dass der Titel des Semantic Tag <titels> der Artikel ist. Wenn wir uns das nicht halten, stattdessen:
<span> Einführung in den Blog Park </span> <span> Blog Park ist ein Softwareentwicklungstechnologiepark. Es wurde 2004 hier gegründet ... <span>
Woher wissen Suchmaschinen, wer der Titel ist und wer der Inhalt ist? Wie hängt es darauf ab, den Titel zu holen? Tatsächlich kann die Semantik nicht nur die Semantik der Label sein, sondern sie auch in strukturelle Semantik ausdehnen. Zum Beispiel:
#left {float: links; Margging-links: 50px;}
#Right {float: rechts; Rand: 100px;}
<div id = links> Inhalt .. </div>
<div id = rechts> Inhalt .. </div>
In diesem Beispiel ist die Benennung von ID etwas übertrieben, aber ähnliche Situationen machen einige. Wenn wir die #LEFT Div auf der rechten Seite der Seite setzen und die Position mit #Right ändern möchten, können Sie den Stil dazu ändern?
#left {float: rechts; Margin-Links: 50px;}
#Right {float: links; Rand: 100px;}
Es wäre so unangenehm, so auszusehen, und es würde das Layout dieser beiden Divs irreführen.
Es sollte so geschrieben werden.
<div id = main> Inhalt .. </div>
<div ID = Seitenleiste> Inhalt .. </div>
Auf diese Weise ist klar auf einen Blick, welche Inhalte in diesen Divs sind, und es ist zweckmäßig, die Stile zu ändern.
2: (Theorie) Wie wäre es mit semantischen Etiketten?
1. Bessere Struktur, förderlicher für Suchmaschinenkrabbungen (SEO -Optimierung) und Entwicklerwartung (höhere Wartung aufgrund klarer Struktur und leicht zu lesen).
2. Es ist förderlicher für das Lesen spezieller Terminals (Mobiltelefone, persönliche Assistenten usw.).
3: (Aktion) Was tun mit semantischen Etiketten?
Versuchen Sie, strukturelle Bedeutungen und weniger Semantik wie <span>, <div> bedeutungslos zu verwenden, und Sie können nicht sagen, was es ist, aber Sie können nicht sehen, was es auf einen Blick ist. Sie können erkennen, dass das EM -Tag der Inhalt ist, der betont und von verschiedenen Inhalten unterschieden wird.
Wie können Sie feststellen, ob Ihre Seite einem der Webstandards entspricht: semantische Tags? Sie können den Stil Ihrer Seite vorübergehend entfernen und sehen, wie die Lesbarkeit ist. Wenn Sie der Meinung sind, dass Ihre Seite zu diesem Zeitpunkt sehr unordentlich ist, bedeutet dies, dass das semantische Etikett der Seite nicht sehr gut ist. Wenn Ihre Seite nach dem Entfernen des Stils immer noch nicht unordentlich ist, bedeutet dies, dass Ihre Seitenstruktur klar ist und das semantische Etikett besser ist.
Dies ist nur meine Meinung. Ich hoffe, dass die Menschen, die es gelesen haben, auch ihre Ideen ausdrücken, damit jeder Ihre Ideen kennen und diesen Artikel verbessern kann.