Testfragen zum PHP-Chinesisch-Online-Work-Frontend (HTML5/CSS3).

Referenzantworten auf Front-End-Testfragen (HTML5/CSS3)

● Jede Frage hat 5 Punkte, insgesamt 20 Fragen, Gesamtpunktzahl 100

● Wählen Sie die Fragen aus, es werden keine Punkte abgezogen, wenn Sie etwas falsch machen, Sie erhalten +10 Punkte

Beeilen Sie sich und sehen Sie, wie weit Sie den Test schaffen!

1. HTML5-Teil

1.1 Was sind die häufig verwendeten Struktur-Tags in HTML5 und welche Tags werden vorher ersetzt? 🎜>

● , , , , , ,

● , , ,...

1.2 HTML-Dokumente werden codiert Was sind die Vorteile des Satzes in UTF-8? ● Im Vergleich zu herkömmlichem gb2312, gbk Than, gibt es mehr anerkannte Zeichensätze und wird auch von der Industrie empfohlen

1.3 Was sind die vier am häufigsten verwendeten Attribute in Tags

● ID, Klasse, Titel, Stil

● Diese vier Attribute sind in fast jedem HTML-Tag vorhanden, und Sie müssen besonders darauf achten

1.4 Was ist das Unterschied zwischen den Title- und Alt-Attributen im Tag

● Titel: Es handelt sich um die Beschreibung des Labels. Wenn die Maus hinein bewegt wird, werden diese Beschreibungsinformationen in einem Moment angezeigt

● alt: Wird für ersetzbare Elemente verwendet. Wenn externe Ressourcen nicht korrekt geladen werden können, werden diese Informationen auf dem Platzhalter angezeigt

1.5 Was ist der Unterschied zwischen den href- und src-Attributen im Tag

● Beides sind Verweise auf externe Ressourcen

● href: wird für Hypertext oder Stil verwendet, verwendet für -Tags ● src: Wird für externe Ressourcen-Platzhalter-Tags wie , , , ... verwendet.

1.6 Was sind Ersatzelemente und Nicht-Ersatzelemente? ? Geben Sie für jeden Typ mindestens zwei Fälle an

● Der Inhalt des Ersetzungselements kommt von außen. Dieses Element ist nur ein Platzhalter für externe Ressourcen, wie z. B. , ...

● Nicht-ersetzend Der Elementinhalt stammt aus dem aktuellen Dokument und muss doppelte Tags verwenden, z. B. , , ...

1.7 Was ist die Hauptfunktion des iframe-Tags, welche Vor- und Nachteile hat es?

● Vorteile: Die aktuelle Seite wird geladen andere Seiten direkt, ohne zu springen

● Nachteile: Der Inhalt im Frame wird von Suchmaschinen nicht gelesen und erhöht zu viele HTTP-Anfragen, was sich auf die Ladegeschwindigkeit der Seite auswirkt

1.8 Was ist der Unterschied zwischen dem Namensattribut im -Tag und dem Namen im Formularsteuerelement, z. B.

● Das Namensattribut in als ID und dient zur eindeutigen Identifizierung des Etiketts

● Das Namensattribut im Formularsteuerelement wird dem Server bereitgestellt. Die Endanwendung liest den Variablennamen der Formulardaten

1.9 Welche Arten von Schaltflächen gibt es im Formular und welche Bezeichnungen werden am häufigsten verwendet?

● Es gibt drei Arten von Schaltflächen: Normale Schaltfläche, Senden-Schaltfläche, Zurücksetzen-Schaltfläche

● , ,

1.10 Kann ungeordnete Listen und Geordnete Listen ersetzen sich gegenseitig und welche Attribute werden verwendet?

● POST: Formulardaten werden über den Anfragetext gesendet

● GET: Formulardaten werden über die URL-Adressleiste gesendet

2 Teil

2.1 Was sind die Verwendungsszenarien von externen Stylesheets, internen Stylesheets und Inline-Style-Deklarationen

● Externes Stylesheet: gilt auf alle HTML-Dokumente, die auf dieses CSS verweisen

● Internes Stylesheet: gilt nur für das aktuelle HTML-Dokument ● Inline-Stylesheet: gilt nur für das aktuelle HTML-Element 2.1 Wozu dient die @import-Direktive, wo sollte sie verwendet werden und welche Einschränkungen gibt es?

● Darf nur in CSS-Dokumenten verwendet werden

● Muss sich in der ersten Zeile des CSS-Dokuments befinden

2.3 Was sind Elemente auf Blockebene, Inline-Elemente, Inline-Blockelemente und Beispiele?

● Blockebene Elemente: Vertikale Standardanordnung, z. B. , , ... ● Inline-Elemente: Horizontale Standardanordnung, z. B. , , &lt ;input> ...

2.4 Es gibt mehrere einfache Selektoren, schreiben Sie die grundlegende Syntaxform

● Element: body {...} ● ID: #active {...}

● Klasse: .red {...}

● Attribut: [title]

● Gruppe: h1, h2 ,h3 {...} ● Platzhalter: div * {...}

2.5 Es gibt verschiedene Arten von Struktur-(Kontext-)Selektoren und Beispiele werden bereitgestellt

● Nachkommen: Hauptdiv {...}

● Untergeordnete Elemente: Abschnitt > span {...}

● Nebengeordnete Elemente: Div + p {...}

● Alle auf der gleichen Ebene: div ~ p {...}

2.6 :nth-child(n) und :nth-of-type (n )

● :nth-child(n): Nur mit Position verknüpft

● :nth-of-type(n): Sowohl mit Position als auch mit Typ verknüpft

2.7: Verwendungsregeln für Parameter n in nth-child(n) und :nth-of-type(n)

● Wird in Literalen verwendet, beginnend mit 1, wie zum Beispiel: :nth-child( 3)

● wird in Ausdrücken verwendet, die bei 0 beginnen, wie zum Beispiel: :nth-child(2n+1)

● Negative Werte sind zulässig

2.8 Welche Probleme löst FlexBox beim Layout in CSS und wo eignet es sich am besten?

● Es löst die Probleme der vertikalen Ausrichtung von Elementen im traditionellen Layout und im responsiven Layout

● Wird hauptsächlich für das geräteübergreifende Seitenlayout verwendet und eignet sich besonders für reaktionsfähige Geräte wie mobile Endgeräte

2.9 Gemeinsame Werte des Flex-Attributs elastischer Elemente, was sind die entsprechenden Wertekombinationen und einzeln erklärt

● initial,auto, content, value

● Standardwert: Flex: 0 1 Auto

● Flex: Flex-Grow Flex- Shrink Flex-Basis

● Verschiedene Kombinationen, wie z. B. Flex: 1 1 Auto; entspricht: Flex: Auto,...

2,10 vh/vw Einheit, 100 % konsistent mit auto Was ist der Unterschied? 100 %: Selbsterkenntnis der übergeordneten Containergröße

2.11 (optional) Warum align-content nur in mehrzeiligen flexiblen Containern verwendet werden kann

● Einzeilig Container, Querachse Sie können das Attribut align-items verwenden, um

festzulegen. Weitere Interviewfragen finden Sie unter: „ Zusammenfassung der großen Front-End-Interviewfragen 2019 (Sammlung) “