HTML 面接で知っておくべき 18 の質問 (回答分析付き)

この記事では、基礎を強化するのに役立つ、HTML 面接でよくある 18 の質問と回答分析を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

HTML は、インターネット上でアプリケーション開発に最も広く使用されている言語の 1 つであり、## の世界に深く入り込むことができます。 #Web 開発、スキル向上。 WEB 開発 (フロントエンド開発) に関連するキャリアに従事したい場合は、HTML の基本を熟知している必要があります。今後の旅に備えるための質問と回答、この業界に新規参入する人たちの道を切り開く。 [推奨チュートリアル: html ビデオ チュートリアル ]

Q1: HTML とは何ですか? <strong></strong>

ハイパーテキスト マークアップ言語 (ハイパーテキスト マークアップ言語、

HTML と呼ばれる) は、Web ページの作成に使用される標準のマークアップ言語です。 HTML テキストをよりインタラクティブかつダイナミックにします。これは、Web サイトや WEB アプリケーション構築の基礎です。HTML を使用すると、画像、表、リンクを埋め込むことができ、インタラクティブなフォームの作成に使用できます。情報を構造化するために使用されます。

Q2: HTML 要素とタグの違いは何ですか? <strong></strong>

要素は特定の構造またはセマンティクスを表し、通常は開始タグ、内容、終了タグで構成されます。

タグは、山括弧 ## で囲まれた

、、 などです。 # と <code>> で囲まれたオブジェクトのほとんどのタグは、<div></div>、 などのペアで表示されます。 。 要素 # HTML Web ページまたはドキュメントの単一コンポーネント構造またはセマンティクスを表します。たとえば、title 要素はドキュメントのタイトル を表します。ドキュメントのルートは、 を HTML# に含めるために使用されます。 ## file Q3: ブロックレベル要素とインライン要素の違いは何ですか?

タグ
HTML	HTML 要素をマークするために使用されます。たとえば、head タグは、すべての head 要素

ブロック レベル要素 : 親要素 (コンテナ) のスペース全体を占有し、「ブロック」を作成します。通常、ブラウザは、他のブロック要素またはインライン要素を収容するために、ブロックレベル要素の前後に新しい行を作成します。含まれるもの:

、

、<blockquote></blockquote>、<img src="/static/imghwm/default1.png" data-src="devpoint.jpg" class="lazy" alt="HTML 面接で知っておくべき 18 の質問 (回答分析付き)" >、&lt ;セクション>、、<nav></nav>、<h1>-<h6></h6> </h1>、 および <li>インライン要素 : 対応するラベルの境界線に含まれるスペースのみを占有し、テキストまたは文字のみを収容できます。 other インライン要素の要素。含まれるもの:

、<em></em>、<q></q>、<label></label>、&lt ;strong>、<a></a>、<input>#ブロックレベル要素

