Heim  >  Artikel  >  Web-Frontend  >  Einführung in HTML+CSS-Benennungsregeln

Einführung in HTML+CSS-Benennungsregeln

零下一度
零下一度Original
2017-07-23 13:21:521690Durchsuche

HTML+CSS-Benennungsregeln

In einer HTML-Seite mit viel Inhalt ist es notwendig, viele verschiedene Frames zu entwerfen und diese verschiedenen Frames und Inhalte dann zu klassifizieren und zu geben entsprechenden Namen, wodurch die Struktur der Webseite übersichtlicher wird und die Arbeit erleichtert wird. Wenn viele unerfahrene Freunde eine HTML-Datei entwerfen, geben sie möglicherweise nur einige einfache Namen an, die auf ihren eigenen Ideen basieren. Wenn sie jedoch blind zufällige Namen vergeben, wird dies für die Teammitglieder nicht nur schwierig, sondern führt auch zu verwirrenden Bezeichnungen Dies macht die Codepflege sehr schwierig und für das Management sehr ungünstig. Daher sollten wir beim Entwerfen der gesamten Website oder einer separaten HTML-Seite gute Namensregeln haben. In diesem Artikel erklären wir hauptsächlich die CSS-Benennungsregeln, zu denen auch die Benennung von HTML-Tags gehört.

