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

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

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是关键词标签