インライン要素ブロック レベルの要素はブロックとして描画され、利用可能な幅全体 (つまり、そのコンテナであり、常に新しい行から始まりますインライン要素は定義された場所に描画され、絶対に必要なスペースのみを占有しますすべてのブロック要素は新しい行に描画されます 行で始まり、後続の要素も新しい行で始まります (排他的な行を占有します)。要素の高さ、幅、行の高さ、上下の余白を設定できます。要素の幅は設定されておらず、独自の親コンテナのスペースを 100% 占有します (親要素と同じ幅) 排他的な行ではなく、他の要素と同じ行にあります。高さ、幅要素の上下の余白は設定できません

Q4：什麼是語意 HTML？

語意 HTML 是一種編碼風格，它是使用 HTML 標記來加強內容的語意或意義。在語意HTML中<b> </b> 標籤不用於粗體語句而是<strong></strong> ，斜體語句不是用 <i> </i>，而是用<em></em>。

Q5：列出常用的列表標籤

在頁面製作中涉及列表，在HTML 中有專門用於表示列表資料的標籤，如下：

<li> 有序列表：有序列表以編號格式顯示元素，由<ol></ol>標籤表示 <li> 無序列表：無序列表以項目符號格式顯示元素，它由<ul></ul>標籤表示。 <li> 定義清單：定義清單以定義形式顯示元素，就像在字典中一樣，如<dl></dl>、 <dt></dt>和<dd></dd>標籤用於定義描述清單。

Q6：解釋HTML標籤語意

HTML 是標記語義，文件內容是有其語意的，常見的如下：

<li> <header></header>：用來定義文件的標題。 <li> <nav></nav>：定義了導覽連結 <li> #<section></section> : 用來定義文件中的一個單元 <li> #<article></article>：用於定義獨立的、自包含的文章 <li> <aside></aside>：用於定義內容以外的內容 <li> <footer></footer>：用於定義文件的頁尾

#Q7：什麼是跑馬燈？

跑馬燈效果以前是很經典的效果，幾乎每個網站都有。 marquee 用於網頁上的滾動文本，它可以自動向上、向下、向左或向右滾動圖像或文本，只要將要滾動的文本放在<marquee>……&lt ;/marquee></marquee> 標籤內。

Q8：div 和 span 的差別？

span和div的差別在於span元素是內聯的，通常用於一行內的一小塊，例如段落內。而 div 是區塊級，相當於在其前後有一個換行符，用於對較大的程式碼區塊進行分組。

Q9： 標籤是否為 <code>HTML 標籤？

不是， 宣告不是 <code>HTML 標籤。 宣告叫做檔案類型定義（DTD），宣告的作用為了告訴瀏覽器該檔案的類型。讓瀏覽器解析器知道應該用哪個規格來解析文件。 <code>聲明必須在 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 等。因此， 用於定義 HTML 文件類型。

對於HTML5文檔，沒有DTD ，也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經盡可能大的實現了向後相容。

Q10：HTML、XML 和 XHTML 有什麼不同？

<li> HTML：超文本標記語言（HyperText Markup Language） <li> XML：可擴展標記語言（Extensible Markup Language） <li> XHTML：可擴充超文本標記語言（Extensible Hypertext Markup Language）

##XHTML是目前HTML 版的繼承者，是XML文件中的HTML。

HTML 和XHTML 之間的差異是：

<li>HTML是標準通用標記語言的應用，XML是一種可擴展標記語言的應用程式。 <li>HTML標籤不區分大小寫XHTML所有標籤都必須小寫。 <li>XHTML所有屬性都必須使用雙引號 <li>HTML 是關於顯示訊息，而XHTML 是關於描述訊息。

Q11：什麼是影像地圖？ <strong></strong>

有時需要為一張圖片不同區域增加不同的鏈接，通常的做法是使用圖像地圖也成圖像熱點。具體的程式碼如下：

<img src="/static/imghwm/default1.png"  data-src="devpoint.jpg"  class="lazy"   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>

不過現在已經有很多替代方案。

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

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

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 属性决定了该元素的最终位置。

<li> static： 默认值，没有定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性下 top、right、bottom、left 和 z-index 属性无效。 <li> relative 相对定位：元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（此时会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。 <li> absolute 绝对定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 <li> fixed 固定定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变 <li> sticky 元素根据正常文档流进行定位，相对它的最近滚动祖先和最近块级祖先。

Q16：title 和 h1 的区别？

h1 不等于 title。h1 为大标题，一般用作文章的标题，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。title 为页面标题，可以包含 h1 的标题，一般面对的是搜索引擎和浏览器标签。

Q17：display:none和visibility:hidden的区别

都能把页面上的元素隐藏起来，两者的区别如下：

<li> display:none：被隱藏的物件不會佔用任何實體空間，不會影響其他元素的佈局 <li> visible:hidden：使物件在網頁上不可見，但會在網頁上佔用實體空間，通俗來說就是看不見但摸得到。 <li>屬性值改變後是否重新渲染：visibility:hidden不渲染；display:none 會重新渲染。

Q18：回流與重繪

回流，當渲染樹中部分或全部元素的尺寸、結構、或某些屬性改變時，瀏覽器重新渲染部分或全部文件的過程。重繪，當頁面中元素樣式的改變並不影響它在文件流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦值給元素並重新繪製它的過程。兩者會對頁面的效能產生不同的影響，這裡不展開介紹。

更多程式相關知識，請造訪：程式設計入門！ ！

以上がHTML 面接で知っておくべき 18 の質問 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。