[Muss für die Front-End-Jobsuche gelesen werden] Ausgewählte Fragen und Antworten zu Front-End-Entwicklungsinterviews_HTML-Fragen und Antworten zum chinesischen PHP-Netzwerk

HTML

Welche Rolle spielt Doctype? Wie unterscheidet man zwischen striktem Modus und gemischtem Modus? Was bedeuten sie?

(1), <!DOCTYPE> befindet sich zuerst im Dokument, vor dem <html> Teilen Sie dem Parser des Browsers mit, welche Dokumenttypspezifikation zum Parsen dieses Dokuments verwendet werden soll.

(2), Strict-Mode-Schriftsatz und JS-Betriebsmodus werden mit dem höchsten vom Browser unterstützten Standard ausgeführt.

(3) Im gemischten Modus wird die Seite lose abwärtskompatibel angezeigt. Emuliert das Verhalten älterer Browser, um zu verhindern, dass die Website nicht funktioniert.

(4), DOCTYPE existiert nicht oder das Format ist falsch, was dazu führt, dass das Dokument im gemischten Modus angezeigt wird.

Was sind die Inline-Elemente? Was sind Elemente auf Blockebene? Was sind die Leereelemente?

(1) CSS-Spezifikationen legen fest, dass jedes Element ein Anzeigeattribut hat, das den Typ des Elements bestimmt.

Der Standardanzeigeattributwert von div ist beispielsweise „block“. „Block Level“-Element;
Der Standard-Anzeigeattributwert von span ist „inline“, was ein „inline“-Element ist.

(2) Zu den Inline-Elementen gehören: a b span img input select strong (Hervorhebungston)
Zu den Elementen auf Blockebene gehören: div ul ol li dl dt dd h1 h2 h3 h4…p

(3) Bekannte leere Elemente:
<br> <img> ; <param> <track>Was ist der Unterschied zwischen

link?

(1) Der Link gehört zum XHTML-Tag und @import wird von CSS bereitgestellt.

(2) Wenn die Seite geladen wird, wird gleichzeitig der Link geladen und das von @import referenzierte CSS wartet bis die Seite vor dem Laden geladen wird;

(3) Der Import kann nur in IE5 oder höher erkannt werden und der Link ist ein XHTML-Tag, daher gibt es kein Kompatibilitätsproblem

(4) Die Gewichtung des Linkstils ist; höher als das Gewicht von @import.

Browser-Kernel sind unterschiedlich. Was ist das?

* Der Kernel des IE-Browsers Trident, Mozillas Gecko, Chromes Blink (ein Zweig von WebKit) und der Opera-Kernel waren ursprünglich Presto und jetzt blinken;

Häufige Kompatibilitätsprobleme?

* PNG24-Bit-Bilder werden in iE6-Browsern als Hintergründe angezeigt. Die Lösung besteht darin, sie in PNG8 umzuwandeln.

* Der Standardrand und die Abstände der Browser sind unterschiedlich. Die Lösung besteht darin, zur Vereinheitlichung ein globales *{margin:0;padding:0;} hinzuzufügen.

* IE6-Fehler mit doppeltem Rand: Nachdem die Blockattributbezeichnung schwebend ist und horizontale Ränder vorhanden sind, ist der in IE6 angezeigte Rand größer als der eingestellte Wert.

Doppelter Abstand, der durch Floating IE erzeugt wird. #box{ float:left:0 0 0 10px;}

In diesem Fall generiert IE einen Abstand von 20 Pixeln Fügen Sie --_display:inline; zum Steuerelement hinzu, um es in ein Inline-Attribut umzuwandeln. (_Dieses Symbol kann nur von ie6 erkannt werden)

Die Methode der schrittweisen Erkennung schließt nach und nach Teile aus dem Ganzen aus.

Zunächst einmal trennt der geschickte Einsatz der „9“-Marke den IE-Browser von allen Situationen.
Als nächstes verwenden Sie erneut „+“, um IE8 von IE7 und IE6 zu trennen, sodass IE8 unabhängig erkannt wurde.

css
.bb{
background-color:#f1ee18;/*Alle Erkennung*/
.background-color:#00deff9; /*IE6, 7, 8 Erkennung*/
+background-color:#a200ff;/ *IE6, 7 Erkennung*/
_background-color:#1e0bd1;/*IE6 Erkennung*/
}

* Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, um benutzerdefinierte Attribute abzurufen.
Sie können auch getAttribute( ), um benutzerdefinierte Attribute abzurufen.
Unter Firefox können Sie nur getAttribute() verwenden, um benutzerdefinierte Attribute abzurufen.

