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
Seite: Stellt dar Die gesamte Seite wird für die äußerste Ebene verwendet.
wrapper: Mantel, ein peripheres Paket, das alle Elemente zusammenwickelt und für die äußerste Schicht verwendet wird
wrapper: Seitenperipherie steuert die gesamte Layoutbreite , wird für die äußerste Schicht verwendet
Container: ein Gesamtcontainer, der für die äußerste Schicht verwendet wird
Kopf, Kopfzeile: Kopfbereich, verwendet für Kopfzeile
nav: Navigationsleiste
Inhalt: Inhalt, der wichtigste Inhaltsbereich auf der Website, der für den mittleren Teil des Webs verwendet wird Seite
Hauptbereich: der Hauptbereich auf der Website (mit Angabe der wichtigsten Position), der für den zentralen Hauptinhalt verwendet wird
Spalte: Spalte
Seitenleiste: Seitenleiste
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
- nav, navbar, navigation, nav-wrapper: Navigationsleiste oder Navigationspaket, das die horizontale Navigation darstellt
- topnav: obere Navigation
- mainbav: Hauptnavigation
- Unternavigation: Unternavigation
- Seitenleiste: Seitennavigation
- linke Seitenleiste oder Seitenleiste_a: links Navigation
- rightsidebar oder sidebar_b: rechte Navigation
- title: title
- summary: summary/ li>
- Menü: Menü. Bereich enthält allgemeine Links und Menüs
- Untermenü: Untermenü
- Drop: Dropdown
- dorpmenu: Dropdown-Menü
- Links: Link-Menü
Funktionsbenennung
- Logo: Markieren Sie die Website-Logo-Markierung
- Banner: Slogan, Werbebanner, Top-Werbebanner
- Login: Login, ( wie Anmeldeformular: Formular-Anmeldung)
- Anmeldeleiste: Anmeldeleiste
- Registrierung: Registrierung
- Werkzeug, Symbolleiste: Symbolleiste
- Suche: Suche
- Suchleiste: Suchleiste
- Sucheingabe: Sucheingabefeld
- Shop: Band, das den aktuellen
- 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-
CSS-Stilbenennung
Ausrichtungsstilbenennung: links (linker Inhalt), zentriert (mittlerer Inhalt), rechts (rechter Inhalt). ) ), usw.;
Englische Benennung von Farben: rot (rot), grün (grün), gelb (gelb) oder border_red (roter Rand) usw.; >
- Farbcode-Benennung: f00 (rot), ff0 (gelb), f90 (orange) usw.;
- Textgrößenbenennung: Schriftart 12px ( Schriftart 12 Pixel), Schriftart 16 Pixel ( Schriftart 16 Pixel) usw.;
- Seitenzeilenbenennung: line_x (horizontale Linie), line_y (vertikale Linie) oder line_red (rote Linie), line_black (schwarze Linie)
- Benennung der Bildsymbole: pic_1.jpg, pic_2.jpg oder ico_1.gif, ico_2.gif
- Benennung der Seitenanzeige : ad_01, ad_02
- 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
- index.css: Erstellen Sie einen separaten Stil für die Homepage
- head.css: Kopfzeilenstil, mehrseitiges Kopfzeilendesign. Wird verwendet, wenn die Stile gleich sind.
- base.css: gemeinsamer Stil.
- style.css: Stildatei, die von unabhängigen Seiten verwendet wird.
- global.css: Seitenstilbasis, globaler öffentlicher Stil, muss in die Seite eingebunden werden.
- layout.css: Layout, Layoutstil, wird verwendet, wenn es viele gängige Typen gibt, im Allgemeinen in Homepage-Seiten und Produktseiten
- Modul .css: Modul, das für Produktseiten verwendet wird und auch in Verbindung mit anderen Stilen verwendet werden kann.
- master.css: Haupt-Stylesheet
- columns.css: Spaltenstile
- Themen .css: Körperstil
- forms.css: Formularstil
- 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