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<!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)
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
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]-->
Nach dem Login kopieren
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
Nach dem Login kopieren
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?
Wie deaktiviere ich die Funktion Automatische Vervollständigung im HTML5-Formular?
Wie implementiert man die Kommunikation zwischen mehreren Registerkarten im Browser? (Alibaba)
Wie ist webSocket mit Low-End-Browsern kompatibel? (Ali)
Seite Sichtbarkeit Was Für welche Zwecke können APIs verwendet werden?
如何在页面上实现一个圆形的可点击区域？
实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<p style="height:1px;overflow:hidden;background:red"></p>
Nach dem Login kopieren
如何实现浏览器内多个标签页之间的通信？
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!
