18個必知必會的HTML面試題目（附答案解析）

這篇文章跟大家分享18個常見的HTML面試題，附答案解析，帶你鞏固一波地基。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

HTML 是應用程式在網路上開發最廣泛的語言之一，它可以帶我們深入Web 開發的世界，提高技能。如果你想從事WEB 開發（前端開發）相關的職業，HTML 的基礎就必須熟練掌握，以下就以問答的形式開啟我們的回顧之路，為即將踏入這個行業的新人鋪鋪路。 【推薦教學：html影片教學】

Q1：什麼是 HTML？

超文本標記語言（HyperText Markup Language，簡稱：HTML）是一種用來建立網頁的標準標記語言。 HTML 使文字更具互動性和動態性，是建立網站及WEB應用程式的基石，HTML允許嵌入圖像、表格、鏈接，並且可以用於創建互動式表單，它被用來結構化資訊。

Q2：HTML元素和標籤有什麼不同？

元素代表某種結構或語義，通常由開始標籤、內容和結束標籤組成。

標籤就是93f0f5c25f18dab9d176bd4f6de5d30e、6c04bd5ca3fcae76e30b72ad730ca86d、f5d188ed2c074f8b944552db028f98a1等被尖括號c46814b40bf684aa66e0bd9d8912b58b 包起來的對象，絕大部分的標籤都是成對出現的，如dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68、1179f652af8537777d18befc1b0d4a32473f0a7621bec819994bb5020d29372a。

元素	標籤
#HTML 網頁或文件的單一元件，它代表結構或語義。例如，title 元素表示文檔的標題	HTML 文件的根，用來標記 HTML 元素的。例如，head 標籤用於包含HTML 檔案中的所有head# 元素

Q3：區塊級元素和內聯元素有什麼不同？

區塊級元素：佔據其父元素（容器）的整個空間，並創建了一個「區塊」。通常瀏覽器會在區塊級元素前後另起一行，能容納其他區塊元素或內聯元素。包括：e388a4556c0f65e1904146cc1a846bee、 dc6dce4a544fdca2df29d5ac0ea9906b、b8a712a75cab9a5aded02f74998372b4、a1f02c36ba31691bcfe87b2722de723b、&lt ;section>、ff9c23ada1bcecdd1a0fb5d5a0f18437、c787b9a589a3ece771e842a6176cf8e9、4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc、7af642afb7cbf7886d194925c3e5eedb 和25edfb22a4f469ecb59f1190150159c6

內聯元素：只佔據它對應標籤的邊框所包含的空間，只能容納文字或其他內聯元素的元素。包括：45a2772a6b6107b401db3c9b82c049c2、907fae80ddef53131f3292ee4f81644b、1244aa79a84dea840d8e55c52dc97869、2e1cf0710519d5598b1f0f14c36ba674、&lt ;strong>、3499910bf9dac5ae3c52d5ede7383485、d5fd7aea971a85678ba271703566ebfd

區塊級元素	內聯元素
區塊級元素被繪製為一個區塊，它可以伸展以填充它可用的整個寬度，即其容器的寬度，並且將始終從新行開始	內聯元素被繪製在它們被定義的地方，並且只佔用絕對需要的空間
每個塊狀元素都從新的一行開始，並且其後的元素也另起一行（獨佔一行）；元素的高度、寬度、行高以及頂和底邊距都可設定；元素寬度在不設定的情況下，佔它本身父容器的100%（和父元素寬度一致）	和其他元素在同一行上，不獨佔一行；元素的高度、寬度及頂部底部邊距不可設定

Q4: What is semantic HTML?

Semantic HTML is a coding style that uses HTML markup to enhance the semantics or meaning of content. In semantic HTML, the a4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747a tag is not used for bold statements but 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0, and for italic statements it is not . 5a8028ccc7a7e27417bff9f05adf5932 72ac96585ae54b6ae11f849d2649d9e6, instead use 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338.

Q5: List the commonly used list tags

Lists are involved in page production, and there are special tags used to represent list data in HTML Tags, as follows:

• Ordered list: An ordered list displays elements in numbered format, represented by c34106e0b4e09414b63b2ea253ff83d6tags
• Unordered list: An unordered list displays elements in bullet format, which is represented by the ff6d136ddc5fdfeffaf53ff6ee95f185 tag.
• Definition list: A definition list displays elements in definition form, just like in a dictionary, such as 5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94# The ## and 67bc4f89d416b0b8236eaa5f43dee742 tags are used to define the description list.

