Dieser Artikel vermittelt Ihnen grundlegende theoretische Kenntnisse über HTML. Interessierte Freunde können sich
Semantik ansehen
Die Semantik von HTML-Tags bedeutet: die Dokumentstruktur angemessen auszudrücken, indem Tags verwendet werden, die Semantik enthalten (z. B. h1-h6)
Semantische Benennung von CSS bezieht sich auf: Hinzufügen sinnvoller Klassen zu HTML-Tags
Warum Semantik erforderlich ist:
Nach dem Entfernen der Stil, die Seite präsentiert eine klare Struktur
Blinde können mit einem Screenreader besser lesen
Suchmaschinen können die Seite besser verstehen Inklusion
Erleichtert den nachhaltigen Betrieb und die Aufrechterhaltung von Teamprojekten
Beschreiben Sie kurz Ihren Ansatz zur HTML-Semantik. Verstehen Sie?
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 keinen CSS-Stil, der auch im Dokumentformat angezeigt wird und leicht zu lesen ist.
Erleichtern Sie den Leuten, die den Quellcode lesen, die Unterteilung der Website in Abschnitte Lesen, Pflegen und Verstehen
-Deklaration befindet sich in der ersten Zeile des
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 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
Inline-Elemente umfassen:
(Hervorhebung)a b span img input select strongElemente auf Blockebene umfassen:
p ul ol li dl dt dd h1 h2 h3 h4…pHäufige leere Elemente:
<br> <hr> <img> <input> <link> <meta>
gehört zum
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
link@importCSS wird von
Tag ist, keine KompatibilitätsproblemeimportCSS2.1IE5linkXHTML Könnten Sie uns bitte Ihr Verständnis des Browserkernels vorstellen?
ist hauptsächlich in zwei Teile unterteilt: Rendering-Engine ( oder
) undlayout engineerRendering Engine Rendering-Engine: Verantwortlich für das Abrufen des Inhalts der Webseite (HTML, XML, Bilder usw.), das Organisieren der Informationen (z. B. Hinzufügen von CSS usw.), das Berechnen der Anzeigemethode der Webseite und die anschließende Ausgabe an den Monitor oder Drucker. Unterschiedliche Browserkerne haben unterschiedliche grammatikalische Interpretationen von Webseiten, sodass auch die Rendering-Effekte unterschiedlich sind. Alle Webbrowser, E-Mail-Clients und andere Anwendungen, die Netzwerkinhalte bearbeiten und anzeigen müssen, benötigen den KernelJS
Was sind die gängigen Browser-Kernel?
Kernel:
, Sogou-Browser usw. [Auch bekannt als MSHTML]TridentIE,MaxThon,TT,The World,360 Kernel:
Presto Kernel: Opera7 und höher. [OperaKernel war ursprünglich: Presto, jetzt: Blink;]
WebkitKernel: Safari,Chrome usw. [Chrome von Blink (ein Zweig von WebKit)]
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 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 auch direkt ausgereifte Frameworks wie html5shim verwenden
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
So unterscheidet man HTML5: DOCTYPE deklariert neue Strukturelemente und funktionale Elemente
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 die offline gespeicherten 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
sessionStorage Daten werden automatisch gelöscht, nachdem das aktuelle Browserfenster geschlossen wird
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
iframe有那些缺点？
iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件
HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
如何实现浏览器内多个标签页之间的通信? (阿里)
WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式
webSocket如何兼容低浏览器？(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
页面可见性（Page Visibility API） 可以有哪些用途？
通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放
如何在页面上实现一个圆形的可点击区域？
map+area或者svg
border-radius
纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果
<p style="height:1px;overflow:hidden;background:red"></p>
网页验证码是干嘛的，是为了解决什么安全问题
区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
i内容展示为斜体，em表示强调的文本
页面导入样式时，使用 link 和 @import 有什么区别？
link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS
页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题
介绍一下你对浏览器内核的理解？
浏览器内核主要分为两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机
JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
常见的浏览器内核有哪些？
Blink内核：新版 Chrome、新版 Opera
Webkit内核：Safari、原Chrome
Gecko内核：FireFox、Netscape6及以上版本
Trident内核（又称MSHTML内核）：IE、国产浏览器
Presto内核：原Opera7及以上
HTML5有哪些新特性？
Neue Selektoren document.querySelector, document.querySelectorAll
Drag-and-Drop-API
Medienwiedergabevideo und Audio
Lokaler Speicher localStorage und sessionStorage
Offline-Anwendungsmanifest
Desktop-Benachrichtigungen, E-Mail, URL, Suche
Geolocation
Multitasking-Webworker
Vollständiger doppelter Websocket für das industrielle Kommunikationsprotokoll
Verlaufsverwaltungsverlauf
Cross-Domain Resource Sharing (CORS) Access-Control-Allow-Origin
Seitensichtbarkeitsänderung Ereignissichtbarkeitsänderung
Fensterübergreifende Kommunikation PostMessage
Formulardatenobjekt
Malleinwand
Einfluss auf die Benutzerfreundlichkeit Negativ Betroffene Elemente: Frame, Frameset, Noframes
Shim html5shiv.js verwenden
Können Sie das Funktionsprinzip der HTML5-Offline-Speicherung erklären? Wie benutzt man es?
Wenn der Benutzer online ist, speichern und aktualisieren Sie die Cache-Datei der Computer des Benutzers; Wenn Benutzer offline sind, können sie normal auf Offline-Speicherseiten oder Anwendungsinhalte zugreifen
Konfigurieren Sie den richtigen MIME-Typ auf dem Webserver, d. h. text/cache-manifest
Wenn Es ist das erste Mal, dass auf die App zugegriffen wird. Der Browser lädt die entsprechenden Ressourcen basierend auf dem Inhalt der Manifestdatei herunter und speichert sie offline
Wenn die App besucht wurde und die Wenn die Ressourcen offline gespeichert wurden, führt der Browser einen Vergleich durch. Die neue Manifestdatei ist mit der alten Manifestdatei identisch. Wenn sich die Datei nicht geändert hat, wird kein Vorgang ausgeführt. Wenn sich die Datei ändert, werden die Ressourcen in der Datei erneut heruntergeladen und offline gespeichert.
Im Offline-Modus verwendet der Browser direkt die offline gespeicherten Ressourcen.
Wird zum Laden langsamer Inhalte (z. B. Anzeigen) verwendet
ermöglicht die subdomänenübergreifende Kommunikation
Es werden viele Seiten generiert, was schwierig zu verwalten ist
Wenn der Benutzer das Label-Tag auswählt, wird der Browser angezeigt Automatisch den Fokus auf das Formularsteuerelement richten, das sich auf die Etikettenbezeichnung bezieht
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
<label>Date:<input type="text"/></label>
postMessage
SharedWorker (Web Worker API)
Speicherereignis (localStorge API)
WebSocket
Adobe Flash Socket
ActiveX HTMLFile (IE)
Senden Sie XHR basierend auf mehrteiliger Kodierung
Was sind die möglichen Einsatzmöglichkeiten von XHR basierend auf Long Polling
Page Visibility API?
Musik- oder Videowiedergabe automatisch anhalten, wenn die Seite auf andere Hintergrundprozesse umgeschaltet wird
Wenn der Benutzer andere Seiten durchsucht, pausieren die automatische Wiedergabe der Diashow auf der Homepage der Website
Nach Abschluss der Anmeldung automatisch den Anmeldestatus anderer Seiten ohne Aktualisierung synchronisieren
title und h1 Der Unterschied zwischen b und strong, der Unterschied zwischen i und em?
Titel stellt den Titel der gesamten Seite dar, h1 stellt einen klaren Titel dar, der einen großen Einfluss auf die Erfassung von Seiteninformationen hat
stark gibt den Hauptinhalt an und hat die Bedeutung, den Ton zu stärken. Wenn Sie ein Lesegerät zum Lesen des Internets verwenden, wird stark betont, während b
soll den hervorgehobenen Inhalt anzeigen
i-Inhalt wird kursiv angezeigt, em stellt hervorgehobenen Text dar
Natürliche Stil-Tags: b , i, u, s, pre
Semantische Stil-Tags: strong, em, ins, del, code
Semantische Stil-Tags sollten sein richtig eingesetzt, aber nicht missbraucht. Wenn Sie sich nicht sicher sind, verwenden Sie vorzugsweise natürliche Stil-Tags
Verwandte Empfehlungen:
Ein paar grundlegende HTML-Wissenspunkte
Grundkenntnisse über HTML im Frontend
Detaillierte Erläuterung der Grundkenntnisse über HTML-Bilder
Das obige ist der detaillierte Inhalt vonGrundlegende Theorie von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
