Heim >Web-Frontend >js-Tutorial >Front-End-Interviewfragen, die HTML-Neulinge kennen müssen

Front-End-Interviewfragen, die HTML-Neulinge kennen müssen

php中世界最好的语言Original: 2018-05-24 13:46:321134Durchsuche

HTML

Semantisierung

Die Semantik des HTML-Tags bedeutet: durch die Verwendung semantischer Tags (wie h1-h6) stellen die Dokumentstruktur angemessen dar
Die Semantik der CSS-Benennung bedeutet: Hinzufügen sinnvoller Klassen zu HTML-Tags
Warum Semantik ist erforderlich:

Nach dem Entfernen des Stils präsentiert die Seite eine klare Struktur
Blinde Menschen nutzen Screenreader mehr. Gute Lektüre
Suchmaschinen können die Seite besser verstehen, was der Inklusion förderlich ist
Erleichterung des nachhaltigen Betriebs und der Aufrechterhaltung von Teamprojekten

Beschreiben Sie kurz Ihr Verständnis der HTML-Semantik?

Machen Sie das Richtige mit den richtigen Tags.
HTML-Semantik strukturiert den Inhalt der Seite und macht ihn klarer, sodass er für Browser und Suchmaschinen einfacher zu analysieren ist
Auch wenn Es gibt keine gestalteten CSS-Fälle, die auch im Dokumentformat angezeigt werden und leicht zu lesen sind.
Erleichtern Sie den Leuten, die den Quellcode lesen, die Unterteilung der Website in Abschnitte einfaches Lesen, Warten und Verstehen
Doctype-Funktion? Was ist der Unterschied zwischen Standardmodus und Kompatibilitätsmodus? Die

-Deklaration befindet sich in der ersten Zeile des

-Tag . Teilt dem Parser des Browsers mit, welcher Dokumentstandard zum Parsen dieses Dokuments verwendet werden soll.
Nichtvorhandenes oder falsches Format führt dazu, dass das Dokument im Kompatibilitätsmodus gerendert wird<!DOCTYPE>于HTML<html>DOCTYPEDie Formatierung und der JS-Betriebsmodus des Standardmodus werden mit dem höchsten vom Browser unterstützten Standard ausgeführt. Im Kompatibilitätsmodus werden Seiten lose abwärtskompatibel angezeigt, wodurch das Verhalten älterer Browser simuliert wird, um zu verhindern, dass die Website nicht funktioniert
HTML5 Warum einfach < schreiben? DOCTYPE HTML>?

HTML5 basiert nicht auf SGML, daher besteht keine Notwendigkeit, auf die DTD zu verweisen, aber ein Doctype ist erforderlich, um das Browserverhalten zu regulieren (Browser so laufen zu lassen, wie sie sollten)

Und HTML4.01 basiert auf SGML, daher muss es auf die DTD verweisen, um dem Browser den vom Dokument verwendeten Dokumenttyp mitzuteilen
Was ist der Unterschied zwischen der Verwendung von Link und @import beim Importieren von Stilen auf einer Seite?

gehört zum

kann es auch zum Definieren von
und zum Definieren von link-Verbindungen verwendet werden Attribute usw.; und XHTML wird von CSS bereitgestellt und kann nur zum Laden der Seite RSSrel@importCSSCSS verwendet werden gleichzeitig geladen werden, und das
, auf das
link@importCSS wird von
vorgeschlagen und kann nur geladen werden oben erkannt
ein
Tag ist, keine KompatibilitätsproblemeimportCSS2.1IE5linkXHTMLWas sind die gängigen Browserkerne?

Kernel:

, Sogou-Browser usw. [Auch bekannt als MSHTML]

TridentIE,MaxThon,TT,The World,360 Kernel:
und höher,
GeckoNetscape6FF,MozillaSuite/SeaMonkey Kernel :
und höher. [
;]
PrestoOpera7OperaBlinkKernel:
usw. [
(ein Zweig von
)]WebkitSafari,ChromeChromeBlinkWebKitWas 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 über einen langen Zeitraum und die Daten gehen nach dem Schließen des Browsers nicht verloren.
SessionStorage-Daten werden nach dem automatischen Löschen gelöscht Browser ist geschlossen
Inhaltselemente mit besserer Semantik, wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt
Formularsteuerelemente, Kalender, Datum , Zeit, E-Mail, URL, Suche
Neue Technologie Webworker, Websocket, Geolocation