Der Dateiname muss mit einem englischen Buchstaben beginnen. Die übliche Benennungsregel besteht darin, ihn in englische Wörter zu übersetzen und diese entsprechend der Klassifizierung des Inhalts und der Art des Rahmens zu benennen „nav“ (bedeutet, dass dieses Div eine Navigationsleiste ist), alle Wörter sollten in Kleinbuchstaben geschrieben sein, und im Namen können Zahlen oder Unterstriche verwendet werden, zum Beispiel: div="main_piclist" (stellt die Bilderliste unter dem Hauptinhalt dar). ), div="nav_bg.jpg" (stellt das Hintergrundbild der Navigationsleiste dar) , Sie können auch den Bindestrich verwenden, um die Namen zu verbinden, zum Beispiel: div="main-left" (zeigt das Layout des Inhalts auf der an (links) Bei allen Namen sollte versucht werden, die Verwendung chinesischer Schriftzeichen zu vermeiden und möglichst wenige Buchstaben zu verwenden, um eine möglichst einfache Verständlichkeit zu erreichen. Versuchen Sie, sie nicht abzukürzen, es sei denn, die Bedeutung ist auf den ersten Blick leicht zu verstehen.

HTML-Tag-Benennung/CSS-standardisierte Benennungsliste

Benennung der Seitenstruktur

  1. Seite: Stellt dar Die gesamte Seite wird für die äußerste Ebene verwendet.

  2. wrapper: Mantel, ein peripheres Paket, das alle Elemente zusammenwickelt und für die äußerste Schicht verwendet wird

  3. wrapper: Seitenperipherie steuert die gesamte Layoutbreite , wird für die äußerste Schicht verwendet

  4. Container: ein Gesamtcontainer, der für die äußerste Schicht verwendet wird

  5. Kopf, Kopfzeile: Kopfbereich, verwendet für Kopfzeile

  6. nav: Navigationsleiste

  7. Inhalt: Inhalt, der wichtigste Inhaltsbereich auf der Website, der für den mittleren Teil des Webs verwendet wird Seite

  8. Hauptbereich: der Hauptbereich auf der Website (mit Angabe der wichtigsten Position), der für den zentralen Hauptinhalt verwendet wird

  9. Spalte: Spalte

  10. Seitenleiste: Seitenleiste

  11. Fuß, Fußzeile: Fußzeile, Fußzeile. Einige zusätzliche Informationsplatzierungsbereiche auf der Website (oder mit dem Namen Copyright) werden unten

Navigation mit dem Namen

  1. nav, navbar, navigation, nav-wrapper: Navigationsleiste oder Navigationspaket, das die horizontale Navigation darstellt

  2. topnav: obere Navigation

  3. mainbav: Hauptnavigation

  4. Unternavigation: Unternavigation

  5. Seitenleiste: Seitennavigation

  6. linke Seitenleiste oder Seitenleiste_a: links Navigation

  7. rightsidebar oder sidebar_b: rechte Navigation

  8. title: title

  9. summary: summary/ li>

  10. Menü: Menü. Bereich enthält allgemeine Links und Menüs

  11. Untermenü: Untermenü

  12. Drop: Dropdown

  13. dorpmenu: Dropdown-Menü

  14. Links: Link-Menü

Funktionsbenennung

  1. Logo: Markieren Sie die Website-Logo-Markierung

  2. Banner: Slogan, Werbebanner, Top-Werbebanner

  3. Login: Login, ( wie Anmeldeformular: Formular-Anmeldung)

  4. Anmeldeleiste: Anmeldeleiste

  5. Registrierung: Registrierung

  6. Werkzeug, Symbolleiste: Symbolleiste

  7. Suche: Suche

  8. Suchleiste: Suchleiste

  9. Sucheingabe: Sucheingabefeld

  10. Shop: Band, das den aktuellen

  11. Symbol: kleines Symbol

  12. Label: Marke
  13. Startseite: Homepage
  14. Unterseite: Sekundärseite-Unterseite
  15. heiß : Beliebte Hotspots
  16. Liste: Artikelliste, (zum Beispiel Nachrichtenliste: list-news)
  17. scrollen: scrollen
  18. Tab: Tag
  19. Sitemap: Website-Karte
  20. Nachricht oder Nachricht: Aufforderungsnachricht
  21. aktuell: aktuell
  22. beitreten: beitreten
  23. Status: Status
  24. btn: Schaltfläche, (die Suchschaltfläche kann beispielsweise geschrieben werden als: btn-search)
  25. Tipps: Tipps
  26. Hinweis: Hinweis
  27. Gilde: Führer
  28. arr, Pfeil: Markierungspfeil
  29. Service: Service
  30. Breadcrumb: (d. h. die Navigationsaufforderung des Seitenstandorts)
  31. Download: Download
  32. Abstimmung: Abstimmung
  33. Siteinfo: Website-Informationen
  34. Partner: Partner
  35. Link, Friendlink: freundlicher Link
  36. Copyright: Copyright-Informationen
  37. SiteinfoCredits: Ruf
  38. SiteinfoLegal: legal Informationen

CSS-Stilbenennung

  1. Ausrichtungsstilbenennung: links (linker Inhalt), zentriert (mittlerer Inhalt), rechts (rechter Inhalt). ) ), usw.;

  2. Englische Benennung von Farben: rot (rot), grün (grün), gelb (gelb) oder border_red (roter Rand) usw.; >

  3. Farbcode-Benennung: f00 (rot), ff0 (gelb), f90 (orange) usw.;

  4. Textgrößenbenennung: Schriftart 12px ( Schriftart 12 Pixel), Schriftart 16 Pixel ( Schriftart 16 Pixel) usw.;

  5. Seitenzeilenbenennung: line_x (horizontale Linie), line_y (vertikale Linie) oder line_red (rote Linie), line_black (schwarze Linie)

  6. Benennung der Bildsymbole: pic_1.jpg, pic_2.jpg oder ico_1.gif, ico_2.gif

  7. Benennung der Seitenanzeige : ad_01, ad_02

  8. Benennung des Hintergrundrahmens: nav_bg (repräsentiert die Position des Hintergrundbilds der Navigationsleiste), tool_bg (repräsentiert die Position des Hintergrundbilds der Symbolleiste)

CSS-Stylesheet-Benennung

  1. index.css: Erstellen Sie einen separaten Stil für die Homepage

  2. head.css: Kopfzeilenstil, mehrseitiges Kopfzeilendesign. Wird verwendet, wenn die Stile gleich sind.

  3. base.css: gemeinsamer Stil.

  4. style.css: Stildatei, die von unabhängigen Seiten verwendet wird.

  5. global.css: Seitenstilbasis, globaler öffentlicher Stil, muss in die Seite eingebunden werden.

  6. layout.css: Layout, Layoutstil, wird verwendet, wenn es viele gängige Typen gibt, im Allgemeinen in Homepage-Seiten und Produktseiten

  7. Modul .css: Modul, das für Produktseiten verwendet wird und auch in Verbindung mit anderen Stilen verwendet werden kann.

  8. master.css: Haupt-Stylesheet

  9. columns.css: Spaltenstile

  10. Themen .css: Körperstil

  11. forms.css: Formularstil

  12. mend.css: Patch, privatisierter Patch basierend auf dem oben genannten Stil.

Das obige ist der detaillierte Inhalt vonEinführung in HTML+CSS-Benennungsregeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn