前端面试题2022-HTML篇

关于前端面试的题，最近整理了一些干货，经常被问到的一些问题，出现频率比较高的问题，如有不足之处，请高调指出，（⭐代表难度，星星越多越难，以次类推），此篇文章为面试题的html篇
自建博客文章链接：https://www.heblogs.cn

---

一、HTML篇（9道）

1、说一说对web语义化的了解⭐

参考文献：https://www.w3school.com.cn/html/html_jianjie.asp
用正确的标签做正确的事。提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验；有利于SEO ，便于搜索引擎爬虫爬取有效信息。

2、说说你对web标准和W3C的理解和认识⭐

参考文献：https://www.w3school.com.cn/w3c/w3c_html.asp
web标准将网页分为三个部分，表现(html)、结构(css)和行为(js)。
W3C是对web标准提出了规范化的要求

3、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?⭐

引用文献：https://www.w3school.com.cn/tags/tag_doctype.asp
声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
严格模式： 又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式： 又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

4、行内元素有哪些？块级元素有哪些？⭐

参考文献：https://www.w3school.com.cn/html/html_blocks.asp

1. 行内元素：通常不会以新行开始，并且元素没有宽和高，例如a,b,i,br,span等
2. 块级元素：会以新行来开始，有宽高可以修改，例如div p h1-6.hr等

5、< img > 的title和alt有什么区别?⭐

参考文献：https://www.w3school.com.cn/html/html_images.asp

1. alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
2. title会在鼠标在图片上停留时，显示一个悬浮框，其中显示的文字。为img提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。

5、多个img标签之间会有一条白线，怎么处理？为什么？⭐⭐

问题来源：由于img元素默认为内联元素，而内联元素的vertical-align属性的默认值为baseline文字基线对齐，正好图片底部的留白就是baseline和bottom之间的距离

以下为解决方案：

1. 添加display:block; 将其变为块级元素，去掉基线问题
2. 添加 vertical-align:middle，改变基线对齐方式
3. img 父级 div 元素 css 添加 font-size:0; 直接清除缝隙
4. 父元素添加overflow:hidden属性，溢出的留白裁剪掉
5. 设置图片的浮动或者定位属性，将其变为块级元素，去掉基线问题

6、Canvas和SVG熟练吗？有什么区别？⭐⭐⭐

canvas参考文献：https://www.w3school.com.cn/tags/tag_canvas.asp
svg参考文献：https://www.w3school.com.cn/tags/tag_svg.asp
Canvas和SVG是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片,Canvas事html5的新特性，SVG其实出来很多年了并不是html的独有。Canvas画布，利用JavaScript在网页绘制图像，SVG 用来定义用于网格的基于矢量的图形。

1. canvas
   canvas不依赖分辨率。
   canvas支持事件处理器。
   canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。
   canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
   canvas不适合游戏应用。
2. svg - Scalable Vector Graphics
   svg依赖分辨率。
   svg不支持事件处理器。
   svg弱的文本渲染能力。
   svg能够以 .png 或 .jpg 格式保存结果图像。
   svg最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

7、HTML5新特征⭐⭐

html5参考文献：https://www.w3school.com.cn/html/html5_intro.asp
html5新增了html，以及浏览器API。他不应该被理解成只是做html的新增

1. 文档结构新元素，例如：article,header,footer,main等
2. 新的表单元素，例如：datalist，keygen,output,等
3. 新的输入类型/属性，例如：color,date,month,autofocus,form等
4. HTML5 图像，例如：sva,canvas
5. 新的媒介元素，例如：audio,video,source,等
6. 新的浏览器开放API，例如：1、HTML5 Geolocation（地理定位）值得一提的是，在谷歌上，您需要在https环境使用它，dev需在火狐欧鹏等进行；2、web存储localStorage和sessionStorage；3、HTML5 应用程序缓存cache manifest；4、开线程-Web Workers等等，还有拖拽，sse，播放语音等等等等。
   不需要全部记下来，但是需要了解尤其是web存储

8、cookie与Html5的sessionStorage、localStorage的区别⭐⭐

参考文献：https://www.w3school.com.cn/html/html5_webstorage.asp

1. cookie数据始终在同源HTTP请求中携带，而sessionStorage和localStorage仅在本地保存
2. 存储大小限制不同：cookie-4k，sessionStorage和localStorage - 5M
3. 数据有效期不同：cookie可以自行设置失效期，sessionStorage在当前会话有效，localStorage始终有效。
4. 作用域不同：sessionStorage在当前会话有效，不能跨浏览器跨标签。而localStorage和cookie在所有同源窗口中都是共享的。

9、说一下iframe有哪些优点和缺点？⭐⭐

参考文献：https://www.w3school.com.cn/html/html_iframe.asp

1. iframe的优点：
   1、代码复用
   2、解决跨域

2. iframe的缺点：
   1、会产生很多页面，不易管理
   3、代码复杂，不易seo
   4、兼容性差
   5、iframe框架页面会增加http请求