PHP-Grundlagenstudiennotizen (1)-PHP-Tutorial-php.cn

Was ist ein Formular? - Ein Formular ist keine Tabelle.

Einige HTML-Elemente, in denen Benutzer bestimmte Daten, Informationen oder Optionen bereitstellen können. Das Formular verfügt in der Regel über einen „Senden“-Button, der diese Daten/Informationen/Optionen dann einem Programm auf dem Server zur Nutzung – Datenverarbeitung – zur Verfügung stellen kann.

——Der Kern des Formulars sind Daten.

Die Zusammensetzung und Form von Formular-Tags:

Was sind die Formularelemente?

Einzeiliges Textfeld:

Andere Attribute:

Wert: Legen Sie den Anfangstext

fest

Größe: Legen Sie die Breite des Eingabefelds fest (Einheit ist „Zeichenbreite“) – diese Anzahl an Zeichen kann darin platziert werden

maxlength: Legen Sie die maximale Anzahl von Zeichen fest, die in dieses Eingabefeld eingegeben werden können

readonly: Dies ist ein „no value“-Attribut, was „readonly“ bedeutet. Die Schreibmethode ist: readonly="readonly"

Deaktivieren: Setzen Sie das Eingabefeld auf „ungültig“, dh die Daten sind ungültig.

Passwortfeld:

Andere Attribute:

Wert: Legen Sie den Anfangstext

fest

Größe: Legen Sie die Breite des Eingabefelds fest (Einheit ist „Zeichenbreite“) – diese Anzahl an Zeichen kann darin platziert werden

maxlength: Legen Sie die maximale Anzahl von Zeichen fest, die in dieses Eingabefeld eingegeben werden können

Einzelne Option:

Andere Attribute:

aktiviert: Zeigt an, dass die Option standardmäßig ausgewählt ist. Es ist auch ein „wertloses Attribut“

Besondere Anweisungen für den Namen: Eine Gruppe von Einzeloptionen erfordert, dass der Namenswert gleich sein muss.

Mehrere Optionen:

Erklärung: Mehrere Optionen müssen normalerweise einen Wert haben;

Andere Attribute:

aktiviert: Zeigt an, dass die Option standardmäßig ausgewählt ist. Es ist auch ein „wertloses Attribut“

Schaltfläche „Senden“:

Erläuterung: Klicken Sie auf die Schaltfläche „Senden“, dann wird das Formular „gesendet“, dh die Daten werden in die vom Formular festgelegte Datei übergeben.

Bildschaltfläche:

Beschreibung: Die Funktion der Bildschaltfläche ist eigentlich „Senden“, aber der Effekt, den sie zeigt, ist ein Bild – dies trägt zur Verschönerung der Seite bei.

Schaltfläche „Zurücksetzen“:

Erklärung: Die Daten, die von allen Benutzern des Formulars bis zum Ausgangszustand ausgefüllt oder ausgewählt werden

Gewöhnliche Schaltfläche:

Erklärung: Es hat keine Auswirkungen auf das Formular, es können jedoch „Aktionen“ daraus generiert werden, um andere Anforderungen zu erfüllen (js-Programm)

Dateifeld:

Erläuterung: Der Benutzer kann die lokale Datei auswählen (und an den Server senden) – die Datei enthält auch Daten.

Verstecktes Feld:

Erklärung: Die Schnittstelle ist nicht sichtbar, wird aber als „Hidden Data“-S-Programm an den Server übermittelt.

Dropdown-Auswahl: Verwenden Sie dazu die Tags „select“ und „option“. Behandeln Sie dies jedoch als „ein Formularelement“

& lt; option value = "2" select = "selectd" & gt; text 2 & lt;/option & gt;

Erklärung:

Das ausgewählte Attribut kann im Option-Tag verwendet werden, um das standardmäßig ausgewählte Element des Auswahlelements anzugeben (das erste Element ist standardmäßig ausgewählt).

Sie können das Attribut „multiple“ im Select-Tag verwenden, sodass das Select-Element „mehrere auswählen“ kann (d. h. standardmäßig nur eines ausgewählt werden kann)

