HTML\CSS-standardisierte Namensliste

In einer HTML-Seite mit viel Inhalt ist es notwendig, viele verschiedene Frames zu entwerfen, diese verschiedenen Frames und Inhalte dann zu klassifizieren und ihnen entsprechende Namen zu geben, um die Struktur der Webseite klarer zu machen und Komfort zu bieten für die Arbeit. 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 sie 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, Kopf: Kopfbereich, verwendet für Kopfzeile

6. nav: Navigationsleiste

7. Inhalt: Inhalt, der wichtigste Inhaltsbereich auf der Website, der für den Mittelteil 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

Label: Marke
Startseite: Homepage
Unterseite: Sekundärseite-Unterseite
heiß : Beliebte Hotspots
Liste: Artikelliste, (zum Beispiel Nachrichtenliste: list-news)
scrollen: scrollen
Tab: Tag
Sitemap: Website-Karte
Nachricht oder Nachricht: Aufforderungsnachricht
aktuell: aktuell
beitreten: beitreten
Status: Status
btn: Schaltfläche, (die Suchschaltfläche kann beispielsweise geschrieben werden als: btn-search)
Tipps: Tipps
Hinweis: Hinweis
Gilde: Führer
arr, Pfeil: Markierungspfeil
Service: Service
Breadcrumb: (d. h. die Navigationsaufforderung des Seitenstandorts)
Download: Download
Abstimmung: Abstimmung
Siteinfo: Website-Informationen
Partner: Partner
Link, Friendlink: freundlicher Link
Copyright: Copyright-Informationen
SiteinfoCredits: Ruf
SiteinfoLegal: legal Informationen

Benennung im CSS-Stil

1. Benennung im Ausrichtungsstil: 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 vonHTMLCSS-standardisierte Namensliste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!