18 wichtige HTML-Interviewfragen (mit Antwortanalyse)

In diesem Artikel stellen wir Ihnen 18 häufig gestellte HTML-Interviewfragen mit Antwortanalyse vor, um Ihnen dabei zu helfen, Ihr Fundament zu festigen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

HTML ist eine der am häufigsten verwendeten Sprachen für die Entwicklung im Internet. Sie kann uns tief in die Welt der Web -Entwicklung entführen unsere Fähigkeiten verbessern. Wenn Sie eine Karriere im Bereich WEB -Entwicklung (Front-End-Entwicklung) anstreben, müssen Sie die Grundlagen von HTML kompetent beherrschen. Beginnen wir unsere Überprüfungsreise im Formular einer Frage und Antwort, um den Weg für neue Menschen zu ebnen, die im Begriff sind, in diese Branche einzusteigen. [Empfohlenes Tutorial: HTML-Video-Tutorial ] HTML 是互联网上应用开发最广泛的语言之一，它可以带我们深入 Web 开发的世界，提高技能。如果你想从事 WEB 开发（前端开发）相关的职业， HTML 的基础就必须熟练掌握，下面就以问答的形式开启我们的回顾之路，为即将踏入这个行业的新人们铺铺路。【推荐教程： html视频教程 】

Q1：什么是 HTML？ 超文本标记语言（HyperText Markup Language，简称： HTML ）是一种用于创建网页的标准标记语言。 HTML 使文本更具交互性和动态性，是构建网站及WEB应用的基石， HTML 允许嵌入图像、表格、链接，并且可以用于创建交互式表单，它被用来结构化信息。

Q2：HTML元素和标签有什么区别？ 元素代表某种结构或语义，通常由开始标签、内容和结束标签组成。

标签就是 93f0f5c25f18dab9d176bd4f6de5d30e 、 6c04bd5ca3fcae76e30b72ad730ca86d 、 f5d188ed2c074f8b944552db028f98a1 等被尖括号 aa7d73ef87dde8a172ca6aba4bdc81fa 包起来的对象，绝大部分的标签都是成对出现的，如 dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68 、 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a 。

元素 标签 HTML 网页或文档的单个组件，它代表结构或语义。例如， title 元素表示文档的标题 HTML 文档的根，用来标记 HTML 元素的。例如， head 标签用于包含 HTML 文件中的所有 head 元素 Q3：块级元素和内联元素有什么区别？ 块级元素 ：占据其父元素（容器）的整个空间，创建了一个“块”。通常浏览器会在块级元素前后另起一行，能容纳其他块元素或者内联元素。包括： e388a4556c0f65e1904146cc1a846bee 、 dc6dce4a544fdca2df29d5ac0ea9906b 、 b8a712a75cab9a5aded02f74998372b4 、 a1f02c36ba31691bcfe87b2722de723b 、 2f8332c8dcfd5c7dec030a070bf652c3 、 ff9c23ada1bcecdd1a0fb5d5a0f18437 、 c787b9a589a3ece771e842a6176cf8e9 、 4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc 、 ff6d136ddc5fdfeffaf53ff6ee95f185 和 25edfb22a4f469ecb59f1190150159c6

内联元素 ：只占据它对应标签的边框所包含的空间，只能容纳文本或者其他内联元素的元素。包括： 45a2772a6b6107b401db3c9b82c049c2 、 907fae80ddef53131f3292ee4f81644b 、 1244aa79a84dea840d8e55c52dc97869 、 2e1cf0710519d5598b1f0f14c36ba674 、 8e99a69fbe029cd4e2b854e244eab143 、 3499910bf9dac5ae3c52d5ede7383485 、 d5fd7aea971a85678ba271703566ebfd F1: Was ist HTML?

HyperText Markup Language (HyperText Markup Language, bezeichnet als: HTML ) ist eine Standard-Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. HTML macht Text interaktiver und dynamischer und ist der Grundstein für die Erstellung von Websites und WEB-Anwendungen. HTML ermöglicht das Einbetten von Bildern, Tabellen und Links und kann zum Erstellen interaktiver Formulare verwendet werden dient der Strukturierung von Informationen. F2: Was ist der Unterschied zwischen HTML-Elementen und Tags? Das -Element stellt eine bestimmte Struktur oder Semantik dar und besteht normalerweise aus einem Start-Tag, Inhalt und einem End-Tag. Tags sind 93f0f5c25f18dab9d176bd4f6de5d30e , 6c04bd5ca3fcae76e30b72ad730ca86d , f5d188ed2c074f8b944552db028f98a1 usw., eingeschlossen in spitze Klammern &lt ; Bei von code> und > umschlossenen Objekten erscheinen die meisten Tags paarweise, z. B. dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68 , 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a . Element Tag HTML Eine einzelne Komponente einer Webseite oder eines Dokuments, die Struktur oder Semantik darstellt. Beispielsweise stellt das Element title den Titel des Dokuments dar. HTML Der Stamm des Dokuments wird verwendet, um das Element HTML zu markieren. Beispielsweise wird das head -Tag verwendet, um alle head -Elemente in die HTML -Datei einzuschließen F3: Was ist der Unterschied zwischen Elementen auf Blockebene und Inline-Elementen? Element auf Blockebene : Nimmt den gesamten Platz seines übergeordneten Elements (Containers) ein und erstellt einen „Block“. Normalerweise erstellen Browser vor und nach einem Element auf Blockebene eine neue Zeile, um andere Blockelemente oder Inline-Elemente aufzunehmen. Einschließlich: e388a4556c0f65e1904146cc1a846bee , dc6dce4a544fdca2df29d5ac0ea9906b , b8a712a75cab9a5aded02f74998372b4 , a1f02c36ba31691bcfe87b2722de723b , 2f8332c8dcfd5c7dec030a070bf652c3 , ff9c23ada1bcecdd1a0fb5d5a0f18437 , c787b9a589a3ece771e842a6176cf8e9 , 4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc code>, ff6d136ddc5fdfeffaf53ff6ee95f185 und 25edfb22a4f469ecb59f1190150159c6 🎜🎜 Inline-Element : belegt nur den Platz, der durch den Rand des entsprechenden Labels enthalten ist , ein Element, das nur Text oder andere Inline-Elemente enthalten kann. Enthält: 45a2772a6b6107b401db3c9b82c049c2 , 907fae80ddef53131f3292ee4f81644b , 1244aa79a84dea840d8e55c52dc97869 , 2e1cf0710519d5598b1f0f14c36ba674 , 8e99a69fbe029cd4e2b854e244eab143 , 3499910bf9dac5ae3c52d5ede7383485 , d5fd7aea971a85678ba271703566ebfd 🎜🎜🎜🎜🎜Elemente auf Blockebene🎜🎜Inline-Elemente🎜🎜 🎜🎜🎜🎜Elemente auf Blockebene werden als Block gezeichnet, der sich so ausdehnen kann, dass er die gesamte verfügbare Breite ausfüllt, d. h. die Breite seines Containers, und immer in einer neuen Zeile beginnt. 🎜🎜Inline-Elemente werden dort gezeichnet, wo sie sind definiert, und nimmt nur den unbedingt notwendigen Platz ein🎜🎜🎜🎜Jedes Blockelement beginnt in einer neuen Zeile, und die Elemente danach beginnen ebenfalls in einer neuen Zeile (ausschließlich in einer Zeile); Oberer und unterer Rand des Elements Alle können festgelegt werden. Wenn die Breite des Elements nicht festgelegt ist, macht es 100 % seines eigenen übergeordneten Containers aus (entspricht der Breite des übergeordneten Elements). Dieselbe Zeile wie andere Elemente und belegt keine exklusive Zeile; Höhe, Breite, Ober- und Unterseite des Elements können nicht festgelegt werden🎜🎜🎜🎜 F4: Was ist semantisches HTML? Semantisches HTML ist ein Codierungsstil, der HTML-Markup verwendet, um die Semantik oder Bedeutung von Inhalten zu verbessern. In semantischem HTML wird das Tag a4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747a nicht für fettgedruckte Anweisungen verwendet, wohl aber für 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 und für kursiv geschriebene Anweisungen nicht 5a8028ccc7a7e27417bff9f05adf5932 72ac96585ae54b6ae11f849d2649d9e6 , sondern 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 . a4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747a 标签不用于粗体语句而是 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 ，斜体语句不是用 5a8028ccc7a7e27417bff9f05adf5932 72ac96585ae54b6ae11f849d2649d9e6 ，而是用 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 。

Q5：列出常用的列表标签 在页面制作中涉及列表，在 HTML 中有专门用于表示列表数据的标签，如下：

