Mit der kontinuierlichen Popularisierung von WEB-Standards in China sind Konzepte wie die Trennung von strukturellem Leistungsverhalten, Modularisierung, Semantik und elegante Verschlechterung aufgrund der Auswirkungen auch zu wichtigen Elementen für die Bewertung des Verständnisses von WEB-Standards durch Front-End-Mitarbeiter geworden Aufgrund des kommerziellen Werts von SEO hat „Semantisierung“ herausragende Aufmerksamkeit erhalten. Als neuer Front-End-Mitarbeiter habe ich einfach geglaubt, dass „Semantisierung“ eine Methode zum Organisieren von (x) HTML-Strukturen mithilfe von Tags ist, die für Suchmaschinen am vorteilhaftesten sind Gewicht.
Nachdem ich viele Front-End-Bücher und viele Artikel meiner Vorgänger gelesen hatte, begann ich die Oberflächlichkeit meines Bewusstseins zu erkennen und erkannte langsam den Wert der „Semantisierung“. Der folgende Inhalt ist nur eine Zusammenfassung der persönlichen Praxis im täglichen Leben. Er fasst die Ansichten mehrerer Senioren zusammen und stellt sich auf die Schultern von Giganten, um weiter zu sehen.
Was ist „Semantik“?
„Semantik“ bezieht sich auf die Fähigkeit von Maschinen, Informationen mit weniger menschlichem Eingreifen zu recherchieren und zu sammeln, wodurch Webseiten für Maschinen verständlich werden und letztendlich den Menschen zugute kommen. Um eine beliebte Erklärung eines Internetnutzers im BI-Forum zu übernehmen: „Semantik bedeutet, seine Freundin nicht wie eine gewöhnliche Freundin zu behandeln.“ Das Folgende ist ein einfaches Beispiel für ein XML-Formular:
Durch die CSS-Steuerung können wir jedoch problemlos „Freundin“ wie „Freunde“ anzeigen. Wenn wir uns nur auf die Präsentationsebene konzentrieren, ist die Bezeichnung nur ein „Hook“, der von CSS und JS verarbeitet werden soll betonen immer noch die „Semantisierung“, auf die weiter unten noch näher eingegangen wird.
semantische Bedeutung
1.Suchmaschine
In Bezug auf die Suchmaschinenoptimierung haben viele Senioren bereits ausführliche Erklärungen zum Gewicht von Hx, zum versteckten Text usw. gegeben, daher werde ich hier nicht näher darauf eingehen. Vor einiger Zeit wurde eine Software namens Wolfram (http://www.wolframalpha Die Suchmaschine von .com/) hat Aufmerksamkeit erregt. Wir wissen, dass Google die Suchergebnisse nach dem PR-Wert jeder Website sortiert, und Wolfram behauptet, den Inhalt der Benutzereingaben zu „verstehen“. . Treffen Sie ein Urteil auf der Grundlage der Prämisse. Als ich „Wer ist Adrian“ eingab, gab mir Wolfram eine solche Rückmeldung, obwohl das Ergebnis nicht sehr genau war.
Geht es bei der „Semantik“, die wir bewundern, im Zusammenhang mit der Front-End-Arbeit nicht nur darum, Computer unsere Inhalte verstehen zu lassen? Anhand eines einfachen Beispiels wie diesem <acronym title="World Wildlife Fund">WWF</acronym> kann der Computer verstehen, dass der WWF es verdient, der World Wildlife Fund und nicht das World Water Forum zu sein. Das ist für den Computer unrealistisch Unsere Inhalte verstehen Ja, auch wenn Suchmaschinen wie Wolfram nur von kurzer Dauer sind, ist die Vision, die sie verfolgen, das Wissen der Welt berechenbar zu machen, in der Tat unserer Verfolgung würdig.
2.Benutzererfahrung
Nehmen wir zunächst ein Beispiel. Das Folgende ist das Benutzerregistrierungsformular auf Dangdang.com (https://login.dangdang.com/Register.aspx), und ein Teil der XHTML-Struktur wird abgefangen.
Experimentieren wir damit, was passiert, wenn wir <span class="span_n">Spitznamen festlegen:</span> in <label class="span_n" for="txtNickName">Spitznamen festlegen:</label> ändern.
Wenn Sie mit der Maus auf „Spitznamen festlegen“ klicken, wird das Texteingabefeld mit dem ID-Namen „txtNickName“ automatisch in den Fokus gerückt. Die Definition der Beschriftung selbst besteht darin, eine Beschriftung (Markierung) für das Steuerelement zu definieren (http://www. w3school.com.cn/tags/tag_label.asp), alle Mainstream-Browser haben grundsätzlich die gleiche Unterstützung für Label. Das Label-Label selbst ist ein sehr ausgereiftes interaktives Control ist sehr effektiv für Sprachsteuerungsvorgänge. Auch eine sehr gute Erfahrung.
Das Gleiche gilt für Dangdang.com. Die Produktliste auf der Homepage ist immer noch ein kleiner Teil des XHTML-Codes
Der abgefangene Code ist der Preisteil. Lassen Sie uns unabhängig von der Benennung der Klasse experimentieren, wenn wir „span class="del grey s10""¥94.00 "/span" in "del class="del grey s10" date=" ändern. „cite=““》¥94.00《/del》《ins》¥46.00《/ins》, es gibt keine visuelle Veränderung, aber wenn wir nackt auf der Seite herumlaufen.
Die Ergebnisse liegen auf der Hand. Als Front-End-Mitarbeiter müssen wir auch berücksichtigen, dass die Internetgeschwindigkeit des Benutzers möglicherweise zu langsam ist (vielleicht verwendet er Thunder BT), was dazu führt, dass CSS nicht geladen werden kann, und auch die Situation des Mobiltelefons Benutzer, und wählen Sie die entsprechenden Tags aus. Sie müssen lediglich einige Grundkenntnisse in HTML hinzufügen. Versuchen Sie, den Inhalt in WORD 2007 zu kopieren.
Es gibt auch die Bedeutung des Alt-Attributs des Abbr-Tags und des IMG-Tags für Screenreader. Da die Bedingungen dies nicht zulassen, kann ich es nicht persönlich erleben. Auf der anderen Seite der Küste gibt es bereits so etwas wie Abschnitt 508 Schützen Sie Menschen mit Behinderungen davor, von Regierungswebsites herabgewürdigt zu werden.
3. Entwicklungseffizienz
Die semantische Webseitenstruktur hat erhebliche Auswirkungen auf die frühe Entwicklung und die spätere Fehlerbehebung. Insbesondere ähnelt sie dem folgenden einfachen Produktlistencode.
Durch „semantische“ Tags werden die „Hooks“ in der Produktliste angereichert. Durch Hinzufügen von ID- und Klassennamen zur übergeordneten Ebene kann die globale Leistung in der Produktliste gesteuert werden. Bei Stiländerungen können Änderungen vermieden werden Die Webseitenstruktur durch Back-End-Entwickler senken und Arbeitskosten einsparen. Angesichts der unterschiedlichen Anforderungen von Produkten und Chefs ist es jedoch immer noch unrealistisch, den Stil vollständig zu ändern Bei Bedarf und Fehlern ist es am besten, in der frühen Entwicklungsphase sinnvollerweise „Hooks“ für die Seite zu reservieren, um spätere Änderungen und Verwendung zu erleichtern. Zu diesem Zeitpunkt sind umfangreiche semantische Tags durchaus praktisch.
Für die Teamzusammenarbeit können semantische ID und Klassenbenennung die Struktur für alle im Team klar machen. Stellen Sie sich einfach vor, dass eine Beschriftung mit einer Klasse von Rot aufgrund geänderter Anforderungen in Blau geändert wird, und Sie können verstehen, warum eine semantische Benennung erforderlich ist.
In den vergangenen Diskussionen über Rasterisierung und Frameworks haben wir dazu geführt, dass wir über Namenskonventionen nachgedacht haben. Das Folgende ist nur eine Diskussion über Benennungsmethoden und berücksichtigt nicht den Einfluss anderer Faktoren Ich denke, die meisten von ihnen waren, als sie zum ersten Mal damit in Berührung kamen, bei dieser Art der Benennung, wie „Bereich_01“, „Layout_01“ usw., weil sie das noch nie erlebt hatten Die Größe der Projekte, die das Team derzeit übernimmt, ist daher nicht sicher, ob diese Methode geeignet ist, aber eines ist sicher: Dies erhöht die Lernkosten für neue Leute, und für die zukünftige Entwicklung denke ich, dass diese Methode geeignet ist Schließlich ist es auch wünschenswert, auf lange Sicht die Entwicklung des Teams zu verbessern und Konflikte zu reduzieren. Dies ist meiner Meinung nach nur eine persönliche Angelegenheit Vermutung, und ich hoffe, dass sie in Zukunft bestätigt werden kann.
4. Industriestandards
Es gibt tausend Hamlets für tausend Leute. Ebenso können tausend Frontends tausend Seiten mit der gleichen Leistung, aber unterschiedlichen Strukturen schreiben. Durch CSS können wir mit allen Aspekten herumspielen Der Grund dafür ist einerseits die fehlende Semantik der HTML-Tags. Die neuen Tags in HTML5 lösen diesen Teil des Problems Der weitere Grund ist meiner Meinung nach die Gleichgültigkeit des Autors gegenüber den Grundlagen von HTML, wie Gui Ge sagte: „Ein Laie schaut auf die Tür, und ein Experte schaut auf die Aufregung.“ Wenn Sie in dieser Branche etwas bewirken möchten, ist Spezialisierung ein Muss. Das heißt, wenn Sie sich nicht als Entwicklung bezeichnen, besteht kein Grund, über das Thema „Semantisierung“ zu diskutieren.
Das Ziel der „Semantisierung“ ist die Erreichung einheitlicher Standards. Das Internet der Zukunft „muss ein offenes Internet sein Eine bewährte Vorgehensweise, offene Schnittstellen und gemeinsame Inhalte werden im Folgenden ausführlich besprochen.
Semantische Praxis
In den obigen Inhalten wurden die meisten praktischen Inhalte eingestreut, und hier ist eine zusammenfassende Einführung.
1.Dokumentenstruktur
Der einfachste Weg zur „Semantisierung“ besteht darin, mit der Struktur zu beginnen, die Tags auszuwählen, die am besten zur Bedeutung des Inhalts passen, den „Authoritative Guide to HTML and XHTML“ noch einmal durchzulesen und mehr über die Bedeutung des Inhalts nachzudenken statt nur Urteile auf der Grundlage der Seitendarstellungen fällen. Um eine vernünftige Semantik zu verfolgen, müssen wir uns oft für eine solche Situation entscheiden, die nicht so einfach zu implementieren ist. Ich denke, dass dies auch das Gewissen eines Front-End-Mitarbeiters über WEB-Standards ist und dass Realazy ein sehr tiefes Verständnis davon hat, wie man ausgewogene Entscheidungen trifft /29/Ingenieur vs. Wissenschaftler/).
In der Vorproduktionsphase können Sie auch die zukünftige Situation berücksichtigen und anhand der Inhaltssemantik Hooks für die Seite reservieren. Natürlich sollten spezifische Probleme im Detail analysiert werden, je nach Projektanforderungen sollte die Entwicklung flexibel und anpassungsfähig sein, z. B. für Werbe-Sonderseiten, da der Bedarf an späteren Anpassungen unter der Grundvoraussetzung der Erfüllung nicht groß ist Benutzerfreundlichkeit und Zugänglichkeit sollten bei der Entwicklung übernommen werden. Der Schwerpunkt liegt auf der Wiederherstellung der Wirkung des Designentwurfs. Für die Wirkung großer Websites gelten jedoch offensichtlich andere Anforderungen.
2. Benennungsregeln
Von Zeit zu Zeit tauchen im Internet Standardbenennungsschemata auf. Das allgemeine Prinzip besteht darin, die Benennung entsprechend der Bedeutung des Inhalts vorzunehmen. Die Vorteile der semantischen Benennung liegen auf der Hand.
Wenn Sie die Position der Seitenleiste ändern möchten, müssen Sie nur das CSS ändern, ohne die Webseitenstruktur zu ändern. Für häufig vorkommende Seitenmodule empfehle ich persönlich, während des Entwicklungsprozesses nach und nach eine eigene Namenskonvention zu entwickeln, z. B. Kopf-/Fußzeile /main/hd/bd /nav/box/mode usw. verwenden Sie Bindestriche „-“ oder Kamelbuchstaben, um komplexere Namen zu bilden, wie z. B. site-nav/quick-menu/secondaryContent/.
Aber zurück zur spezifischen Situation: Verschiedene Projekte sollten auch die Benennungsmethode entsprechend der spezifischen Situation wählen. Große Websites wie Taobao eignen sich besser für die Verwendung einer Kombination aus Rasterisierung und semantischer Benennung. Für die Seitenstiländerung können entsprechende Anpassungen schnell und flexibel vorgenommen werden. Für die meisten einzelnen Seiten des Deklarationstyps empfehle ich die Verwendung einer strukturierten Benennung. Anstatt zu viel Zeit damit zu verbringen, über die Namensgebung nachzudenken,
3. Mikroformate
Mikroformat ist eine neue Methode zum Einbetten strukturierter Daten in Standard-XHTML-Code. Einfach ausgedrückt verwendet es eine Reihe etablierter Klassenbenennungsstandards, um den Inhalt des Dokuments zu deklarieren. Das Verständnis der meisten Menschen für Mikroformate beginnt mit hCard. Hier ist ein einfaches hCard-Beispiel (http://www.oppenheim.com.au/). Dies ist die hCard, die James Oppenheim auf die Fußzeile angewendet hat.
Darunter werden alle Klassennamen für vcard url fn Vorname Vorname ADR Ort Region zum Formatieren von Mikroformaten generiert. Beachten Sie auch, dass mehrere Span-Tags hinzugefügt werden, um Klassennamen hinzuzufügen. Welche Bedeutung haben Mikroformate? Über das Operator-Plugin für Firefox habe ich meine Visitenkarte aus meinem Lebenslauf exportiert (http://adriancheng.name/resume.html).
Ich kann das exportierte VCF als Kontaktinformationen in verschiedene E-Mail-Clients importieren oder es in das Adressbuch im Mobiltelefon importieren (http://tommyfan.com/blog/skill/add_phone_from_hcard/). Dies ist über das Mikroformat zu erkennen Standardmäßig ist es für verschiedene Clients möglich, Daten in Webseiten zu verarbeiten. Natürlich haben Mikroformate eine breitere Vision Besuchen Sie http://microformats.org/. Erfahren Sie mehr.
Abschluss
Die Praxis der „Semantisierung“ ist zwar der grundlegendste Teil des Front-Ends, wurde jedoch aus verschiedenen Gründen missverstanden oder ignoriert und erhielt nicht die Aufmerksamkeit, die sie verdient Ich hoffe, dass dieser Artikel alle Leser zum Nachdenken über WEB-Standards anregen kann.