HTML面试题

面试题：行内元素有哪些？块级元素有哪些？空(void)元素哪些？

行内元素：span 、img、input
块级元素：div 、footer、header、section、p、h1...h6
空元素：br、hr ...
元素之间的转换问题
display:inline 把某元素转换成了行内元素 ===》不独占一行的，并且不能设置宽高
display:inline-block 把某元素转换成了行内块元素 ===》不独占一行，可以设置宽高
display:block 把某元素转换成了块元素 ===》不独占一行，并且可以设置宽高

面试题：页面导入样式时，使用link和@import有什么区别？

区别一：link先有，后有@inport(兼容性link比@import兼容好)
区别二：加载顺序的区别，浏览器先加载的标签link，后加载@import

面试题：title与h1的区别，b与strong的区别，i与em的区别？

title与h1的区别
定义：
title：概况了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1:文章主题内容，告诉蜘蛛我们的网站内容主要是什么
区别：
title他是显示在网页标题上，h1是显示在网页内容上
title比h1添加的重要（title > h1） 对于seo的了解
场景：
网站的logo都是用h1标签包裹的

b与strong的区别
定义：
b：实体标签，用来给文字加粗的
strong:逻辑标签，用来加强字符语气的
区别：
b标签只有加粗的样式，没有实际含义
strong表示标签内字符比较重要，用以强调的
题外话:为了符合css3的规范，b尽量少用，该用strong就行了

i与em的区别：
定义：
i：实体标签，用来做文字倾斜的
em:是逻辑标签，用来强调文字内容的
区别：
i 只是一个倾斜标签，没有实际含义
em 表示标签内容字符重要，用以强调的
场景：
i 更多的用在字体图标 ， em术语上（医药、生物）

面试题：img标签的title和alt有什么区别？

区别一：
title ：鼠标移入到图片显示的值
alt : 图片无法加载时显示的值
区别二：
在seo的层面上 , 蜘蛛抓取不到图片的内容，所以前段在写img标签的时候为了增加seo的效果要加入alt属性来描述遮住这张图是什么内容或者关键词。

面试题：png、jpg、gif这些图格式解释一下，分别什么时候用？

png 无损压缩 尺寸体积要比jpg/jpeg的大，适合小图标
jpg:采用压缩算法，有一点失真，比png体积要小
gif:一般是做动图的。
webp：同时支持有损或者无损，相同质量的图片，webp具有更小的体积。兼容性不是特别好。