有序列表 ：有序列表以编号格式显示元素，由 c34106e0b4e09414b63b2ea253ff83d6 标签表示 无序列表 ：无序列表以项目符号格式显示元素，它由 ff6d136ddc5fdfeffaf53ff6ee95f185 标签表示。 定义列表 ：定义列表以定义形式显示元素，就像在字典中一样，如 5c69336ffbc20d23018e48b396cdd57a 、 73de882deff7a050a357292d0a1fca94 和 67bc4f89d416b0b8236eaa5f43dee742 标签用于定义描述列表。 Q6：解释HTML标签语义 HTML 是标记语义，文档内容是有其语义的，常见的如下：

1aa9e5d373740b65a0cc8f0a02150c53 ：用于定义文档的标题。 c787b9a589a3ece771e842a6176cf8e9 ：定义了导航链接 2f8332c8dcfd5c7dec030a070bf652c3 : 用于定义文档中的一个单元 23c3de37f2f9ebcb477c4a90aac6fffd ：用于定义独立的、自包含的文章 15221ee8cba27fc1d7a26c47a001eb9b ：用于定义内容之外的内容 c37f8231a37e88427e62669260f0074d ：用于定义文档的页脚 Q7：什么是跑马灯？ 跑马灯效果在以前是很经典的效果，几乎每个网站都有。 marquee 用于网页上的滚动文本，它可以自动向上、向下、向左或向右滚动图像或文本，只要将要滚动的文本放在 ed126914ed1419bab26abf7cf307b7b9……7204e33a7a23f6efcc788532e245c31b 标签内。

Q8： div 和 span 的区别？ span 和 div 的区别在于 span 元素是内联的，通常用于一行内的一小块，例如段落内。而 div 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。

Q9： 8b05045a5be5764f313ed5b9168a17e6 标签是否为 HTML 标签？ 不是， 8b05045a5be5764f313ed5b9168a17e6 声明不是 HTML 标签。 1a309583e26acea4f04ca31122d8c535 声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。 1a309583e26acea4f04ca31122d8c535 声明必须在 HTML 文档的第一行。

HTML 有多种文档类型，例如 HTML 4.01 Strict 、 HTML 4.01 Transitional 、 HTML 4.01 Frameset 、 XHTML 1.0 Strict 、 XHTML 1.0 Transitional 、 XHTML 1.0 Frameset 、 XHTML 1.1 等。因此， 8b05045a5be5764f313ed5b9168a17e6 用于定义 HTML 文档类型。

对于 HTML5 文档，没有 DTD ，也就没有严格模式与混杂模式的区别， HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

Q10： HTML 、 XML 和 XHTML 有什么区别？ HTML ：超文本标记语言（HyperText Markup Language） XML ：可扩展标记语言（Extensible Markup Language） XHTML ：可扩展超文本标记语言（Extensible Hypertext Markup Language） XHTML 是当前 HTML 版的继承者，是 XML 文档中的 HTML 。

HTML 和 XHTML 之间的区别是：

HTML 是一种标准通用标记语言的应用，XML是一种可扩展标记语言的应用程序。 HTML 标签不区分大小写XHTML所有标签都必须小写。 XHTML 所有属性都必须使用双引号 HTML 是关于显示信息，而 XHTML F5: Häufig verwendete Listen-Tags auflisten Listen sind an der Seitenerstellung beteiligt, und es gibt spezielle Tags, die zur Darstellung von Listendaten in HTML verwendet werden Tags wie folgt: Geordnete Liste : Eine geordnete Liste zeigt Elemente im nummerierten Format an, dargestellt durch das Tag c34106e0b4e09414b63b2ea253ff83d6

Ungeordnete Liste

