首页 > web前端 > html教程 > 18个必知必会的HTML面试题(附答案解析)

18个必知必会的HTML面试题(附答案解析)

青灯夜游
发布: 2021-07-16 18:39:19
转载
4868 人浏览过
<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:什么是语义 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 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> 是关于描述信息。</li> </ul> <h3 data-id="heading-10"><strong>Q11:什么是图像地图?</strong></h3> <p>有时需要为一张图片不同区域增加不同的链接,通常的做法是使用图像地图也成图像热点。具体的代码如下:</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">登录后复制</div></div><p>不过现在已经有很多替代方案。</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>:被隐藏的对象不会占用任何物理空间,不会影响其他元素的布局</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>等),浏览器会将新样式赋值给元素并重新绘制它的过程。两者会对页面的性能产生不同的影响,这里不展开介绍。</p> <p>更多编程相关知识,请访问:<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">编程入门</a>!!</p>

以上是18个必知必会的HTML面试题(附答案解析)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:juejin.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板