<p>這篇文章跟大家分享18個常見的HTML面試題，附答案解析，帶你鞏固一波地基。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。 </p>
<p><img src="https://img.php.cn/upload/article/000/000/024/60f16149386c0121.jpg" alt="18個必知必會的HTML面試題目（附答案解析）" ></p>
<p><code>HTML</code> 是應用程式在網路上開發最廣泛的語言之一，它可以帶我們深入<code>Web</code> 開發的世界，提高技能。如果你想從事<code>WEB</code> 開發（前端開發）相關的職業，<code>HTML</code> 的基礎就必須熟練掌握，以下就以問答的形式開啟我們的回顧之路，為即將踏入這個行業的新人鋪鋪路。 【推薦教學：<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html影片教學</a>】</p>
<h3 data-id="heading-0"><strong>Q1：什麼是 HTML？ </strong></h3>
<p>超文本標記語言（HyperText Markup Language，簡稱：<code>HTML</code>）是一種用來建立網頁的標準標記語言。 <code>HTML</code> 使文字更具互動性和動態性，是建立網站及WEB應用程式的基石，<code>HTML</code>允許嵌入圖像、表格、鏈接，並且可以用於創建互動式表單，它被用來結構化資訊。 </p>
<h3 data-id="heading-1"><strong>Q2：HTML元素和標籤有什麼不同？ </strong></h3>
<p>元素代表某種結構或語義，通常由開始標籤、內容和結束標籤組成。 </p>
<p>標籤就是<code><head></code>、<code><body></code>、<code><table></code>等被尖括號<code><</code> 和<code>></code> 包起來的對象，絕大部分的標籤都是成對出現的，如<code><div></div></code>、<code>< h1></h1></code>。 </p>
<table>
<thead><tr class="firstRow">
<th>元素</th>
<th>標籤</th>
</tr></thead>
<tbody><tr>
<td>#HTML 網頁或文件的單一元件，它代表結構或語義。例如，<code>title</code> 元素表示文檔的標題</td>
<td>
<code>HTML</code> 文件的根，用來標記 <code>HTML</code> 元素的。例如，<code>head</code> 標籤用於包含<code>HTML</code> 檔案中的所有<code>head</code># 元素</td>
</tr></tbody>
</table>
<h3 data-id="heading-2"><strong> Q3：區塊級元素和內聯元素有什麼不同？ </strong></h3>
<p><strong>區塊級元素</strong>：佔據其父元素（容器）的整個空間，並創建了一個「區塊」。通常瀏覽器會在區塊級元素前後另起一行，能容納其他區塊元素或內聯元素。包括：<code><p></code>、 <code><div></code>、<code><blockquote></code>、<code><img></code>、<code>< ;section></code>、<code><form></code>、<code><nav></code>、<code><h1>-<h6></code>、<code>< ul></code> 和<code><li></code></p>
<p><strong>內聯元素</strong>：只佔據它對應標籤的邊框所包含的空間，只能容納文字或其他內聯元素的元素。包括：<code><span></code>、<code><em></code>、<code><q></code>、<code><label></code>、<code>< ;strong></code>、<code><a></code>、<code><input></code></p>
<table>
<thead><tr class="firstRow">
<th>區塊級元素</th>
<th>內聯元素</th>
</tr></thead>
<tbody>
<tr>
<td>區塊級元素被繪製為一個區塊，它可以伸展以填充它可用的整個寬度，即其容器的寬度，並且將始終從新行開始</td>
<td>內聯元素被繪製在它們被定義的地方，並且只佔用絕對需要的空間</td>
</tr>
<tr>
<td>每個塊狀元素都從新的一行開始，並且其後的元素也另起一行（獨佔一行）；元素的高度、寬度、行高以及頂和底邊距都可設定；元素寬度在不設定的情況下，佔它本身父容器的100%（和父元素寬度一致）</td>
<td>和其他元素在同一行上，不獨佔一行；元素的高度、寬度及頂部底部邊距不可設定</td>
</tr>
</tbody>
</table>
<h3 data-id="heading-3"><strong>Q4: What is semantic HTML? </strong></h3>
<p>Semantic HTML is a coding style that uses HTML markup to enhance the semantics or meaning of content. In semantic HTML, the <code><b> </b></code> tag is not used for bold statements but <code><strong></strong></code>, and for italic statements it is not <code>. <i> </i></code>, instead use <code><em></em></code>. </p>
<h3 data-id="heading-4"><strong>Q5: List the commonly used list tags </strong></h3>
<p> Lists are involved in page production, and there are special tags used to represent list data in <code>HTML</code> Tags, as follows: </p>
<ul>
<li>
<strong>Ordered list</strong>: An ordered list displays elements in numbered format, represented by <code><ol></code>tags</li>
<li>
<strong>Unordered list</strong>: An unordered list displays elements in bullet format, which is represented by the <code><ul></code> tag. </li>
<li>
<strong>Definition list</strong>: A definition list displays elements in definition form, just like in a dictionary, such as <code><dl></code>, <code><dt># The ## and </code><dd><code> tags are used to define the description list. </code>
</li>
</ul>
<h3 data-id="heading-5">Q6: Explain HTML tag semantics<strong></strong>
</h3>HTML is markup semantics, and document content has its own semantics. Common ones are as follows:<p></p> <ul>
<li><header><code>: used to define the title of the document. </code>
</li>
<li><nav><code>: defines the navigation link</code>
</li>
<li><section><code>: used to define a unit in the document</code>
</li>
<li><article><code>: Used to define independent, self-contained articles</code>
</li>
<li><aside><code>: Used to define content outside the content</code>
</li>
<li><footer><code>: used to define the footer of the document </code>
</li>
</ul>
<h3 data-id="heading-6">Q7: What is a ticker? <strong></strong>
</h3>The marquee effect was a very classic effect in the past and was available on almost every website. <p>marquee<code> 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 </code><marquee>……< ;/marquee><code> tag. </code></p>
<h3 data-id="heading-7">Q8: What is the difference between <strong>div<code> and </code>span<code>? The difference between </code></strong>
</h3>
<p>span<code> and </code>div<code> is that the </code>span<code> element is inline and is usually used for a small block within a line. For example, within a paragraph. And </code>div<code> is block level, which is equivalent to having a newline character before and after it, used to group larger code blocks. </code></p>
<h3 data-id="heading-8">Q9: <strong><!DOCTYPE html><code> tag is the </code>HTML<code> tag? </code></strong>
</h3>No, <p><!DOCTYPE html><code> declaration is not a </code>HTML<code> tag. </code><!DOCTYPE><code>The 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. </code><!DOCTYPE><code>The declaration must be on the first line of the HTML document. </code></p>HTML has various document types, such as <p>HTML 4.01 Strict<code>, </code>HTML 4.01 Transitional<code>, </code>HTML 4.01 Frameset<code>, </code>XHTML 1.0 Strict <code>, </code>XHTML 1.0 Transitional<code>, </code>XHTML 1.0 Frameset<code>, </code>XHTML 1.1<code>, etc. Therefore, </code><!DOCTYPE html><code> is used to define the HTML document type. </code></p>For <p>HTML5<code> documents, there is no </code>DTD<code>, so there is no difference between strict mode and mixed mode. </code>HTML5<code> has a relatively loose syntax and implementation At this time, backward compatibility has been implemented to the greatest extent possible. </code></p>
<h3 data-id="heading-9">Q10: What are the differences between <strong>HTML<code>, </code>XML<code> and </code>XHTML<code>? </code></strong>
</h3>
<ul>
<li>HTML<code>: HyperText Markup Language </code>
</li>
<li>XML<code>: Extensible Markup Language Language) </code>
</li>
<li>XHTML<code>: Extensible Hypertext Markup Language </code>
</li>
</ul>##XHTML<p> is the current <code>HTML The successor of the </code> version is <code>HTML</code> in the <code>XML</code> document. The difference between <code></code></p>HTML<p> and <code>XHTML</code> is: <code></code></p>
<ul>HTML<li> is a standard universal markup language XML is an application of extensible markup language. <code></code>
</li>HTML<li> Tags are not case sensitive XHTML All tags must be lowercase. <code></code>
</li>XHTML<li> All attributes must use double quotes <code></code>
</li>HTML<li> is about display information, while <code>XHTML</code> is about description information . <code></code>
</li>
</ul>Q11: What is an image map? <h3 data-id="heading-10">
<strong></strong>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: </h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><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></pre><div class="contentsignin">登入後複製</div></div><p> However, there are many alternatives now. </p><h3 data-id="heading-11"><strong>Q12：超链接和锚点的区别？</strong></h3><p>HTML中的<code><a></code> 是 <code>anchor</code>（锚）的缩写，现在把带有 <code>href</code> 属性的称作超链接，把没有 <code>href</code> 属性只有 <code>name</code> 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签 <code><a></code> 的两种呈现方式。命名锚点同城用于页面定位，超链接用于页面间的跳转。</p><h3 data-id="heading-12"><strong>Q13：简述<code>HTML5</code>离线储存</strong></h3><p>现在日常使用的APP，有部分内容是使用内嵌webview的方式，浏览页面内容，这种方案的优势是WEB和APP共用一个网站，像掘金的APP就是使用这种方式。为了避免重复加载页面或者在无网络的情况下正常展现内容，可以采用离线存储，其中一种方案就是使用 <code>manifest</code> 。</p><p>在线情况下，浏览器发现HTML头部有<code>manifest</code>属性，它会请求<code>manifest</code>文件，第一次访问，那么浏览器就会根据<code>manifest</code>文件的内容下载相应的资源，进行离线存储。</p><p>在页面头部加入<code>manifest</code>属性，如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><html manifest="cache.manifest"></pre><div class="contentsignin">登入後複製</div></div><p>然后在<code>cache.manifest</code>文件中编写离线存储的资源规则，代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">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</pre><div class="contentsignin">登入後複製</div></div><h3 data-id="heading-13"><strong>Q14：什么是<code>iframe</code></strong></h3><p><code>iframe</code>是嵌入式框架, 是html标签, 是一个内联元素, <code>iframe</code> 元素会创建包含另外一个文档的内联框架（即行内框架) 。通常可以使用iframe内嵌网页，跨域ajax通讯的实现，微前端，广告嵌入等。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><iframe src="home.html"></iframe></pre><div class="contentsignin">登入後複製</div></div><h3 data-id="heading-14"><strong>Q15：<code>position</code>有哪些值？</strong></h3>
<p><code>position</code> 属性用于指定一个元素在文档中的定位方式。<code>top</code>、<code>right</code>、<code>bottom</code> 和 <code>left</code> 属性决定了该元素的最终位置。</p>
<ul>
<li>
<code>static</code>： 默认值，没有定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性下 <code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code> 和 <code>z-index</code> 属性无效。</li>
<li>
<code>relative</code> 相对定位：元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（此时会在此元素未添加定位时所在位置留下空白）。<code>position:relative</code> 对<code> table-row</code>、<code>table-column</code>、<code>table-cell</code>、<code>table-caption</code> 元素无效。</li>
<li>
<code>absolute</code> 绝对定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 <code>static</code> 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（<code>margins</code>），且不会与其他边距合并。</li>
<li>
<code>fixed</code> 固定定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变</li>
<li>
<code>sticky</code> 元素根据正常文档流进行定位，相对它的最近滚动祖先和最近块级祖先。</li>
</ul>
<h3 data-id="heading-15"><strong>Q16：<code>title</code> 和 <code>h1</code> 的区别？</strong></h3>
<p><code>h1</code> 不等于 <code>title</code>。<code>h1</code> 为大标题，一般用作文章的标题，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。<code>title</code> 为页面标题，可以包含 <code>h1</code> 的标题，一般面对的是搜索引擎和浏览器标签。</p>
<h3 data-id="heading-16"><strong>Q17：<code>display:none</code>和<code>visibility:hidden</code>的区别</strong></h3>
<p>都能把页面上的元素隐藏起来，两者的区别如下：</p>
<ul>
<li>
<code>display:none</code>: Hidden objects will not occupy any physical space and will not affect the layout of other elements </li>
<li>
<code>visible:hidden</code>: 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. </li>
<li>Whether to re-render after the attribute value is changed: <code>visibility:hidden</code> will not be rendered; <code>display:none</code> will be re-rendered. </li>
</ul>
<h3 data-id="heading-17"><strong>Q18: Reflow and redraw</strong></h3>
<p>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: <code>color</code>, <code>background-color</code>, <code>visibility</code>, 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. </p>
<p>For more programming-related knowledge, please visit: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">Introduction to Programming</a>! ! </p>
以上是18個必知必會的HTML面試題目（附答案解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