: Eine ungeordnete Liste zeigt Elemente im Aufzählungsformat an, das durch das Tag ff6d136ddc5fdfeffaf53ff6ee95f185 dargestellt wird. 🎜 🎜Definitionsliste🎜: Eine Definitionsliste zeigt Elemente in Definitionsform an, genau wie in einem Wörterbuch, wie zum Beispiel 5c69336ffbc20d23018e48b396cdd57a , 73de882deff7a050a357292d0a1fca94 und 67bc4f89d416b0b8236eaa5f43dee742 wird zum Definieren der Beschreibungsliste verwendet. 🎜🎜 🎜F6: Erklären Sie die HTML-Tag-Semantik 🎜🎜🎜HTML ist Tag-Semantik, und Dokumentinhalte haben ihre eigene Semantik: 🎜 1aa9e5d373740b65a0cc8f0a02150c53 : wird verwendet, um den Titel des Dokuments zu definieren. 🎜 c787b9a589a3ece771e842a6176cf8e9 : Definiert den Navigationslink 🎜 2f8332c8dcfd5c7dec030a070bf652c3 : Wird zum Definieren einer Einheit im Dokument verwendet🎜 23c3de37f2f9ebcb477c4a90aac6fffd : wird verwendet, um unabhängige, in sich geschlossene Artikel zu definieren🎜 15221ee8cba27fc1d7a26c47a001eb9b : wird verwendet, um andere Inhalte als Inhalte zu definieren🎜 &lt ;footer> : wird verwendet, um die Fußzeile des Dokuments zu definieren🎜🎜 🎜F7: Was ist ein Ticker? 🎜🎜🎜Der Marquee-Effekt war früher ein sehr klassischer Effekt und fast jede Website verfügt über ihn. marquee wird zum Scrollen von Text auf Webseiten verwendet. Es kann Bilder oder Text automatisch nach oben, unten, links oder rechts scrollen, solange der zu scrollende Text in ed126914ed1419bab26abf7cf307b7b9 platziert ist. ...... 7204e33a7a23f6efcc788532e245c31b -Tag. 🎜 🎜F8: Was ist der Unterschied zwischen div und span ? 🎜🎜🎜Der Unterschied zwischen span und div besteht darin, dass das span -Element inline ist und normalerweise für einen kleinen Bereich innerhalb einer Zeile verwendet wird, z wie innerhalb eines Absatzes. Und div ist auf Blockebene, was einem Zeilenumbruch davor und danach entspricht, der zum Gruppieren größerer Codeblöcke verwendet wird. 🎜 🎜F9: Ist das 8b05045a5be5764f313ed5b9168a17e6 -Tag ein HTML -Tag? 🎜🎜🎜Nein, die 8b05045a5be5764f313ed5b9168a17e6 -Deklaration ist kein HTML -Tag. Die 1a309583e26acea4f04ca31122d8c535 -Deklaration wird als Dokumenttypdefinition (DTD) bezeichnet. Der Zweck der Deklaration besteht darin, dem Browser den Typ der Datei mitzuteilen. Teilt dem Browser-Parser mit, welche Spezifikation zum Parsen des Dokuments verwendet werden soll. Die 1a309583e26acea4f04ca31122d8c535 -Deklaration muss in der ersten Zeile des HTML-Dokuments stehen. 🎜🎜HTML verfügt über mehrere Dokumenttypen, z. B. HTML 4.01 Strict , HTML 4.01 Transitional , HTML 4.01 Frameset , XHTML 1.0 Strict, XHTML 1.0 Transitional , XHTML 1.0 Frameset , XHTML 1.1 usw. Daher wird 8b05045a5be5764f313ed5b9168a17e6 verwendet, um den HTML-Dokumenttyp zu definieren. 🎜🎜Für HTML5 -Dokumente gibt es keine DTD , daher gibt es keinen Unterschied zwischen dem strikten Modus und dem gemischten Modus. HTML5 hat eine relativ lockere Syntax Bei der Implementierung wurde die Abwärtskompatibilität weitestgehend umgesetzt. 🎜 🎜F10: Was sind die Unterschiede zwischen HTML , XML und XHTML ? 🎜🎜 HTML : HyperText Markup Language 🎜 XML : Extensible Markup Language 🎜 XHTML : Erweiterbar Hypertext Markup Language 🎜🎜🎜 XHTML ist der Nachfolger der aktuellen Version von HTML und ist HTML in einem XML dokumentieren. 🎜🎜Der Unterschied zwischen HTML und XHTML ist: 🎜 HTML ist eine Anwendung der standardmäßigen universellen Auszeichnungssprache, XML ist es eine Anwendung einer erweiterbaren Auszeichnungssprache. 🎜 HTML -Tags unterscheiden nicht zwischen Groß- und Kleinschreibung. Alle XHTML-Tags müssen Kleinbuchstaben sein. 🎜 XHTML Alle Attribute müssen doppelte Anführungszeichen verwenden 🎜 HTML dient der Anzeige von Informationen, während es bei XHTML um die Beschreibung von Informationen geht. 🎜🎜🎜🎜F11: Was ist eine Imagemap? 🎜🎜🎜Manchmal ist es notwendig, verschiedene Links zu verschiedenen Bereichen eines Bildes hinzuzufügen. Die übliche Methode besteht darin, eine Bildkarte zu verwenden, um einen Bild-Hotspot zu erstellen. Der spezifische Code lautet wie folgt: 🎜

🎜 Allerdings gibt es mittlerweile viele Alternativen. 🎜 Q12：超链接和锚点的区别？ HTML中的 3499910bf9dac5ae3c52d5ede7383485 是 anchor （锚）的缩写，现在把带有 href 属性的称作超链接，把没有 href 属性只有 name 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签 3499910bf9dac5ae3c52d5ede7383485 的两种呈现方式。命名锚点同城用于页面定位，超链接用于页面间的跳转。