Entfernte Elemente:

Rein ausdrucksstarke Elemente: Basefont, Big, Center, Font, s, Strike, tt, u
Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken: Frame, Frameset , noframes

Unterstützt neue HTML5-Tags:

IE8/IE7/IE6-Unterstützung generiert durch document.createElement-Methoden-Tags
Mit dieser Funktion können Sie dafür sorgen, dass diese Browser neue HTML5-Tags unterstützen.
Nachdem der Browser das neue Tag unterstützt, müssen Sie es noch hinzufügen der Tag-Standard Der Stil von

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
Lokale Offline-Speicherung, lokale Speicherung, Langzeitspeicherung von Daten, der Browser wird geschlossen. Die Daten gehen nicht verloren, nachdem
Die Sitzungsspeicherdaten werden nach dem Schließen des Browsers automatisch gelöscht
Inhalt Elemente mit besserer Semantik, wie Artikel und Fußzeile, Kopfzeile, Navigation, Abschnitt
Formularsteuerung, Kalender, Datum, Uhrzeit, E-Mail, URL, Suche
neue Technologie Webworker, Websocket, Geolocation

Entfernte Elemente:

Rein ausdrucksstarke Elemente: Basisschrift, big, center, font, s, Strike, tt, u
Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken: Frame, Frameset, Noframes

Unterstützt neue HTML5-Tags:

IE8/IE7/IE6 unterstützt Tags, die von der document.createElement-Methode generiert werden
Sie können verwenden Mit dieser Funktion können Sie diese Tags erstellen. Der Browser unterstützt neue HTML5-Tags
Nachdem der Browser das neue Tag unterstützt, müssen Sie noch den Standardstil des Tags hinzufügen

Natürlich können Sie direkt ausgereifte Frameworks wie html5shim verwenden

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->

Wie man HTML5 unterscheidet: DOCTYPE deklariert neue Strukturelemente und Funktionselemente

Wie verwende ich den HTML5-Offline-Speicher? Können Sie das Funktionsprinzip erklären?

Wenn der Benutzer nicht mit dem Internet verbunden ist, kann auf die Website oder Anwendung normal zugegriffen werden. Wenn der Benutzer mit dem Internet verbunden ist, wird die Cache-Datei auf dem Computer des Benutzers angezeigt wird aktualisiert
Prinzip: Die HTML5-Offline-Speicherung basiert auf dem Caching-Mechanismus (nicht der Speichertechnologie) einer neu erstellten .appcache-Datei. Ressourcen werden offline über die Parsing-Liste dieser Datei gespeichert. und diese Ressourcen werden wie Cookies gespeichert. Später, wenn das Netzwerk offline ist, zeigt der Browser die Seite anhand der offline gespeicherten Daten an
Verwendung:

Fügen Sie dem Seitenkopf ein Manifest-Attribut hinzu, wie unten gezeigt;
Offline-Speicherressourcen in die Datei „cache.manifest“ schreiben
Wenn Sie offline sind, bedienen Sie das Fenster .applicationCache zur Umsetzung von Anforderungen

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

Wie verwaltet und lädt der Browser HTML5-Offline-Speicherressourcen?

Wenn der Browser online ist, stellt er fest, dass der HTML-Header das Manifest-Attribut hat, und fordert die Manifestdatei an. Wenn es das erste Mal ist, dass auf die App zugegriffen wird Der Browser lädt den Inhalt der Manifestdatei die entsprechenden Ressourcen herunter und speichert sie offline. Wenn auf die App zugegriffen wurde und die Ressourcen offline gespeichert wurden, verwendet der Browser die Offline-Ressourcen zum Laden der Seite und vergleicht dann die neue Manifestdatei mit der alten Manifestdatei. Wenn sich die Datei nicht geändert hat, nein Der Vorgang wird ausgeführt. Wenn sich die Datei ändert, werden die Ressourcen in der Datei erneut heruntergeladen und offline gespeichert.
Im Offline-Modus nutzt der Browser direkt offline gespeicherte Ressourcen

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

