<p>Cet article partagera avec vous 18 questions d'entretien HTML courantes, avec analyse des réponses, pour vous aider à consolider vos bases. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde. </p>
<p><img src="https://img.php.cn/upload/article/000/000/024/60f16149386c0121.jpg" alt="18 questions d'entretien HTML incontournables (avec analyse des réponses)" ></p>
<p><code>HTML</code> est l'un des langages les plus utiliséspour le développement d'applications sur Internet. Il peut nous plonger dans le monde du <code>Web</code> développement et améliorer nos compétences. Si vous souhaitez vous engager dans une carrière liée au <code>WEB</code> développement (développement front-end), vous devez maîtriser les bases de <code>HTML</code> Commençons notre revue sous forme de questions et réponses pour ouvrir la voie à de nouvelles personnes qui s'y intéressent. pour entrer dans cette industrie. [Tutoriel recommandé : <a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">Tutoriel vidéo HTML</a>]</p>
<h3 data-id="heading-0"><strong>Q1 : Qu'est-ce que le HTML ? </strong></h3>
<p>HyperText Markup Language (HyperText Markup Language, en abrégé : <code>HTML</code>) est un langage de balisage standard utilisé pour créer des pages Web. <code>HTML</code> Rendre le texte plus interactif et dynamique, qui est la pierre angulaire de la création de sites Web et d'applications WEB. <code>HTML</code> permet d'intégrer des images, des tableaux, des liens et peut être utilisé pour créer des formulaires interactifs. </p>
<h3 data-id="heading-1"><strong>Q2 : Quelle est la différence entre les éléments HTML et les balises ? L'élément </strong></h3>
<p> représente une certaine structure ou sémantique et se compose généralement d'une balise de début, d'un contenu et d'une balise de fin. Les balises </p>
<p> sont des objets entourés de crochets <code><head></code> et <code><body></code> tels que <code><table></code>, <code><</code> et <code>></code>. La plupart des balises apparaissent par paires, telles que <code><div></div></code> et <code><h1></h1></code>. </p>
<table>
<thead><tr class="firstRow">
<th>Élément</th>
<th>Tag</th>
</tr></thead>
<tbody><tr>
<td>Web HTML page Ou un seul composant d'un document qui représente la structure ou la sémantique. Par exemple, l'élément <code>title</code> représente le titre du document</td>
<td>
<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> La racine du document, utilisée pour marquer l'élément <h3 data-id="heading-2">. Par exemple, la balise <code>head</code> est utilisée pour inclure tous les éléments <code>head</code> dans le <strong> fichier</strong>
</h3>
</td>
</tr></tbody>
</table>Q3 : Niveau bloc Quelle est la différence entre un élément et un élément en ligne ? <p><strong></strong><code><p></code>Élément de niveau bloc<code><div></code> : occupe tout l'espace de son élément parent (conteneur), créant un "bloc". Habituellement, les navigateurs créent une nouvelle ligne avant et après un élément de niveau bloc pour accueillir d'autres éléments de bloc ou éléments en ligne. Comprenant : <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> et <p><strong></strong><code><span></code>Éléments en ligne<code><em></code> : occupent uniquement l'espace inclus dans la bordure de son étiquette correspondante et ne peuvent accueillir que du texte ou d'autres éléments en ligne éléments. Comprend : <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 : Qu'est-ce que le HTML sémantique ? </strong></h3>
<p>Le HTML sémantique est un style de codage qui utilise le balisage HTML pour améliorer la sémantique ou la signification du contenu. En HTML sémantique, la balise <code><b> </b></code> n'est pas utilisée pour les instructions en gras mais <code><strong></strong></code> , et les instructions en italique ne sont pas utilisées <code><i> </i></code> mais <code><em></em></code> . </p>
<h3 data-id="heading-4"><strong>Q5 : Répertoriez les balises de liste couramment utilisées </strong></h3>
<p>Imliquant les listes dans la production de pages, il existe des balises spécifiquement utilisées pour représenter les données de liste dans <code>HTML</code>, comme suit : </p>
<ul>
<li>
<strong>Liste ordonnée</strong> : Une liste ordonnée est numérotée. Format d'affichage éléments, représentés par des <code><ol></code> balises </li>
<li>
<strong>Liste non ordonnée</strong> : La liste non ordonnée affiche les éléments au format puce, qui sont représentés par des <code><ul></code> balises. </li>
<li>
<strong>Liste de définitions</strong> : la liste de définitions affiche les éléments sous forme de définition, tout comme dans un dictionnaire, comme les balises <code><dl></code>, <code><dt></code> et <code><dd></code> sont utilisées pour définir des listes de descriptions. </li>
</ul>
<h3 data-id="heading-5"><strong>Q6 : Expliquez la sémantique des balises HTML </strong></h3>
<p>HTML est une sémantique de balises, et le contenu du document a sa propre sémantique. Les plus courantes sont les suivantes : </p>
<ul>
<li>
<code><header></code> : utilisée pour définir le titre du document. </li>
<li>
<code><nav></code> : définit les liens de navigation </li>
<li>
<code><section></code> : utilisé pour définir une unité dans le document </li>
<li>
<code><article></code> : utilisé pour définir des articles indépendants et autonomes </li>
<li>
<code><aside></code> : utilisé pour définir un contenu en dehors du contenu </li>
<li>
<code><footer></code> : utilisé pour définir le pied de page du document</li>
</ul>
<h3 data-id="heading-6"><strong>Q7 : Qu'est-ce qu'un ticker ? </strong></h3>
<p>L'effet chapiteau était un effet très classique dans le passé et presque tous les sites Internet en disposent. <code>marquee</code> est utilisé pour faire défiler le texte sur les pages Web, il peut faire défiler automatiquement les images ou le texte vers le haut, le bas, la gauche ou la droite, à condition que le texte que vous souhaitez faire défiler soit placé à l'intérieur de la balise <code><marquee>……</marquee></code>. </p>
<h3 data-id="heading-7"><strong>Q8 : Quelle est la différence entre <code>div</code> et <code>span</code> ? La différence entre </strong></h3>
<p><code>span</code> et <code>div</code> est que l'élément <code>span</code> est en ligne et est généralement utilisé pour un petit bloc dans une ligne, comme dans un paragraphe. Et <code>div</code> est le niveau de bloc, qui équivaut à un caractère de nouvelle ligne avant et après, utilisé pour regrouper des blocs de code plus gros. </p>
<h3 data-id="heading-8"><strong>Q9 : La balise <code><!DOCTYPE html></code> est-elle une balise <code>HTML</code> ? </strong></h3>
<p> ne l'est pas, la déclaration <code><!DOCTYPE html></code> n'est pas une balise <code>HTML</code>. <code><!DOCTYPE></code>La déclaration est appelée définition de type de document (DTD) et le but de la déclaration est d'indiquer au navigateur le type de fichier. Permet à l'analyseur du navigateur de savoir quelle spécification doit être utilisée pour analyser le document. <code><!DOCTYPE></code>La déclaration doit être sur la première ligne du document HTML. </p>
<p>HTML propose différents types de documents tels que <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>, etc. Par conséquent, <code><!DOCTYPE html></code> est utilisé pour définir le type de document HTML. </p>
<p>Pour le document <code>HTML5</code>, il n'y a pas de <code>DTD</code> , et il n'y a aucune différence entre le mode strict et le mode mixte <code>HTML5</code> a une syntaxe relativement lâche Une fois implémentée, la compatibilité ascendante a été obtenue autant que possible. </p>
<h3 data-id="heading-9"><strong>Q10 : Quelle est la différence entre <code>HTML</code>, <code>XML</code> et <code>XHTML</code> ? </strong></h3>
<ul>
<li>
<code>HTML</code> : Langage de balisage hypertexte </li>
<li>
<code>XML</code> : Langage de balisage extensible </li>
<li>
<code>XHTML</code> : Langage de balisage hypertexte extensible </li>
</ul>
<p><code>XHTML</code> est actuellement Le successeur de la version <code>HTML</code> est <code>XML</code> dans la documentation <code>HTML</code>. La différence entre </p>
<p><code>HTML</code> et <code>XHTML</code> est la suivante : </p>
<ul>
<li>
<code>HTML</code> est une application du langage de balisage universel standard et XML est une application du langage de balisage extensible. </li>
<li>
<code>HTML</code> Les balises ne sont pas sensibles à la casse XHTML Toutes les balises doivent être en minuscules. </li>
<li>
<code>XHTML</code>Tous les attributs doivent utiliser des guillemets doubles. </li>
<li>
<code>HTML</code> concerne l'affichage des informations, tandis que <code>XHTML</code> concerne la description des informations. </li>
</ul>
<h3 data-id="heading-10"><strong>Q11 : Qu'est-ce qu'une image cliquable ? </strong></h3>
<p>Parfois, il est nécessaire d'ajouter différents liens vers différentes zones d'une image. La méthode habituelle consiste à utiliser une image cliquable pour devenir un point chaud d'image. Le code spécifique est le suivant : </p><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">Copier après la connexion</div></div><p> Cependant, il existe désormais de nombreuses alternatives. </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">Copier après la connexion</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">Copier après la connexion</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">Copier après la connexion</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> : L'objet caché n'occupera aucun espace physique et n'affectera pas la disposition des autres éléments. </li>
<li>
<code>visible:hidden</code> : Rendre l'objet invisible sur la page Web, mais il occupera de l'espace physique sur la page Web. , cela signifie invisible mais touchable. </li>
<li>S'il faut restituer après que la valeur de l'attribut ait changé : <code>visibility:hidden</code> ne sera pas rendu ; <code>display:none</code> sera restitué. </li>
</ul>
<h3 data-id="heading-17"><strong>Q18 : Redistribuer et redessiner</strong></h3>
<p>Redistribuer, lorsque la taille, la structure ou certains attributs de tout ou partie des éléments de l'arborescence de rendu changent, le navigateur restitue une partie ou la totalité du document. Redessiner, lorsque le changement de style d'un élément sur la page n'affecte pas sa position dans le flux documentaire (par exemple : <code>color</code>, <code>background-color</code>, <code>visibility</code>, etc.), le navigateur attribuera le nouveau style à l'élément et le redessinera . Les deux auront des impacts différents sur les performances de la page, qui ne seront pas présentés ici. </p>
<p>Pour plus de connaissances sur la programmation, veuillez visiter : <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">Introduction à la programmation</a> ! ! </p>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
