suchen

Heim >Web-Frontend >HTML-Tutorial >Grundlegende Theorie von HTML

Grundlegende Theorie von HTML

不言
不言Original
2018-04-02 15:19:492558Durchsuche

Dieser Artikel vermittelt Ihnen grundlegende theoretische Kenntnisse über HTML. Interessierte Freunde können sich

HTML

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

  • 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)

  • Und HTML4.01 basiert auf SGML, daher muss es auf die DTD verweisen, um dem Browser den vom Dokument verwendeten Dokumenttyp mitzuteilen

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

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>

    Was ist der Unterschied zwischen der Verwendung von Link und @import beim Importieren von Stilen auf der 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.1IE5linkXHTML Könnten Sie uns bitte Ihr Verständnis des Browserkernels vorstellen?

ist hauptsächlich in zwei Teile unterteilt: Rendering-Engine ( oder

) und
    Engine

  • layout 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

  • JS-Engine: Javascript analysieren und ausführen, 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

  • Was sind die gängigen Browser-Kernel?

Kernel:

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

  • TridentIE,MaxThon,TT,The World,360 Kernel:

    und höher,
    • usw.

  • 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

  • Welche Elemente wurden von HTML5 entfernt?

    • Rein expressive Elemente: Basefont, Big, Center, Font, s, Strike, tt, u

Einfluss auf die Benutzerfreundlichkeit Negativ Betroffene Elemente: Frame, Frameset, Noframes

  • Wie gehe ich mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags um?

    • Neues Tag über document.createElement erstellen

Shim html5shiv.js verwenden

  • Wie unterscheidet man zwischen HTML und HTML5?

    • DOCTYPE-Deklaration, neue Strukturelemente, Funktionselemente

Können Sie das Funktionsprinzip der HTML5-Offline-Speicherung erklären? Wie benutzt man es?

    • Das Offline-Speicherprinzip von HTML5:

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

    • HTML5-Offline-Speichernutzung:

      • Legen Sie das Manifest-Attribut im HTML-Tag des Dokuments fest, z. B. manifest="/offline.appcache"

  • Erstellen Sie eine neue Manifestdatei im Projekt. Der Namensvorschlag für die Manifestdatei lautet: xxx.appcache

    • Konfigurieren Sie den richtigen MIME-Typ auf dem Webserver, d. h. text/cache-manifest

      • Wie werden HTML5-Speicherressourcen verwaltet und geladen?

    Wenn online, stellt der Browser fest, dass das HTML-Tag das Manifest-Attribut hat, und fordert die Manifestdatei an

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.

  • Was sind die Vor- und Nachteile von iframe?

    • Vorteile:

Wird zum Laden langsamer Inhalte (z. B. Anzeigen) verwendet

  • ermöglicht das parallele Herunterladen von Skripten

    • ermöglicht die subdomänenübergreifende Kommunikation

    • Nachteile:

      • iframe blockiert das Onload-Ereignis der Hauptseite

  • kann von einigen Suchmaschinen nicht erkannt werden

    • Es werden viele Seiten generiert, was schwierig zu verwalten ist

      • Welche Funktion hat das Etikett? Wie benutzt man es?

    Label-Tag zum Definieren der Beziehung zwischen Formularsteuerelementen:

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

    • Verwendungsmethode 1:

    • <label for="mobile">Number:</label>

      • Verwendung 2:

    • <input type="text" id="mobile"/>

    • Wie erreiche ich die Kommunikation zwischen mehreren Registerkarten im Browser?

      <label>Date:<input type="text"/></label>

    iframe + contentWindow

postMessage

  • SharedWorker (Web Worker API)

  • Speicherereignis (localStorge API)

  • WebSocket

  • Wie webSocket kompatibel ist mit Low-Browsing-Gerät?

    • 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!

JavaScript html5 firefox css chrome safari html webkit xhtml for select date Cookie xml Calendar void class map JS number 对象 事件 history 选择器 border canvas input ul li 算法 http websocket 搜索引擎 Access SEO
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Spezialeffekte für Textanimationen basierend auf HTML5 CanvasNächster Artikel：Spezialeffekte für Textanimationen basierend auf HTML5 Canvas

In Verbindung stehende Artikel

Mehr sehen