<p>이 기사에서는 기초를 강화하는 데 도움이 되는 18가지 일반적인 HTML 인터뷰 질문과 답변 분석을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. </p>
<p><img src="https://img.php.cn/upload/article/000/000/024/60f16149386c0121.jpg" alt="꼭 알아야 할 HTML 면접 질문 18가지(답변 분석 포함)" ></p>
<p><code>HTML</code>은 인터넷 개발에 가장 널리 사용되는 언어 중 하나입니다. 이를 통해 우리는 <code>웹</code> 개발의 세계로 깊이 들어갈 수 있습니다. 우리의 기술을 향상시키세요. <code>WEB</code> 개발(프론트 엔드 개발)과 관련된 경력을 쌓고 싶다면 <code>HTML</code>의 기본을 능숙하게 익혀야 합니다. 이 업계에 진출하려는 새로운 사람들을 위한 길을 닦기 위한 질문과 답변입니다. [추천 튜토리얼: <a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html 비디오 튜토리얼">html 비디오 튜토리얼</a>]<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><strong>Q1: HTML이란 무엇입니까? </strong></p>HyperText Markup Language(HyperText Markup Language, 참조: <code>HTML</code>)는 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. <code>HTML</code>은 텍스트를 보다 대화형이고 동적으로 만들어 웹사이트 및 웹 애플리케이션 구축의 초석입니다. <code>HTML</code>을 사용하면 이미지, 표, 링크를 삽입할 수 있으며 대화형 양식을 만드는 데 사용할 수 있습니다. 정보를 구조화하는 데 사용됩니다. <table>
<h3 data-id="heading-1"><strong>Q2: HTML 요소와 태그의 차이점은 무엇인가요? </strong></h3> <thead> 요소는 특정 구조나 의미를 나타내며 일반적으로 시작 태그, 콘텐츠 및 종료 태그로 구성됩니다. <tr class="firstRow"><th> 태그는 <code></code>, <code></code>, <code><table> 등이며 꺾쇠 괄호 <code><로 묶입니다. ;</code>code> 및 <code>></code>로 래핑된 객체의 경우 대부분의 태그는 <code><div></div></code>, <code> <와 같이 쌍으로 나타납니다. ;h1></h1></code>. <th></th> 요소 <tbody>
<tr> 태그 <td></td>
<td></td>
</tr>
<tr>HTML 구조나 의미를 나타내는 웹 페이지나 문서의 단일 구성 요소입니다. 예를 들어, <code>title</code> 요소는 문서의 제목을 나타냅니다. <td></td>
<code>HTML</code> 문서의 루트는 <code>HTML</code> 요소를 표시하는 데 사용됩니다. 예를 들어, <code>head</code> 태그는 <code>HTML</code> 파일 <td></td>
</tr>
</tbody>
<h3 data-id="heading의 모든 <code>head</code> 요소를 포함하는 데 사용됩니다. -2"><strong>Q3: 블록 수준 요소와 인라인 요소의 차이점은 무엇인가요? </strong></h3>
</table>
<strong>블록 수준 요소</strong>: 상위 요소(컨테이너)의 전체 공간을 차지하여 "블록"을 생성합니다. 일반적으로 브라우저는 다른 블록 요소나 인라인 요소를 수용하기 위해 블록 수준 요소 앞뒤에 새 줄을 만듭니다. 포함: <code><p></p></code>, <code><div>, <code><blockquote></blockquote></code>, <code><img alt="꼭 알아야 할 HTML 면접 질문 18가지(답변 분석 포함)" ></code>, <code><section></section></code>, <code><form></form></code>, <code><nav></nav></code>, <code><h1>-<h6></h6>
</h1></code> code>, <code><ul></ul></code> 및 <code><li></code>🎜🎜<strong>인라인 요소</strong>: 해당 레이블의 테두리에 포함된 공간만 차지합니다. , 텍스트나 기타 인라인 요소만 담을 수 있는 요소입니다. 포함: <code><span></span></code>, <code><em></em></code>, <code><q></q></code>, <code><label></label></code>, <code><strong></strong></code>, <code><a></a></code>, <code><input></code>🎜🎜🎜🎜🎜블록 수준 요소🎜🎜인라인 요소🎜🎜 🎜🎜🎜🎜블록 수준 요소는 블록으로 그려지며, 사용 가능한 전체 너비, 즉 컨테이너 너비를 채울 수 있도록 늘어날 수 있으며 항상 새 줄에서 시작됩니다. 🎜🎜인라인 요소는 현재 위치에 그려집니다. 그리고 꼭 필요한 공간만 차지합니다🎜🎜🎜🎜각 블록 요소는 새 줄에서 시작하고 그 뒤의 요소도 새 줄에서 시작합니다(해당 줄에서만). 요소의 위쪽 및 아래쪽 여백을 모두 설정할 수 있습니다. 요소의 너비가 설정되지 않은 경우 자체 상위 컨테이너의 100%를 차지합니다(상위 요소의 너비와 동일) 🎜🎜 켜져 있습니다. 다른 요소와 동일한 줄이며 요소의 높이, 너비, 위쪽 및 아래쪽을 독점적으로 차지하지 않습니다. 여백을 설정할 수 없습니다🎜🎜🎜🎜<h3 data-id="heading-3"><strong>Q4: 시맨틱 HTML이란 무엇인가요? </strong></h3>
<p>Semantic HTML은 HTML 마크업을 사용하여 콘텐츠의 의미나 의미를 향상시키는 코딩 스타일입니다. 의미론적 HTML에서 <code><b> </b></code> 태그는 굵은 문장에는 사용되지 않지만 <code><strong></strong></code>는 기울임꼴 문장에 사용됩니다. <code><i></i></code>가 아닌 <code><em></em></code>를 사용하세요. <code><b> </b></code> 标签不用于粗体语句而是 <code><strong></strong></code> ，斜体语句不是用 <code><i> </i></code>，而是用 <code><em></em></code>。</p>
<h3 data-id="heading-4"><strong>Q5：列出常用的列表标签</strong></h3>
<p>在页面制作中涉及列表，在 <code>HTML</code> 中有专门用于表示列表数据的标签，如下：</p>
<ul>
<li>
<strong>有序列表</strong>：有序列表以编号格式显示元素，由<code><ol></code>标签表示</li>
<li>
<strong>无序列表</strong>：无序列表以项目符号格式显示元素，它由<code><ul></code>标签表示。</li>
<li>
<strong>定义列表</strong>：定义列表以定义形式显示元素，就像在字典中一样，如 <code><dl></code>、 <code><dt></code>和<code><dd></code>标签用于定义描述列表。</li>
</ul>
<h3 data-id="heading-5"><strong>Q6：解释HTML标签语义</strong></h3>
<p>HTML 是标记语义，文档内容是有其语义的，常见的如下：</p>
<ul>
<li>
<code><header></code>：用于定义文档的标题。</li>
<li>
<code><nav></code>：定义了导航链接</li>
<li>
<code><section></code> : 用于定义文档中的一个单元</li>
<li>
<code><article></code>：用于定义独立的、自包含的文章</li>
<li>
<code><aside></code>：用于定义内容之外的内容</li>
<li>
<code><footer></code>：用于定义文档的页脚</li>
</ul>
<h3 data-id="heading-6"><strong>Q7：什么是跑马灯？</strong></h3>
<p>跑马灯效果在以前是很经典的效果，几乎每个网站都有。<code>marquee</code> 用于网页上的滚动文本，它可以自动向上、向下、向左或向右滚动图像或文本，只要将要滚动的文本放在 <code><marquee>……</marquee></code> 标签内。</p>
<h3 data-id="heading-7"><strong>Q8：<code>div</code> 和 <code>span</code> 的区别？</strong></h3>
<p><code>span</code>和<code>div</code>的区别在于<code>span</code>元素是内联的，通常用于一行内的一小块，例如段落内。而 <code>div</code> 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。</p>
<h3 data-id="heading-8"><strong>Q9：<code><!DOCTYPE html></code> 标签是否为 <code>HTML</code> 标签？</strong></h3>
<p>不是，<code><!DOCTYPE html></code> 声明不是 <code>HTML</code> 标签。<code><!DOCTYPE></code>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<code><!DOCTYPE></code>声明必须在 HTML 文档的第一行。</p>
<p>HTML 有多种文档类型，例如 <code>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> 等。因此，<code><!DOCTYPE html></code> 用于定义 HTML 文档类型。</p>
<p>对于<code>HTML5</code>文档，没有 <code>DTD</code> ，也就没有严格模式与混杂模式的区别，<code>HTML5</code> 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。</p>
<h3 data-id="heading-9"><strong>Q10：<code>HTML</code>、<code>XML</code> 和 <code>XHTML</code> 有什么区别？</strong></h3>
<ul>
<li>
<code>HTML</code>：超文本标记语言（HyperText Markup Language）</li>
<li>
<code>XML</code>：可扩展标记语言（Extensible Markup Language）</li>
<li>
<code>XHTML</code>：可扩展超文本标记语言（Extensible Hypertext Markup Language）</li>
</ul>
<p><code>XHTML</code>是当前<code>HTML</code>版的继承者，是<code>XML</code>文档中的<code>HTML</code>。</p>
<p><code>HTML</code> 和 <code>XHTML</code> 之间的区别是：</p>
<ul>
<li>
<code>HTML</code>是一种标准通用标记语言的应用，XML是一种可扩展标记语言的应用程序。</li>
<li>
<code>HTML</code>标签不区分大小写XHTML所有标签都必须小写。</li>
<li>
<code>XHTML</code>所有属性都必须使用双引号</li>
<li>
<code>HTML</code> 是关于显示信息，而 <code>XHTML</code><h3 data-id="heading-4"></h3>
</li>Q5: 일반적으로 사용되는 목록 목록 태그 </ul>
<h3 data-id="heading-10">
<strong> 목록은 페이지 생성에 관여하며 <code>HTML</code>에서 목록 데이터를 나타내는 데 사용되는 특수 태그가 있습니다. 태그는 다음과 같습니다. </strong><ul><li></ul>
</h3>순서가 지정된 목록<p>: 순서가 지정된 목록은 <code><ol></code> 태그 </p>
<li>
<p>순서가 지정되지 않은 목록</p>으로 표시되는 번호 형식으로 요소를 표시합니다. 순서가 지정되지 않은 목록은 <code><ul></code> 태그로 표시되는 글머리 기호 형식으로 요소를 표시합니다. 🎜</li>
<li>🎜정의 목록🎜: 정의 목록은 <code><dl></code>, <code><dt></code> 및 <code><dt></code>와 같은 사전과 마찬가지로 정의 형식으로 요소를 표시합니다. <dd> 태그는 설명 목록을 정의하는 데 사용됩니다. 🎜🎜<h3 data-id="heading-5">🎜Q6: HTML 태그 의미 설명 🎜🎜🎜HTML은 태그 의미이며, 문서 콘텐츠에는 고유한 의미가 있습니다. 🎜<ul>
<li> <code><header></header></code>: 문서 제목을 정의하는 데 사용됩니다. 🎜</li>
<li>
<code><nav></code>: 탐색 링크를 정의합니다. 🎜</li>
<li>
<code><section></code>: 문서의 단위를 정의하는 데 사용됩니다🎜</li>
<li><code><article>: 독립적이고 독립적인 기사를 정의하는 데 사용됩니다🎜<li>
<code><aside></code>: 콘텐츠 이외의 콘텐츠를 정의하는 데 사용됩니다🎜</li>
<li>
<code>< ;footer></code>: 문서의 바닥글을 정의하는 데 사용됩니다🎜🎜<h3 data-id="heading-6">🎜Q7: 티커란 무엇인가요? 🎜🎜🎜천막 효과는 과거에는 매우 고전적인 효과였으며 거의 모든 웹사이트에 있습니다. <code>marquee</code>는 웹페이지에서 텍스트를 스크롤하는 데 사용됩니다. 스크롤할 텍스트가 <code><marquee> ......</marquee></code> 태그입니다. 🎜<h3 data-id="heading-7">🎜Q8: <code>div</code>와 <code>span</code>의 차이점은 무엇인가요? 🎜🎜🎜 <code>span</code>과 <code>div</code>의 차이점은 <code>span</code> 요소가 인라인이며 일반적으로 다음과 같이 한 줄 내의 작은 영역에 사용된다는 것입니다. 단락 내에서와 같이. <code>div</code>는 블록 수준으로, 앞과 뒤에 줄 바꿈을 두는 것과 동일하며 더 큰 코드 블록을 그룹화하는 데 사용됩니다. 🎜<h3 data-id="heading-8">🎜Q9: <code><!DOCTYPE html></code> 태그가 <code>HTML</code> 태그인가요? 🎜🎜🎜아니요, <code><!DOCTYPE html></code> 선언은 <code>HTML</code> 태그가 아닙니다. <code><!DOCTYPE></code> 문을 문서 유형 정의(DTD)라고 합니다. 이 문의 목적은 브라우저에 파일 유형을 알려주는 것입니다. 브라우저 파서가 문서를 구문 분석하는 데 어떤 사양을 사용해야 하는지 알 수 있도록 합니다. <code><!DOCTYPE></code> 선언은 HTML 문서의 첫 번째 줄에 있어야 합니다. 🎜🎜HTML에는 <code>HTML 4.01 Strict</code>, <code>HTML 4.01 Transitional</code>, <code>HTML 4.01 Frameset</code>, <code>XHTML 1.0 Strict, <code>XHTML 1.0 Transitional</code>, <code>XHTML 1.0 프레임셋</code>, <code>XHTML 1.1</code> 등 따라서 <code><!DOCTYPE html></code>는 HTML 문서 유형을 정의하는 데 사용됩니다. 🎜🎜<code>HTML5</code> 문서에는 <code>DTD</code>가 없으므로 엄격 모드와 혼합 모드 사이에 차이가 없습니다. <code>HTML5</code>는 비교적 느슨한 구문을 갖습니다. . 구현 시 이전 버전과의 호환성이 최대한 구현되었습니다. 🎜<h3 data-id="heading-9">🎜Q10: <code>HTML</code>, <code>XML</code> 및 <code>XHTML</code>의 차이점은 무엇인가요? 🎜🎜<ul>
<li>
<code>HTML</code>: 하이퍼텍스트 마크업 언어 🎜</li>
<li>
<code>XML</code>: 확장 가능 마크업 언어 🎜<code>XHTML</code>: 확장 가능 하이퍼텍스트 마크업 언어 🎜🎜🎜<code>XHTML</code>는 <code>HTML</code>의 현재 버전의 후속 버전이며 <code>XML</code>의 <code>HTML</code>입니다. 문서. 🎜🎜<code>HTML</code>과 <code>XHTML</code>의 차이점은 다음과 같습니다. 🎜<ul>
<li>
<code>HTML</code>은 표준 범용 마크업 언어의 응용 프로그램이고 XML은 확장 가능한 마크업 언어를 적용한 것입니다. 🎜</li>
<li>
<code>HTML</code> 태그는 대소문자를 구분하지 않습니다. 모든 XHTML 태그는 소문자여야 합니다. 🎜</li>
<li>
<code>XHTML</code> 모든 속성은 큰따옴표를 사용해야 합니다. 🎜</li>
<li>
<code>HTML</code>은 정보 표시에 관한 것이고, <code>XHTML</code>은 정보 설명에 관한 것입니다. 🎜🎜🎜🎜Q11: 이미지 맵이란 무엇인가요? 🎜🎜🎜때때로 사진의 다양한 영역에 다양한 링크를 추가해야 하는 경우가 있습니다. 일반적인 방법은 이미지 맵을 사용하여 이미지 핫스팟이 되는 것입니다. 구체적인 코드는 다음과 같습니다. 🎜<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>🎜 하지만 지금은 대안이 많이 있습니다. 🎜<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>: 숨겨진 개체는 물리적 공간을 차지하지 않으며 다른 요소의 레이아웃에 영향을 주지 않습니다.</li>
<code>display:none</code>：被隐藏的对象不会占用任何物理空间，不会影响其他元素的布局</ul>
</li>
<li>
<code>visible:hidden</code>：使对象在网页上不可见，但是会在网页上占用物理空间，通俗来说就是看不见但摸得到。</li>
<li>属性值改变后是否重新渲染：<code>visibility:hidden</code>不渲染；<code>display:none</code> 会重新渲染。</li>
</ul>
<h3 data-id="heading-17"><strong>Q18：回流和重绘</strong></h3>
<p>回流，当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。重绘，当页面中元素样式的改变并不影响它在文档流中的位置时（例如：<code>color</code>、<code>background-color</code>、<code>visibility</code><code>visible:hidden</code>: 개체를 만듭니다. visible 웹페이지에서는 보이지 않지만 웹페이지의 물리적 공간을 차지합니다. 일반인의 관점에서는 보이지 않지만 만질 수 있습니다. </p>
</li>속성 값 변경 후 다시 렌더링할지 여부: <code>visibility:hidden</code>은 렌더링되지 않으며 <code>display:none</code>은 다시 렌더링됩니다. </ul>
</h3></code>
</h3>
</h3>
</h3>
</li></article></code></li>
</ul>
<h3 data-id="heading-17"><strong>Q18: 리플로우 및 다시 그리기</strong></h3>
</h3>
<p>리플로우, 일부 또는 모든 요소의 크기를 렌더링할 때 트리 구조, 구조 또는 특정 속성이 변경될 때 브라우저가 문서의 일부 또는 전체를 다시 렌더링하는 프로세스입니다. 페이지의 요소 스타일 변경이 문서 흐름의 위치에 영향을 주지 않는 경우 다시 그리기(예: <code>color</code>, <code>ground-color</code>, <code>) 가시성</code> 코드> 등), 브라우저는 요소에 새 스타일을 할당하고 다시 그립니다. 두 가지가 페이지 성능에 서로 다른 영향을 미치므로 여기서는 소개하지 않겠습니다. <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门"></a>더 많은 프로그래밍 관련 지식을 보려면 </p>프로그래밍 소개🎜를 방문하세요! ! 🎜</dd>
</li>
</div></code></code>
</th></tr>
</thead>
</table>
위 내용은 꼭 알아야 할 HTML 면접 질문 18가지(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
