前端面试题2022-HTML篇_html5参考文献-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45815859/article/details/128208808

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

文章目录

一、HTML篇（9道）

一、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

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

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

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

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

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

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

以下为解决方案：

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

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 用来定义用于网格的基于矢量的图形。

canvas
canvas不依赖分辨率。
canvas支持事件处理器。
canvas最适合带有大型渲染区域的应用程序（比如谷歌地图）。
canvas复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）。
canvas不适合游戏应用。
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的新增

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