Q13：简述 HTML5 离线储存 现在日常使用的APP，有部分内容是使用内嵌webview的方式，浏览页面内容，这种方案的优势是WEB和APP共用一个网站，像掘金的APP就是使用这种方式。为了避免重复加载页面或者在无网络的情况下正常展现内容，可以采用离线存储，其中一种方案就是使用 manifest 。

在线情况下，浏览器发现HTML头部有 manifest 属性，它会请求 manifest 文件，第一次访问，那么浏览器就会根据 manifest 文件的内容下载相应的资源，进行离线存储。

在页面头部加入 manifest 属性，如下：

然后在 cache.manifest 文件中编写离线存储的资源规则，代码如下：

CACHE MANIFEST # 2021-06-26 14:01 V0.1.2.42634241855282310056 hash 以便做版本控制 # 默认部分，显式缓存这些文件

CACHE: #需要缓存的列表，如字体、图片、脚本、css ./assets/images/favicons/32x32.png ./assets/fonts/VideoJS.eot ./assets/fonts/VideoJS.svg ./assets/fonts/VideoJS.ttf ./assets/fonts/VideoJS.woff

# 启动页资源 ./index.html

NETWORK: #不需要缓存的 *

FALLBACK: #访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件 *.html /offline.html Q14：什么是 iframe iframe 是嵌入式框架, 是html标签, 是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) 。通常可以使用iframe内嵌网页，跨域ajax通讯的实现，微前端，广告嵌入等。

Q15： position 有哪些值？ position 属性用于指定一个元素在文档中的定位方式。 top 、 right 、 bottom 和 left 属性决定了该元素的最终位置。

static ： 默认值，没有定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性下 top 、 right 、 bottom 、 left 和 z-index 属性无效。 relative 相对定位：元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（此时会在此元素未添加定位时所在位置留下空白）。 position:relative 对 table-row 、 table-column 、 table-cell 、 table-caption 元素无效。 absolute 绝对定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（ margins ），且不会与其他边距合并。 fixed 固定定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变 sticky 元素根据正常文档流进行定位，相对它的最近滚动祖先和最近块级祖先。 Q16： title 和 h1 的区别？ h1 不等于 title 。 h1 为大标题，一般用作文章的标题，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。 title 为页面标题，可以包含 h1 的标题，一般面对的是搜索引擎和浏览器标签。

Q17： display:none 和 visibility:hidden 的区别 都能把页面上的元素隐藏起来，两者的区别如下：

display:none : Das versteckte Objekt nimmt keinen physischen Platz ein und hat keinen Einfluss auf das Layout anderer Elemente display:none ：被隐藏的对象不会占用任何物理空间，不会影响其他元素的布局 visible:hidden ：使对象在网页上不可见，但是会在网页上占用物理空间，通俗来说就是看不见但摸得到。 属性值改变后是否重新渲染： visibility:hidden 不渲染； display:none 会重新渲染。 Q18：回流和重绘 回流，当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。重绘，当页面中元素样式的改变并不影响它在文档流中的位置时（例如： color 、 background-color 、 visibility visible:hidden : Erstellt das Objekt sichtbar Es ist auf der Webseite nicht sichtbar, nimmt jedoch physischen Platz auf der Webseite ein. Laienhaft ausgedrückt ist es unsichtbar, aber greifbar.

Gibt an, ob nach Änderungen des Attributwerts erneut gerendert werden soll: visibility:hidden wird nicht gerendert; display:none wird erneut gerendert. F18: Reflow und Neuzeichnen Reflow, wenn die Abmessungen einiger oder aller Elemente im gerendert werden Baum Der Prozess, durch den der Browser einen Teil oder das gesamte Dokument neu rendert, wenn sich seine Struktur, Struktur oder bestimmte Attribute ändern. Neu zeichnen, wenn die Änderung des Stils eines Elements auf der Seite keine Auswirkungen auf seine Position im Dokumentfluss hat (zum Beispiel: color , background-color , Sichtbarkeit Code> usw.), weist der Browser dem Element den neuen Stil zu und zeichnet es neu. Die beiden haben unterschiedliche Auswirkungen auf die Leistung der Seite, die hier nicht vorgestellt werden. Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung🎜! ! 🎜

18 wichtige HTML-Interviewfragen (mit Antwortanalyse)

In Verbindung stehende Artikel