Mehrzeilige Optionen (auch Listenoptionen genannt): Mehrzeilige Optionen sind eigentlich nur eine „Verformung“ der Dropdown-Auswahl – wenn ihr Größenwert auf größer oder gleich eingestellt wird, werden mehrere Zeilen erstellt.

Mehrzeiliges Textfeld:

Erklärung:

Die zeilenweise festgelegte Anzahl der Zeilen ist eine Zahl, die die Anzahl der Textzeilen angibt, die im mehrzeiligen Textfeld angezeigt werden können

Die durch cols festgelegte Anzahl der Spalten ist eine Zahl, die die Anzahl der Textzeilen angibt, die im mehrzeiligen Textfeld angezeigt werden können

Dieses Tag hat kein Wertattribut. Aber sein eigentlicher „Wert“ ist das, was in der Mitte dieses Tags steht.

Hinweis: Alle Formularelemente müssen ein Namensattribut haben, um ihren „Namen“ anzugeben – der Server ruft die Daten basierend auf diesem Namen ab.

Frame-Tag

Das erste Konzept: Wir zeigen immer nur eine Webseite in einem geöffneten „Fenster“ an.

Aber:

Wir können tatsächlich mehrere Webseiten in einem Fenster öffnen. Tatsächlich besteht das Wesentliche darin, dass ein Fenster eine Webseite anzeigt. Wir werden jedoch einige spezifische Tags (Frameset) verwenden, um ein „großes Fenster“ in mehrere „kleine Fenster“ zu unterteilen ".

Lassen Sie uns zunächst klarstellen:

1: Wenn Sie ein Frame-Tag (Frameset) verwenden, können Sie kein Body-Tag verwenden – das heißt, das Body-Tag verwendet das Frameset-Tag anstelle von

2. Bei Verwendung des Frameset-Tags müssen Sie den Frameset-Dokumenttyp

verwenden

Der spezifische Segmentierungscode lautet wie folgt:

& lt; Frameset Cols = „Stellt das aktuelle Fenster entsprechend den Spalten ein“ rows = „um das aktuelle Fenster entsprechend der Zeile festzulegen“ & gt;

. . . . . . . . . . . .

Der Wert von cols ist eine fortlaufende Zahl oder ein Prozentsatz, der die Breite der Spalte darstellt, getrennt durch (,), wobei das „*“-Zeichen die Breite des „Rests“ darstellt. Zum Beispiel:

cols="100,800" : Gibt an, dass das große Fenster durch Spalten in zwei kleine Fenster unterteilt wird, wobei das erste 100 breit und das zweite 800 breit ist

cols=“100,200,*“: Gibt an, dass das große Fenster durch Spalten in drei kleine Fenster unterteilt ist, das erste ist 100 breit, das zweite ist 200 breit und der Rest wird an das dritte übergeben

cols=“15%, *“

Der Wert von Zeilen ist eine fortlaufende Zahl oder ein Prozentsatz, der die Breite der Zeile darstellt, getrennt durch (,), wobei das „*“-Zeichen die Breite des „Rests“ darstellt. Zum Beispiel:

rows=“100,200,*“

row=“20%, *“

Hinweis: Ein Frameset kann nur in eine Richtung (Spalte oder Zeile) geteilt werden

Einführung in CSS

CSS: Cascading Style Sheet

CSS ermöglicht es uns, das Erscheinungsbild der Webseite unter den folgenden zwei Aspekten zu steuern:

1. Kontrollieren Sie das Erscheinungsbild von Webseiten in Stapeln, sodass wir Arbeit sparen können.

2. Steuern Sie das Erscheinungsbild von Webseiten präzise: bis auf Pixelebene.

Grundlegende Syntaxform von CSS:

Selektor { CSS-Attributname 1: Wert 1; CSS-Attributname 2: Wert 2;

Beispiel:

font{color:red;font-weight:bold;font-size:18px;}

dt{

Schriftgröße:14px;

font-weight:bold;

Farbe: rosa;

}

Ein Argument zur Unterscheidung zweier Attribute

HTML-Attribut: im Tag geschrieben, in der Form: Attributname = „Attributwert“ – dieses Anführungszeichen kann weggelassen werden, es wird jedoch empfohlen, es nicht wegzulassen

——Es kann auch „Label-Attribut“ genannt werden

——HTML-Attribute sind normalerweise „die eigenen Attribute jedes Tags, die im Allgemeinen unterschiedlich sind“

——Es gibt nur sehr wenige Tags, die dasselbe HTML-Attribut verwenden

CSS-Attribut: in geschweiften Klammern des Selektors geschrieben, in der Form: Attributname: Attributwert – achten Sie besonders darauf, dass der Wert nicht in Anführungszeichen gesetzt werden kann

——Es kann auch „Stilattribut“ genannt werden

——CSS-Eigenschaften sind normalerweise „für alle Tags verfügbar“, die im Allgemeinen gleich sind

——Es gibt nur sehr wenige Tags, die nicht dieselben CSS-Attribute verwenden

Auswahlkategorien

Tag-Auswahl:

Format: Tag-Name { …….. }

Bedeutung: Bezieht sich auf (entsprechend) allen Tags auf der Webseite, auf die die Attributeinstellungen angewendet werden.

Klassenauswahl:

Form: .Klassenname { …… }

Bedeutung: Diese Attributeinstellung gilt für alle Tags, die auf die Klasse auf der Webseite verweisen (entsprechen) und deren Wert der Klassenname ist.

Beispiel:

ID-Auswahl:

Format:

Bedeutung: Das Tag, das auf die ID auf der Webseite mit dem Wert dieses Namens verweist (entspricht), soll diese Attributeinstellung anwenden.

Hinweis: Normalerweise sollten die ID-Namen auf einer Webseite nicht identisch sein, da die ID selbst „einzigartig“ bedeutet.

Beispiel:

Universeller Selektor:

Form: *{ ….. } ——Der universelle Selektor hat nur diese Form (Symbol)

Bedeutung: Es bezieht sich automatisch auf „alle Tags“, d. h. alle Tags wenden diese Attributeinstellung an

Hinweis: Verwenden Sie universelle Selektoren mit Vorsicht. Sie werden normalerweise nur zum Festlegen einiger grundlegender Eigenschaften wie Textfarbe, Textgröße, Abstand und Rand verwendet.

Pseudoklassenselektor:

Form: :Pseudo-Klassenname {……}

Hinweis: Es gibt tatsächlich nur wenige Pseudoklassennamen, die im System festgelegt und nicht von uns definiert wurden, wie zum Beispiel: Link, Visited, Hover, Active. Ihre Bedeutung ist ebenfalls spezifisch. Normalerweise werden die oben genannten Pseudoklassen nur für Tags verwendet und ihre Form und Bedeutung sind normalerweise:

a:link{……}: Zeigt den Status eines Link-Tags an, wenn die Webseite zum ersten Mal geöffnet wird (anfänglicher Linkstatus)

a:visited{…..} ：表示一个a链接标签在点击（访问）过之后的时候的状态（访问后状态）

a:hover{….} ：表示一个a链接标签在鼠标放上去的时候的状态（悬停状态）

a:active{….} ：表示一个a链接标签在鼠标摁住但还没有抬起的状态（活动状态）。

不过，最新的浏览器中，出于安全考虑，a的hover和visited效果有些属性不能用了。

复合选择器之：层级选择器

形式：选择器1 选择器2 { ……… }

含义：在选择器1所对应的标签中由选择器2所对应的那些标签。。。。。其中，选择器1和选择器2可以是前面所学的任意某种选择器，而且这种层级关系还可以多层次，比如：

#d1 div{…}

.cc1 p span{…..}

p .cc2 img{…..}

#d1 p a:hover{….}

举例：

段落1

Zusammengesetzter Selektor: Gruppenselektor

Formular: Selektor 1, Selektor 2 { ……… }

Bedeutung: Dies bedeutet, dass beide Selektoren dieselben Attributeinstellungen verwenden. Tatsächlich handelt es sich lediglich um eine Möglichkeit, vereinfachten Code zu schreiben, andernfalls müssen sie zum Schreiben zwei Selektoren verwenden.

.a {color:red; font-size:15px;}

.b{ color:red; font-size:15px;}

.a, .b{ color:red; font-size:15px;}

Andere zusammengesetzte Formen (Beispiele):

div.cc1{…}: Stellt ein div-Tag mit dem Klassenwert cc1 dar, das sich völlig von div .cc1{…} unterscheidet.

p#d1{…} : Stellt das p-Tag mit dem ID-Wert d1 dar, aber diese Form wird nicht empfohlen (sie hat wenig Bedeutung).

Rahmen:

Frame-Tags sind eine Technik, mit der das „aktuelle Fenster“ in kleinere Fenster unterteilt wird. framseset ersetzt das Body-Tag und verwendet den Frame-Dokumenttyp.

& lt; Frameset Rows = „Division“ COLS = „Spaltenbreite Division“ & gt;

& lt; frame src = „Die Webadresse in der ersten kleinen Fenster-URL“ border = „0“ scrolling = „no“ /& gt;

. . . . . .

Grundlegende CSS-Konzepte:

CSS wird für einen solchen Zweck verwendet: um bestimmte (einige) Eigenschaften eines bestimmten (einigen) Tags (Elements) auf der Webseite auf einen bestimmten (einigen) Wert zu setzen.

Das grundlegende Syntaxmuster von CSS ist:

Selektor { CSS-Attribut 1: Wert 1; CSS-Attribut 2: Wert 2;………… }

Der sogenannte Selektor ist eigentlich eine grammatikalische Form, die einem oder mehreren bestimmten Tags auf der Webseite zugeordnet werden kann.

CSS-Selektorklassifizierung:

Tag-Auswahl:

Ein englisches Wort {….}

Das sogenannte englische Wort ist eigentlich ein Tag-Name, der existieren sollte

Klassenselektor (Klassenselektor)

& lt; p class = "Klassenname 1" align = "center" & gt;

& lt; img src = "A picture path" width = "100" class = "class name 2" /& gt;

durch

ID-Selektor:

& lt; input type = "text" name = "name" class = "class name 3" ID = "ID name" /& gt;

Besonderer Hinweis: Titel, Klasse und ID sind das, was wir „universelle Attribute“ nennen – das heißt, jeder kann sie verwenden.

Universeller Selektor:

*{….}

Pseudoklassenselektor:

a:link{…}

a:visited{…}

a:hover{. . . }

a:aktiv{….}

Hinweis: Die oben genannten vier Pseudoklassen müssen in der oben genannten Reihenfolge geschrieben werden, wenn sie für Tags verwendet werden.

Darüber hinaus wird es in praktischen Anwendungen oft vereinfacht wie folgt:

a{……}

a:hover{….}

Die Bedeutung ist: Eine Verbindungsbezeichnung ist nur in „Mouse-Up-Zustand“ und „Andere Zustände“ unterteilt

Ebenenauswahl:

Selektor 1 Selektor 2{. . . . . ｝

Gruppenauswahl:

Selektor 1, Selektor 2{. . . . . ｝

Stilattribute von Textabsätzen

Farbe: Legen Sie die Farbe des Textes in einer Beschriftung fest. Der Farbwert kann englische Wörter, Hexadezimalsyntax und RGB-Syntax verwenden:

Farbe: rot; Farbe: #f0fcf8; Farbe:rgb(123, 88, 205);

Schriftgröße: Legen Sie die Textgröße fest, normalerweise in Pixel (Pixel) – die Textgröße allgemeiner kommerzieller Websites beträgt normalerweise 12 Pixel.

Schriftstärke: Legen Sie fest, ob der Text fett (fett) oder nicht fett (normal) sein soll.

Schriftstil: Legen Sie den Text kursiv (kursiv) oder nicht kursiv (normal) fest

Schriftfamilie: Legen Sie den Schriftartnamen des Textes fest. Sie können mehrere Schriftarten verwenden, die durch Kommas getrennt sind. Die Bedeutung ist: Verwenden Sie zuerst die erste Schriftart Schriftartenname. Zwei usw. Beispiel:

Schriftfamilie: Song Dynasty, Imitation Song Dynasty, Microsoft Yahei, Arial, „Times New Roman“;

Zeilenhöhe: Legen Sie die Zeilenhöhe des Textes fest. Die Einheit ist normalerweise px, was die Höhe des von einer Textzeile eingenommenen Raums ist – die Zeilenhöhe ist nicht die Höhe des Textes.

Buchstabenabstand: Legen Sie den Abstand zwischen Zeichen (oder Buchstaben) fest. Chinesisch ist eigentlich der Abstand von „Wörtern“.

Wortabstand: Legen Sie den Abstand zwischen Wörtern fest – normalerweise nur gültig für westliche lateinische Zeichen.

text-align: Legt die horizontale Ausrichtung des Textes fest. Seine Funktion entspricht dem align-Attribut im label-Attribut. Aber bitte beachten Sie: align wird als HTML-Attribut eigentlich nur in bestimmten Tags verwendet, text-align kann jedoch in fast allen Tags verwendet werden.

text-indent: Legen Sie den Einzugsabstand der ersten Zeile in einem Absatz fest. Die Einheit ist normalerweise px.

Textdekoration: Legen Sie die „Änderungslinie“ des Textes fest: unterstrichen, durchgestrichen, überstrichen, keine

vertikal ausrichten: Legen Sie die vertikale Ausrichtung des Texts in einem Tabellenfeld (Zelle) fest: oben (obere Ausrichtung), mittig (mittlere Ausrichtung), unten (untere Ausrichtung)

Vorläufiges Boxmodell

Box ist das wichtigste Konzept in CSS.

Box

Legen Sie zunächst ein Konzept fest: Bei fast allen Etiketten handelt es sich eigentlich um eine Box – und die sogenannte Box ist nichts anderes als eine „rechteckige Fläche“. Tatsächlich ist die sogenannte Webseite nichts anderes als eine Box innerhalb einer Box.

Eine Box setzt sich aus folgenden Bereichen (Strukturen) zusammen:

Rand: ein linearer Bereich, der eine durchgezogene Linie oder eine gepunktete Linie oder andere Formen sein kann.

Rand: wird auch „Rand“ genannt, ein leerer Bereich außerhalb der Grenzlinie, was bedeutet, dass „Objekte nicht platziert werden können“

Polsterung: Auch „Polsterung“ genannt, ein leerer Bereich innerhalb der Grenzlinie, was auch „Objekte können nicht platziert werden“ bedeutet

Inhaltsbereich (kein entsprechender CSS-Attributname): Bezieht sich auf den Bereich in einer Box, in dem „Objekte“ platziert werden können – also auf den Hauptbereich der Box. Die dort platzierten Objekte können gewöhnlicher Text oder andere Tags sein – entsprechend dem „Inhaltsteil“ in HTML, den wir zuvor gelernt haben. Der Inhaltsbereich kann normalerweise nur seine Breiten- und Höhenattribute (width, height) festlegen.

Die verschiedenen Komponenten einer Box sind in der folgenden Abbildung dargestellt:

Die Idee der „Trennung von Inhalt und Leistung“ im Webdesign

Wir haben schon früher etwas über HTML gelernt und gesagt, dass Tags die Funktion haben, „Bedeutungen auszudrücken“. Tatsächlich kann man auch sagen, dass Inhalt und Leistung miteinander vermischt sind.

Jetzt:

Die CSS-Technologie kann tatsächlich die Leistung jedes Tags auf einer Webseite „herausziehen“ und an einer bestimmten Stelle (z. B. dem Style-Tag) platzieren, und die verbleibenden Teile (Tags und Textinhalt usw.) werden zusammengefasst mit dem Namen „Struktur/Inhalt“. Dieser Ansatz wird „die Idee der Trennung von Inhalt und Leistung“ genannt

Zwei Ausgangszustände der Box (Grundleistung):

Eine Box ähnlich div: Eine Box „belegt automatisch eine Zeile“ (unabhängig von ihrem internen Inhalt): Dies ist eine „Blockbox“ (Blockelement). Häufig verwendete Blockboxen:

p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,

Funktionen: Sie können feste Breite und Höhe, Rand, Abstand usw. festlegen

Ähnlich wie bei einer Span-Box: Der Inhalt einer Box wird in einer Zeile neben ähnlichen Boxen angezeigt, sofern die Zeile nicht voll ist, und wird auf natürliche Weise in die nächste Zeile verschoben – ähnlich den Leistungsmerkmalen von Text. : Dies ist eine Inline-Box (Inline-Element). Inline-Boxen enthalten normalerweise „endgültige Dateninhalte“ wie Text und Bilder. Andere Inline-Boxen:

b, strong, font, i, u, a, img, input, textarea, select,

Eigenschaften: Die Breite und Höhe können nicht eingestellt werden, werden aber durch den Inhalt „unterstützt“. Rand und Polsterung haben keine obere und untere Leistung.

Normalerweise sind Inline-Boxen „kleine Boxen“ und Block-Boxen „große Boxen“,

Vorläufiges Layout (Prinzip)

Das sogenannte Layout bezieht sich eigentlich darauf, den Webinhalt auf eine bestimmte Art und Weise an der richtigen Stelle zu platzieren.

Grundlegende Schritte für das Layout:

1. Teilen Sie die „aktuelle Seite“ optisch übersichtlich in mehrere Blöcke auf. Es gibt nur zwei Möglichkeiten zur Aufteilung:

a) Oben-unten-Struktur: Zu diesem Zeitpunkt handelt es sich, solange Sie ein paar Felder verwenden, natürlich um eine Oben-unten-Struktur ohne weitere Einstellungen.

b) Linke und rechte Struktur: Zu diesem Zeitpunkt werden mehrere Boxen verwendet und entsprechend verschoben. Der übliche Modus:

durch

Floating Erklärung:

Schweben ist wie Blasen im Wasser, sie werden „online schweben“

Eine anschaulichere Metapher: Alle (alle Tags) sind „auf dem Boden gefliest“ und nehmen jeweils einen bestimmten Bereich ein, aber die schwebenden Elemente „schweben“ zur Decke und nehmen nicht den üblichen „Bodenbereich“ aller ein. .

Abgesehen davon, dass es keinen Platz mit anderen Elementen einnimmt, besteht seine wichtigste Eigenschaft (d. h. der Zerstörungseffekt) darin, dass es dazu führt, dass die übergeordnete Box ihre angemessene Höhe verliert – die übergeordnete Box kann ihre schwebenden Elemente nicht mehr enthalten. In der Box! Dies ist im Layout grundsätzlich nicht erlaubt! Dann müssen wir zusätzliche Methoden verwenden, um eine angemessene Inklusion zu erreichen – die übergeordnete Box umschließt die untergeordnete Box. Es gibt drei Möglichkeiten, die richtige effektive Höhe der Mutterbox zu ermitteln:

1. Legen Sie eine feste Höhe für die übergeordnete Box fest – normalerweise, wenn die Höhe während des Entwurfs bekannt ist und sich nicht ändert.

2. Fügen Sie wie folgt ein leeres Feld hinzu, um den Float am Ende des übergeordneten Felds zu löschen:

３, Legen Sie ein CSS-Attribut für die übergeordnete Box fest: overflow:hidden;

Die beste Zusammenfassung ist: Das Layout muss links und rechts angeordnet sein, die linke und rechte Anordnung muss schwebend sein und der schwebende Effekt muss korrigiert werden – lassen Sie die übergeordnete Box ihre untergeordneten Boxen angemessen umschließen.

Das Obige stellt die grundlegenden PHP-Lernnotizen (1) vor, einschließlich der relevanten Inhalte. Ich hoffe, dass es für Freunde hilfreich ist, die sich für PHP-Tutorials interessieren.