* Unter IE hat das gerade Objekt x- und y-Attribute kein pageX-, pageY-Attribut;
Unter Firefox verfügt das Ereignisobjekt über pageX-, pageY-Attribute, aber keine x-, y-Attribute.

* Die chinesische Benutzeroberfläche von Chrome erzwingt, dass Text, der kleiner als 12 Pixel ist, standardmäßig als 12 Pixel angezeigt wird.
Dies kann durch Hinzufügen der CSS-Eigenschaft -webkit-text-size-adjust: none gelöst werden.

Der Hover-Stil wird danach nicht angezeigt Der angeklickte Hyperlink-Stil verfügt nicht mehr über Hover und Active. Die Lösung besteht darin, die Reihenfolge der CSS-Eigenschaften zu ändern:
L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

Was sind die neuen Funktionen von HTML5 und welche Elemente wurden entfernt? Wie gehe ich mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags um? Wie kann man zwischen HTML und HTML5 unterscheiden?

* HTML5 ist keine Teilmenge von SGML mehr, es geht hauptsächlich um das Hinzufügen von Bildern, Standort, Speicherung, Multitasking und anderen Funktionen.

* Malleinwand
Video- und Audioelemente für die Medienwiedergabe
Lokaler Offline-Speicher localStorage speichert Daten lange und die Daten gehen nach dem Schließen des Browsers nicht verloren
SessionStorage-Daten werden automatisch gelöscht, nachdem der Browser geschlossen wurde

Bessere Semantik Inhaltselemente wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt
Formularsteuerelemente, Kalender, Datum, Uhrzeit, E-Mail, URL, Suche
Neue Technologien Webworker, Websockt, Geolocation

* Entfernte Elemente

Reine Leistungselemente: Basefont, Big, Center, Font, s, Strike, TT, U;

Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken: Frame, Frameset, Noframes; die document.createElement-Methode,
Sie können diese Funktion verwenden, um diese Browser dazu zu bringen, neue HTML5-Tags zu unterstützen,

Nachdem der Browser die neuen Tags unterstützt, müssen Sie auch den Standardstil des Tags hinzufügen:

* Natürlich die Der beste Weg ist, ausgereifte Frameworks direkt zu verwenden. Am häufigsten wird das HTML5shim-Framework verwendet.

Wie unterscheidet man: DOCTYPE-Deklaration neue Strukturelemente und Funktionselemente

Semantisches Verständnis?

Verwenden Sie den richtigen Hashtag für das Richtige!
HTML-Semantik dient dazu, den Inhalt der Seite zu strukturieren, um die Analyse durch Browser und Suchmaschinen zu erleichtern.

Es wird auch in einem Dokumentformat ohne Stil-CCS angezeigt und ist leicht zu lesen.

Suchmaschinen-Crawler verlassen sich auf Tags, um den Kontext und die Gewichtung einzelner Schlüsselwörter zu bestimmen, was für SEO von Vorteil ist.

Machen Sie es Personen, die den Quellcode lesen, einfacher, die Website in Abschnitte zu unterteilen, um das Lesen, die Wartung und das Verständnis zu erleichtern.

HTML5-Offline-Speicher?

localStorage Langzeitspeicherung der Daten, die Daten gehen nach dem Schließen des Browsers nicht verloren;
sessionStorage-Daten werden nach dem Schließen des Browsers automatisch gelöscht.

(Schreiben) Sie einen HTML-Code, der die Semantik beschreibt.

(Viele neue Tags, die in HTML5 hinzugefügt wurden (z. B. <article>, <nav>, <header> und <footer> usw.)
basieren auf semantischen Designprinzipien)

< header ">

< h1>Title< /h1>

< h2>Fokus auf Web-Frontend-Technologie< /h2>

< /div>

Was sind die Nachteile von iframe?

*iframe blockiert das Onload-Ereignis der Hauptseite;

*iframe und die Hauptseite teilen sich den Verbindungspool und der Browser unterliegt Einschränkungen für Verbindungen in derselben Domäne, sodass dies Auswirkungen auf das parallele Laden der Seite hat.
Sie müssen diese beiden Nachteile berücksichtigen, bevor Sie iframe verwenden. Wenn Sie einen Iframe verwenden müssen, ist es am besten, den src-Attributwert dynamisch über Javascript zum Iframe hinzuzufügen, wodurch die beiden oben genannten Probleme umgangen werden können.

Bitte beschreiben Sie den Unterschied zwischen Cookies, SessionStorage und LocalStorage?

Cookies werden zwischen dem Browser und dem Server hin und her weitergeleitet. sessionStorage und localStorage haben keinen größeren Speicherplatz;

sessionStorage und localStorage verfügen über unabhängige Speicherplätze;