Zusammenfassung grundlegender HTML-Interviewfragen

In diesem Artikel werden hauptsächlich grundlegende Fragen und Antworten zu HTML-Interviews mit Ihnen geteilt, in der Hoffnung, Ihnen dabei zu helfen.

1 Was macht DOCTYPE? Wie unterscheidet man zwischen Standardmodus und gemischtem Modus? Was bedeuten sie?

teilt dem Browser mit, welche Version der HTML-Spezifikation zum Rendern des Dokuments verwendet werden soll. Ein fehlender oder falsch formatierter DOCTYPE führt dazu, dass das HTML-Dokument im Promiscuous-Modus gerendert wird.
Der Standardmodus wird mit dem höchsten vom Browser unterstützten Standard ausgeführt. Seiten im Quirks-Modus werden weniger abwärtskompatibel angezeigt.

2 Warum müssen Sie in HTML5 nur schreiben?

HTML5 basiert nicht auf SGML (Standard Generalized Markup Language), daher besteht keine Notwendigkeit, auf DTD (DTD Document Type Definition) zu verweisen, aber DOCTYPE wird benötigt, um das Browserverhalten zu standardisieren.

HTML4.01 basiert auf SGML, daher muss die DTD in Anführungszeichen gesetzt werden. Um dem Browser den vom Dokument verwendeten Dokumenttyp mitzuteilen, gehen Sie wie folgt vor:

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

Inline-Elemente: a span img input select
Elemente auf Blockebene: p ul ol li dl dt dd h1 p
Leere Elemente: <br> <hr> <link> <meta>

4 Beim Importieren von Stilen auf der Seite, verwenden Was ist der Unterschied zwischen Link und @import?

Die gleichen Orte sind alle externen Referenz-CSS-Methoden. Der Unterschied:

1. Link ist ein xhtml-Tag, das Sie auch definieren können RSS und andere Transaktionen; @import gehört zur CSS-Kategorie und kann nur CSS laden

2. Link Wenn der Link auf CSS verweist, wird er gleichzeitig geladen, wenn die Seite geladen wird. @import muss geladen werden, nachdem die Seite vollständig geladen ist, und @import ist Das referenzierte CSS wartet, bis die CSS-Datei, die darauf verweist, geladen ist, bevor es geladen wird

3. Link ist ein XHTML-Tag , keine Kompatibilitätsprobleme; @import wurde in CSS2.1, einer niedrigeren Version, vorgeschlagen. Der Browser unterstützt nicht die Verwendung von Javascript-Steuerung zum Ändern des Stils und @import unterstützt nicht

4. Link-Stil ist höher als Das Gewicht von @import

5. import erfordert bei Verwendung das

   -Tag html

6. <style type="text/css">

   5 Unstyled Content Flash (FOUC) Flash von Unstyle Content

@import Beim Importieren von CSS-Dateien wird mit dem Laden gewartet, bis das Dokument geladen ist das CSS-Stylesheet. Daher vergeht zwischen dem Abschluss des Seiten-DOM-Ladens und dem Abschluss des CSS-Imports eine Zeitspanne, und der Inhalt der Seite wird nicht formatiert. Lösung: Verwenden Sie das Link-Tag, um CSS-Stildateien zu laden. Da die Links nacheinander geladen werden, wartet die Seite, bis das CSS heruntergeladen wurde, bevor sie die HTML-Datei herunterlädt. Auf diese Weise wird das Layout zuerst erstellt und es tritt kein FOUC-Problem auf.

6 Bitte erläutern Sie Ihr Verständnis des Browserkerns.

Es ist hauptsächlich in zwei Teile unterteilt: Rendering-Engine (Layout Engine oder Rendering Engine) und JS-Engine. Rendering-Engine: Verantwortlich für den Erhalt des Inhalts der Webseite (HTML, XML, Bilder usw.), die Organisation der Informationen (z. B. Hinzufügen von CSS usw.) und die Berechnung der Anzeigemethode des Webs Seite ausdrucken und dann auf dem Monitor oder Drucker ausgeben. Unterschiedliche Browserkerne haben unterschiedliche grammatikalische Interpretationen von Webseiten, sodass auch die Rendering-Effekte unterschiedlich sind.

JS-Engine: Analysiert und führt Javascript aus, um dynamische Effekte auf Webseiten zu erzielen.

Am Anfang gab es keine klare Unterscheidung zwischen der Rendering-Engine und der JS-Engine. Später wurde die JS-Engine immer unabhängiger und der Kernel bezog sich tendenziell nur auf die Rendering-Engine.

7 Was sind die gängigen Browser-Kernel?

Trident(MSHTML): IE MaxThon TT The World 360 Sogou Browser

1. Geckos: Netscape6 und höher FireFox Mozilla Suite /SeaMonkey

2. Presto: Opera7 und höher (Opera-Kernel war ursprünglich: Presto, jetzt: Blink)

3. Webkit: Safari Chrome

4. 8 Was sind die neuen Funktionen von HTML5 und welche Elemente wurden entfernt? Wie gehe ich mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags um? So unterscheiden Sie zwischen HTML und HTML5

Neue Funktionen wie Bilder, Standort, Speicherung und Multitasking wurden hinzugefügt. Neue Elemente:

Leinwand

1. Video- und Audioelemente für die Medienwiedergabe

2. Lokaler Offline-Speicher. localStorage speichert Daten lange und die Daten gehen nach dem Schließen des Browsers nicht verloren. Die SessionStorage-Daten werden nach dem Schließen des Browsers automatisch gelöscht.

3. Inhaltselemente mit besserer Semantik, z als Artikel-Fußzeile, Kopfzeile, Navigationsbereich

4. Standort-API: Geolocation

5. Formularsteuerung, Kalender, Datum, Uhrzeit, E-Mail-URL-Suche

6. Neue Technologie: Web Worker (Web Worker ist JavaScript, das unabhängig von anderen Skripten im Hintergrund läuft und die Leistung der Seite nicht beeinträchtigt. Sie können weiterhin tun, was Sie wollen: klicken, Inhalte auswählen, usw., während der Web-Worker im Hintergrund läuft. Ausführen) Web-Socket

7. Drag-and-Drop-API: Drag-and-Drop

8. Entfernte Elemente:

Rein ausdrucksstarke Elemente: Basefont Big Center Font s Strike TT U

Elemente mit schlechter Leistung: Frame Frameset Noframes

Unterscheidung:

1. Die Art und Weise, wie DOCTYPE deklariert wird, ist wichtig für Faktoren unterscheiden

2. werden nach neu hinzugefügten Strukturen und Funktionen unterschieden

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

1. Das Entfernen oder Verlieren von Stilen kann der Seite eine klare Struktur verleihen.

2. Es ist hilfreich für SEO und Suchmaschinen, eine gute Kommunikation aufzubauen, und hilft Crawlern, mehr Informationen zu crawlen. Crawler verlassen sich auf Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen.

3. Bequem für andere Geräte zum Parsen.

4. Einfach für Teamentwicklung und -wartung, Semantik basierend auf Lesbarkeit.

10 Wie verwende ich die Offline-Speicherung von HTML5-Dateien und was ist das Funktionsprinzip?

Wenn der Browser online ist, stellt er fest, dass der HTML-Header das Manifest-Attribut hat, und fordert die Manifestdatei an. Beim ersten Besuch lädt der Browser die entsprechenden Ressourcen basierend auf dem Inhalt herunter der Manifestdatei und speichern Sie sie offline. Wenn darauf zugegriffen wurde und die Ressource offline gespeichert wurde, verwendet der Browser die Offline-Ressource, um die Seite zu laden. Der Browser vergleicht dann die neue Manifestdatei mit der alten Manifestdatei. Wenn sich die Datei nicht geändert hat, wird kein Vorgang ausgeführt. Wenn sich die Datei geändert hat, werden die Ressourcen in der Datei erneut heruntergeladen und offline gespeichert. Beispiel:

Manifest-Attribut zum Seitenkopf hinzufügen

<html manifest=&#39;cache.manifest&#39;>

Offline-Speicherressourcen in die Datei „cache.manifest“ schreiben

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

11 Cookies , Was ist der Unterschied zwischen sessionStorage und localStorage?

Was sie gemeinsam haben: Sie werden alle browserseitig gespeichert und haben den gleichen Ursprung.

Unterschied:

1. Cookies sind Daten, die auf dem lokalen Terminal des Benutzers gespeichert werden, um die Identität des Benutzers zu identifizieren. Sie werden immer in derselben Quell-HTTP-Anfrage übertragen Cookies werden im Browser gespeichert und an den Server weitergeleitet. Sessionstorage und Localstorage senden die Daten jedoch nicht automatisch an den Server, sondern speichern sie nur lokal.

2. Die Speichergrößenbeschränkungen variieren. Die vom Cookie gespeicherten Daten sind sehr klein und dürfen 4 KB nicht überschreiten, während die von Sessionstorage und Localstorage gespeicherten Daten groß sind und 5 MB erreichen können.

3. Die Gültigkeitsdauer der Daten ist unterschiedlich. Das Cookie bleibt bis zur eingestellten Cookie-Ablaufzeit gültig, auch wenn das Fenster oder der Browser geschlossen wird. Der Sitzungsspeicher ist nur gültig, bis das Browserfenster geschlossen wird. Localstorage ist für die langfristige Datenspeicherung immer gültig, auch wenn Fenster und Browser geschlossen sind.

4. Die Geltungsbereiche sind unterschiedlich. Cookies werden in allen homologen Fenstern geteilt; Sitzungsspeicher wird nicht in verschiedenen Browsern geteilt, auch nicht auf derselben Seite; lokaler Speicher wird in allen homologen Fenstern geteilt

12 iframe Was sind die Vorteile? und Nachteile?

Vorteile:

1. iframe kann die eingebettete Webseite intakt anzeigen.

2. Wenn mehrere Webseiten auf den Iframe verweisen, müssen Sie nur den Inhalt des Iframes ändern, um den Inhalt jeder aufgerufenen Seite zu ändern, was praktisch und schnell ist.

3. Wenn die Webseite zur Vereinheitlichung des Stils denselben Header und dieselbe Version hat, kann sie als Seite geschrieben und mit iframe verschachtelt werden, was die Wiederverwendbarkeit des Codes erhöhen kann.

4. Wenn Sie auf langsam ladende Inhalte von Drittanbietern wie Symbole und Anzeigen stoßen, können diese Probleme durch Iframes gelöst werden.

Nachteile:

1. Suchmaschinencrawler können diese Art von Seite nicht interpretieren

2. Rahmenstruktur Verschiedene Bildlaufleisten erscheinen in

3. Stellen Sie bei Verwendung der Rahmenstruktur sicher, dass die richtigen Navigationslinks eingestellt sind.

4. Iframe-Seite erhöht die HTTP-Anfrage des Servers

13 Welche Funktion hat das Label?

Die Beschriftungsbezeichnung wird verwendet, um die Beziehung zwischen Formularsteuerelementen zu definieren. Wenn der Benutzer die Beschriftung auswählt, richtet der Browser den Fokus automatisch auf das mit der Beschriftung verknüpfte Formularsteuerelement. Es gibt zwei Attribute in label, die sehr nützlich sind: FOR und ACCESSKEY.
FOR-Attributfunktion: Gibt das HTML-Element an, das an die Beschriftung gebunden werden soll. Wenn Sie auf diese Beschriftung klicken, erhält das gebundene Element den Fokus. Beispiel:

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY-Attributfunktion: Gibt den Hotkey für den Zugriff auf das an das Label-Tag gebundene Element an. Wenn Sie den Hotkey drücken, erhält das gebundene Element den Fokus. Beispiel:

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

14 Wie deaktiviere ich die Funktion zur automatischen Vervollständigung im HTML5-Formular?

Das HTML-Eingabefeld kann über eine automatische Vervollständigungsfunktion verfügen. Wenn Sie Inhalte in das Eingabefeld eingeben, findet der Browser unten ähnliche Inhalte aus dem Verlauf Ihrer vorherigen Eingabefelder Im Eingabefeld müssen Sie nicht alles eingeben, sondern wählen einfach die Elemente in der Liste aus. Manchmal möchten wir jedoch die automatische Vervollständigungsfunktion des Eingabefelds deaktivieren. Wenn der Benutzer beispielsweise Inhalte eingibt, möchten wir die AJAX-Technologie verwenden, um in der Datenbank zu suchen und diese aufzulisten, anstatt im Verlauf des Benutzers zu suchen.

Methode:

1. Stellen Sie die automatische Vervollständigung im Menü „Internetoptionen“ des IE ein.

2. Stellen Sie die automatische Vervollständigung des Formulareingabefelds ein Aktivieren oder deaktivieren Sie die Funktion zur automatischen Vervollständigung des Eingabefelds

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

1. WebSocket SharedWorker

2. 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16 webSocket如何兼容低浏览器？

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

2. 引用WebSocket.js这个文件来兼容低版本浏览器。

16 页面可见性（Page Visibility）API 可以有哪些用途？

1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

2. 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

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

1. map+area或者svg

2. border-radius

3. 纯js实现，一个点不在圆上的算法

18  实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

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

19 网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的程序;

2. 可以防止恶意破解密码、刷票、论坛灌水；

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

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

21 元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

相关推荐：

前端面试题小结

CSS基础面试题小结、

JavaScript面试基础知识题分享

Das obige ist der detaillierte Inhalt vonZusammenfassung grundlegender HTML-Interviewfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!