Q6: Explain HTML tag semantics

HTML is markup semantics, and document content has its own semantics. Common ones are as follows:

• 1aa9e5d373740b65a0cc8f0a02150c53: used to define the title of the document.
• c787b9a589a3ece771e842a6176cf8e9: defines the navigation link
• 2f8332c8dcfd5c7dec030a070bf652c3: used to define a unit in the document
• 23c3de37f2f9ebcb477c4a90aac6fffd: Used to define independent, self-contained articles
• 15221ee8cba27fc1d7a26c47a001eb9b: Used to define content outside the content
• c37f8231a37e88427e62669260f0074d: used to define the footer of the document

Q7: What is a ticker?

The marquee effect was a very classic effect in the past and was available on almost every website.

marquee is used for scrolling text on web pages. It can automatically scroll images or text up, down, left or right, as long as the text to be scrolled is placed ed126914ed1419bab26abf7cf307b7b9……< ;/marquee> tag.

Q8: What is the difference between div and span? The difference between

span and div is that the span element is inline and is usually used for a small block within a line. For example, within a paragraph. And div is block level, which is equivalent to having a newline character before and after it, used to group larger code blocks.

Q9: 8b05045a5be5764f313ed5b9168a17e6 tag is the HTML tag?

No,

8b05045a5be5764f313ed5b9168a17e6 declaration is not a HTML tag. 1a309583e26acea4f04ca31122d8c535The declaration is called a document type definition (DTD). The purpose of the declaration is to tell the browser the type of the file. Lets the browser parser know which specification should be used to parse the document. 1a309583e26acea4f04ca31122d8c535The declaration must be on the first line of the HTML document.

HTML has various document types, such as

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, etc. Therefore, 8b05045a5be5764f313ed5b9168a17e6 is used to define the HTML document type.

For

HTML5 documents, there is no DTD, so there is no difference between strict mode and mixed mode. HTML5 has a relatively loose syntax and implementation At this time, backward compatibility has been implemented to the greatest extent possible.

Q10: What are the differences between HTML, XML and XHTML?

• HTML: HyperText Markup Language
• XML: Extensible Markup Language Language)
• XHTML: Extensible Hypertext Markup Language

##XHTML

is the current HTML The successor of the version is HTML in the XML document. The difference between

HTML

and XHTML is:

HTML
• is a standard universal markup language XML is an application of extensible markup language.
HTML
• Tags are not case sensitive XHTML All tags must be lowercase.
XHTML
• All attributes must use double quotes
HTML
• is about display information, while XHTML is about description information .

Q11: What is an image map?

Sometimes it is necessary to add different links to different areas of an image. The usual approach is to use image maps to become image hotspots. The specific code is as follows:

<img src="devpoint.jpg" border="0" usemap="#devmap" alt="devpoint" />

<map name="devmap" id="devmap">
    <area shape="circle" coords="180,139,14" href="about.html" alt="about" />
    <area
        shape="circle"
        coords="129,161,10"
        href="contact.html"
        alt="contact"
    />
    <area shape="rect" coords="0,0,110,260" href="home.html" alt="home" />
</map>

However, there are many alternatives now.

Q12：超链接和锚点的区别？

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

Q13：简述HTML5离线储存

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

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

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

<html manifest="cache.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通讯的实现，微前端，广告嵌入等。

<iframe src="home.html"></iframe>

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: Hidden objects will not occupy any physical space and will not affect the layout of other elements
• visible:hidden: Make the object invisible on the web page, but it will occupy physical space on the web page. In layman's terms, it can't be seen but can be touched.
• Whether to re-render after the attribute value is changed: visibility:hidden will not be rendered; display:none will be re-rendered.

Q18: Reflow and redraw

Reflow, when the size, structure, or certain attributes of some or all elements in the rendering tree change, The process by which the browser re-renders part or all of the document. Redraw, when the change in the style of an element on the page does not affect its position in the document flow (for example: color, background-color, visibility, etc. ), the browser assigns the new style to the element and redraws it. The two will have different impacts on the performance of the page, which will not be introduced here.

For more programming-related knowledge, please visit: Introduction to Programming! !

以上是18個必知必會的HTML面試題目（附答案解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！