Cookies sind Daten (normalerweise verschlüsselt), die von der Website auf dem lokalen Terminal des Benutzers (Client-Seite) gespeichert werden, um die Identität des Benutzers zu identifizieren
Cookie-Daten werden in der HTTP-Anfrage immer vom selben Ursprung übertragen (auch wenn sie nicht benötigt werden) und zwischen dem Browser und dem Server hin und her weitergeleitet
sessionStorage und localStorage senden Daten nicht automatisch an den Server und speichern sie nur lokal
Speichergröße:

cookieDie Datengröße darf 4 KB nicht überschreiten
sessionStorage und localStorage, obwohl sie auch Speichergrößenbeschränkungen haben, sind viel größer als Cookies und können 5 MB oder mehr erreichen

Ablaufzeit:

localStorage Speichert persistente Daten. Die Daten gehen nach dem Schließen des Browsers nicht verloren, es sei denn die Daten werden aktiv gelöscht
sessionStorageDaten werden automatisch gelöscht, nachdem das aktuelle Browserfenster geschlossen wird
cookieDer Satz cookie Ablaufzeit gilt bis zur Ablaufzeit, auch wenn das Fenster oder der Browser geschlossen ist

Was sind die Vor- und Nachteile von iframe?

Nachteile:
iframe blockiert das Onload-Ereignis der Hauptseite
Das Suchprogramm der Suchmaschine kann diese Art von Seite nicht interpretieren, was der Suchmaschinenoptimierung nicht förderlich ist
iframe und die Hauptseite teilen sich den Verbindungspool und Der Browser hat Einschränkungen für Verbindungen in derselben Domäne. Daher wirkt sich dies auf das parallele Laden der Seite aus.
Sie müssen diese beiden Mängel berücksichtigen, bevor Sie iframe verwenden. Wenn Sie iframe verwenden müssen, verwenden Sie am besten <a href="http://www.php.cn/wiki/48.html" target="_blank">Javascript<code><a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a> Code> Fügt den Attributwert iframe dynamisch zu src hinzu, wodurch die beiden oben genannten Probleme umgangen werden können
Vorteile:

Wird zum Laden langsamerer Inhalte (z. B. Anzeigen) verwendet
kann das parallele Herunterladen des Skripts ermöglichen
kann Erreichen Sie abonnementübergreifende Domain-Kommunikation

Welche Rolle spielt Label? Wie wird es verwendet?

Label-Tag zum Definieren der Beziehung zwischen Formularsteuerelementen. Wenn der Benutzer die Beschriftung auswählt, richtet der Browser den Fokus automatisch auf das mit der Beschriftung verknüpfte Formularsteuerelement

Wie deaktiviere ich die Funktion Automatische Vervollständigung im HTML5-Formular?

Automatische Vervollständigung für Formulare oder Eingaben deaktivieren, die keine Eingabeaufforderungen erfordern.

Wie implementiert man die Kommunikation zwischen mehreren Registerkarten im Browser? (Alibaba)

WebSocket, SharedWorker
Sie können auch lokale Speichermethoden wie Localstorge und Cookies aufrufen

Wie ist webSocket mit Low-End-Browsern kompatibel? (Ali)

Adobe Flash Socket,
ActiveX HTMLFile (IE),
Sende XHR basierend auf mehrteiliger Kodierung,
XHR basierend auf langer Abfrage

Seite Sichtbarkeit Was Für welche Zwecke können APIs verwendet werden?

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

map+area或者svg
border-radius
纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<p style="height:1px;overflow:hidden;background:red"></p>

如何实现浏览器内多个标签页之间的通信？

iframe + contentWindow
postMessage
SharedWorker(Web Worker API)
storage 事件(localStorge API)
WebSocket

webSocket 如何兼容低浏览器？

Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title 表示是整个页面标题，h1 则表示层次明确的标题，对页面信息的抓取有很大的影响
strong 标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong 会重读，而 b 是展示强调内容
i内容展示为斜体，em 表示强调的文本
自然样式标签：b, i, u, s, pre
语义样式标签：strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用。如果不能确定时，首选使用自然样式标签

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen