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

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

-Dokuments vor dem
• -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<code>于HTMLDOCTYPEDie 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 ?

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

-Tag. Zusätzlich zum Laden von
• 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
verwiesen wird, wartet, bis die Seite geladen ist, bevor es geladen wird.

• link@importCSS wird von

  vorgeschlagen und kann nur geladen werden oben erkannt
, während
• 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,
usw.

• GeckoNetscape6FF,MozillaSuite/SeaMonkey Kernel :

  und höher. [
Kernel war ursprünglich: Presto, jetzt:
• ;]

  PrestoOpera7OperaBlinkKernel:

  usw. [
von
• (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></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中文网其它相关文章！

推荐阅读：

bootstarp+table使用方法分析

前端中排序算法实例详解

Das obige ist der detaillierte Inhalt vonFront-End-Interviewfragen, die HTML-Neulinge kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!