18个必知必会的HTML面试题（附答案解析）-html tutorial-php.cn

<p>本篇文章给大家分享18个常见的HTML面试题，附答案解析，带你巩固一波地基。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/60f16149386c0121.jpg" class="lazy" 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 id="strong-Q-什么是-HTML-strong"><strong>Q1：什么是 HTML？</strong></h3> <p>超文本标记语言（HyperText Markup Language，简称：<code>HTML</code>）是一种用于创建网页的标准标记语言。<code>HTML</code> 使文本更具交互性和动态性，是构建网站及WEB应用的基石，<code>HTML</code>允许嵌入图像、表格、链接，并且可以用于创建交互式表单，它被用来结构化信息。</p> <h3 id="strong-Q-HTML元素和标签有什么区别-strong"><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 id="strong-Q-块级元素和内联元素有什么区别-strong"><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 id="strong-Q-什么是语义-HTML-strong"><strong>Q4：什么是语义 HTML？</strong></h3> <p>语义 HTML 是一种编码风格，它是使用 HTML 标记来加强内容的语义或含义。在语义HTML中 <code><b> </b></code> 标签不用于粗体语句而是 <code><strong></strong></code> ，斜体语句不是用 <code><i> </i></code>，而是用 <code><em></em></code>。</p> <h3 id="strong-Q-列出常用的列表标签-strong"><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 id="strong-Q-解释HTML标签语义-strong"><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 id="strong-Q-什么是跑马灯-strong"><strong>Q7：什么是跑马灯？</strong></h3> <p>跑马灯效果在以前是很经典的效果，几乎每个网站都有。<code>marquee</code> 用于网页上的滚动文本，它可以自动向上、向下、向左或向右滚动图像或文本，只要将要滚动的文本放在 <code><marquee>……</marquee></code> 标签内。</p> <h3 id="strong-Q-code-div-code-和-code-span-code-的区别-strong"><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 id="strong-Q-code-lt-DOCTYPE-html-gt-code-标签是否为-code-HTML-code-标签-strong"><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 id="strong-Q-code-HTML-code-code-XML-code-和-code-XHTML-code-有什么区别-strong"><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> 是关于描述信息。</li> </ul> <h3 id="strong-Q-什么是图像地图-strong"><strong>Q11：什么是图像地图？</strong></h3> <p>有时需要为一张图片不同区域增加不同的链接，通常的做法是使用图像地图也成图像热点。具体的代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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">Salin selepas log masuk</div></div><p>不过现在已经有很多替代方案。</p><h3 id="strong-Q-超链接和锚点的区别-strong"><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 id="strong-Q-简述-code-HTML-code-离线储存-strong"><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:php;toolbar:false;'><html manifest="cache.manifest"></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>然后在<code>cache.manifest</code>文件中编写离线存储的资源规则，代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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">Salin selepas log masuk</div></div><h3 id="strong-Q-什么是-code-iframe-code-strong"><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:php;toolbar:false;'><iframe src="home.html"></iframe></pre><div class="contentsignin">Salin selepas log masuk</div></div><h3 id="strong-Q-code-position-code-有哪些值-strong"><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 id="strong-Q-code-title-code-和-code-h-code-的区别-strong"><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 id="strong-Q-code-display-none-code-和-code-visibility-hidden-code-的区别-strong"><strong>Q17：<code>display:none</code>和<code>visibility:hidden</code>的区别</strong></h3> <p>都能把页面上的元素隐藏起来，两者的区别如下：</p> <ul> <li> <code>display:none</code>：被隐藏的对象不会占用任何物理空间，不会影响其他元素的布局</li> <li> <code>visible:hidden</code>：使对象在网页上不可见，但是会在网页上占用物理空间，通俗来说就是看不见但摸得到。</li> <li>属性值改变后是否重新渲染：<code>visibility:hidden</code>不渲染；<code>display:none</code> 会重新渲染。</li> </ul> <h3 id="strong-Q-回流和重绘-strong"><strong>Q18：回流和重绘</strong></h3> <p>回流，当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。重绘，当页面中元素样式的改变并不影响它在文档流中的位置时（例如：<code>color</code>、<code>background-color</code>、<code>visibility</code>等），浏览器会将新样式赋值给元素并重新绘制它的过程。两者会对页面的性能产生不同的影响，这里不展开介绍。</p> <p>更多编程相关知识，请访问：<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">编程入门</a>！！</p>

Atas ialah kandungan terperinci 18个必知必会的HTML面试题（附答案解析）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Arahan sembang dan cara menggunakannya

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7530

Tutorial CakePHP

1378

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles