关于前端:2022高频前端面试题HTML篇

31次阅读

共计 5462 个字符，预计需要花费 14 分钟才能阅读完成。

嗨！大家好！我是法医，一只医治系前端码猿🐒，与代码对话，聆听它们心底的呼声，期待着大家的点赞👍与关注➕。

📢最近整顿了一些前端高频面试题，分享给大家，如有问题欢送留言斧正，面试专栏我会长期更新，欢送大家点赞🤞、珍藏📌，感激！

1. 什么是 DOCTYPE，有何作用？

Doctype是 HTML5 的文档申明，通过它能够通知浏览器，应用哪一个 HTML 版本规范解析文档。在浏览器倒退的过程中，HTML 呈现过很多版本，不同的版本之间格局书写上略有差别。如果没有当时通知浏览器，那么浏览器就不晓得文档解析规范是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，咱们个别称为 怪异模式，这不仅会升高解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档申明是必须的。

2. 说说对 html 语义化的了解

HTML 标签的语义化，简略来说，就是用正确的标签做正确的事件，给某块内容用上一个最失当最合适的标签，使页面有良好的构造，页面元素有含意，无论是谁都能看懂这块内容是什么。

语义化的长处如下：

  • 在没有 CSS 款式状况下也可能让页面呈现出清晰的构造
  • 有利于 SEO 和搜索引擎建设良好的沟通，有助于爬虫抓取更多的无效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
  • 不便团队开发和保护，语义化更具可读性，遵循 W3C 规范的团队都遵循这个规范，能够缩小差异化

3. src 和 href 的区别

src 和 href 都是 HTML 中特定元素的属性，都能够用来引入内部的资源。两者区别如下：

  • src：全称source，它通常用于 img、video、audio、script 元素，通过 src 指向申请内部资源的起源地址，指向的内容会嵌入到文档中以后标签所在位置，在申请 src 资源时，它会将资源下载并利用到文档内，比如说：js 脚本、img 图片、frame 等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行结束。这也是为什么将 js 脚本放在底部而不是头部的起因。
  • href：全称hyper reference，意味着超链接，指向网络资源，当浏览器辨认到它指向的⽂件时，就会并⾏下载资源，不会停⽌对以后⽂档的解决，通常用于 a、link 元素。

4. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

  • title 属性示意网页的题目，h1 元素则示意档次明确的页面内容题目，对页面信息的抓取也有很大的影响
  • strong 是表明重点内容，有语气增强的含意，应用浏览设施浏览网络时：strong 会重读，而 b 是展现强调内容
  • i 是 italic(斜体) 的简写，是晚期的斜体元素，示意内容展现为斜体，而 em 是emphasize（强调）的简写，示意强调的文本

5. 什么是严格模式与混淆模式？

  • 严格模式：是以浏览器反对的最高规范运行
  • 混淆模式：页面以宽松向下兼容的形式显示，模仿老式浏览器的行为

6. 前端页面有哪三层形成，别离是什么？

形成：结构层 、 表示层 、 行为层

  1. 结构层（structural layer）

    结构层相似于盖房子须要打地基以及房子的悬梁框架，它是由 HTML 超文本标记语言来创立的，也就是页面中的各种标签，在结构层中保留了用户能够看到的所有内容，比如说：一段文字、一张图片、一段视频等等

  2. 表示层（presentation layer）

    表示层是由 CSS 负责创立，它的作用是如何显示无关内容，学名：层叠样式表，也就相当于装修房子，看你要什么格调的，田园的、中式的、地中海的，总之 CSS 都能办妥

  3. 行为层（behaviorlayer）

    行为层示意网页内容跟用户之间产生交互性，简略来说就是用户操作了网页，网页给用户一个反馈，这是 JavaScript 和DOM主宰的畛域

7. iframe 的作用以及优缺点

iframe 也称作嵌入式框架，嵌入式框架和框架网页相似，它能够把一个网页的框架和内容嵌入到现有的网页中。

长处：

  • 能够用来解决加载迟缓的内容，比方：广告

毛病：

  • iframe 会阻塞主页面的 Onload 事件
  • iframe 和主页面共享连接池，而浏览器对雷同域的连贯有限度，所以会影响页面的并行加载。然而能够通过 JS 动静给 ifame 增加 src 属性值来解决这个问题，当然也能够解决 iframe 会阻塞主页面的 Onload 事件的问题
  • 会产生很多页面，不易治理
  • 浏览器的后退按钮没有作用
  • 无奈被一些搜索引擎辨认

8. img 上 title 与 alt

  • alt：全称alternate，切换的意思，如果无奈显示图像，浏览器将显示 alt 指定的内容
  • title：当鼠标挪动到元素上时显示 title 的内容

区别：

个别当鼠标滑动到元素身上的时候显示 title，而alt 是 img 标签特有的属性，是图片内容的等价形容，用于图片无奈加载时显示，这样用户还能看到对于失落了什么货色的一些信息，相对来说比拟敌对。

9. H5 和 HTML5 区别

  • H5 是一个产品名词，蕴含了最新的 HTML5、CSS3、ES6 等新技术来制作的利用
  • HTML5 是一个技术名词，指的就是第五代 HTML

10. 行内元素和块级元素别离有哪些？有何区别？怎么转换？

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

常见的行级元素：span、a、img、button、input、select

块级元素：

  • 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
  • 宽度短少时是它的容器的 100%，除非设置一个宽度
  • 高度、行高以及外边距和内边距都是能够设置的
  • 块级元素能够包容其它行级元素和块级元素

行内元素：

  • 和其它元素都会在一行显示
  • 高、行高以及外边距和内边距能够设置
  • 宽度就是文字或者图片的宽度，不能扭转
  • 行级元素只能包容文本或者其它行内元素

应用行内元素须要留神的是：

  • 行内元素设置宽度 width 有效
  • 行内元素设置 height 有效，然而能够通过 line-height 来设置
  • 设置 margin 只有左右无效，高低有效
  • 设置 padding 只有左右无效，高低有效

能够通过 display 属性对行内元素和块级元素进行切换 (次要看第 2、3、4 三个值)：

11. label 的作用是什么？是怎么用的？

label元素不会向用户出现任何特殊效果，然而，它为鼠标用户改良了可用性，当咱们在 label 元素内点击文本时就会触发此控件。也就是说，当用户抉择该标签时，浏览器就会主动将焦点转到和标签相干的表单控件上。最罕用 label 的中央就是表单中的性别单选框了，当点击文字时也可能主动聚焦绑定的表单控件。

<form>
     <label for="male"> 男 </label>
     <input type="radio" name="sex" id="male">
     <label for="female"> 女 </label>
     <input type="radio" name="sex" id="female">
</form>

12. 对于 Web 规范以及 W3C 的了解

Web 规范 简略来说能够分为构造、体现、行为。其中构造是由 HTML 各种标签组成，简略来说就是 body 外面写入标签是为了页面的构造。体现指的是 CSS 层叠样式表，通过 CSS 能够让咱们的页面构造标签更具美感。行为指的是页面和用户具备肯定的交互，这部分次要由 JS 组成

W3C，全称：world wide web consortium 是一个制订各种规范的非盈利性组织，也叫万维网联盟，规范包含 HTML、CSS、ECMAScript 等等，web 规范的制订有很多益处，比如说：

  • 能够对立开发流程，对立应用标准化开发工具（VSCode、WebStorm、Sublime），不便多人合作
  • 学习老本升高，只须要学习规范就行，否则就要学习各个浏览器厂商规范
  • 跨平台，不便迁徙都不同设施
  • 升高代码保护老本

13. Quirks（怪癖）模式是什么？它和 Standards（规范）有什么区别？

页面如果写了 DTD，就意味着这个页面采纳对 CSS 反对更好的布局，而如果没有，则采纳兼容之前的布局形式，这就是 Quirks 模式，有时候也叫怪癖模式、诡异模式、怪异模式。

区别：总体会有布局、款式解析、脚本执行三个方面区别，这里列举一些比拟常见的区别：

  • 盒模型：在 W3C 规范中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在 Quirks 模式下，IE 的宽度和高度还蕴含了 padding 和 border
  • 设置行内元素的高宽：在 Standards 模式下，给行内元素设置 width 和 height 都不会失效，而在 Quriks 模式下会失效
  • 用 margin：0 auto 设置程度居中: 在 Standards 模式下，设置 margin：0 auto；能够使元素程度居中，然而在 Quriks 模式下生效
  • 设置百分比高度: 在 Standards 模式下，元素的高度是由蕴含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是有效的

14. 晓得什么是微格局吗？谈谈了解，在前端构建中应该思考微格局吗？

所谓的微格局是建设在已有的、被宽泛采纳的规范根底之上的一组简略的、凋谢的数据格式。

具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制订一些简略的约定，来兼顾 HTML 文档的人机可读性，相当于对 web 网页进行语义注解。

采纳微格局的 web 页面，在 HTML 文档中给一些标签减少一些属性，这些属性对信息的语义构造进行注解，有助于解决 HTML 文档的软件，更好的了解 HTML 文档。当爬取 web 内容时，可能更为精确地辨认内容块的语义，微格局能够对网站进行 SEO 优化。

15. HTML5 为什么只须要写<!DOCTYPE html>?

为什么 HTML5 只须要写一段：

<!DOCTYPE html>

而 HTML4 却须要写很长的一段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

其实次要是因为 HTML5 不基于 SGML，所以不须要援用 DTD。在 HTML4 中，<!DOCTYPE>申明援用 DTD，因为 HTML4 基于 SGML。DTD 规定了标记语言的规定，这样浏览器能力正确的出现内容。

16. HTML5 新增了哪些新个性？移除了哪些元素？

HTML5 次要是对于图像、地位、存储、多任务等性能的减少：

  • 语义化标签，如：article、footer、header、nav 等
  • 视频 video、音频 audio
  • 画布 canvas
  • 表单控件，calemdar、date、time、email
  • 天文
  • 本地离线存储，localStorage 长期存储数据，浏览器敞开后数据不失落，sessionStorage 的数据在浏览器敞开后主动删除
  • 拖拽开释

移除的元素：

  • 纯体现的元素：basefont、font、s、strike、tt、u、big、center
  • 对可选用性产生负面影响的元素：frame、frameset、noframes

17. 怎么解决 HTML5 新标签兼容问题？

次要有两种形式：

  1. 实现标签被辨认：通过 document.createElement(tagName) 办法能够让浏览器辨认新的标签，浏览器反对新标签后。还能够为新标签增加 CSS 款式

  2. 用 JavaScript 解决：应用 HTML5 的 shim 框架，在 head 标签中调用以下代码：

    <!--[if lt IE 9]>
 <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

18. 如何实现在一张图片上的某个区域做到点击事件

咱们能够通过图片热区技术：

  1. 插入一张图片，并设置好图像的无关参数，在 <img> 标记中设置参数usemap="#Map"，以示意对图像地图的援用。
  2. 用 <map> 标记设定图像地图的作用区域，并取名：Map；
  3. 别离用 <area> 标记针对相应地位互粉出多个矩形作用区域，并设定好链接参数href

例：

<body>
 <img src="./image.jpg" alt=""usemap="#Map" />
   <map name="Map" id="Map">
     <area alt=""title="" href="#" shape="poly"
         coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" />
     <area alt=""title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
 </map>
</body>

19. a 元素除了用于导航外，还有什么作用？

href 属性中的 url 能够是浏览器反对的任何协定，所以 a 标签能够用来手机拨号<a href="tel:110">110</a>，也能够用来发送短信<a href="sms:110">110</a>，还有邮件等等

当然，a 元素最常见的就是用来做 锚点 和 下载文件。

锚点能够在点击时疾速定位到一个页面的某个地位，而下载的原理在于 a 标签所对应的资源浏览器无奈解析，于是浏览器会抉择将其下载下来。

20. 你晓得 SEO 中的 TDK 吗？

在 SEO 中，TDK 其实就是 title、description、keywords 这三个标签，title 示意题目标签，description 是形容标签，keywords 是关键词标签

正文完
前端
发表至： 前端
2022-11-01
 0
关于前端:react-hook的最强拓展useEffect篇
关于前端:elementui-自定义主题的坑ReferenceError-primordials-is-not-defined
关于前端:前端那些事五JS2
关于前端:利用React实现多个场景下的鼠标跟随框提示框