WEB前端高频面试题（一） —— HTML八股文

What's past is prologue. （凡是过往，皆为序章。）

——莎士比亚

HTML面试题

行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

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

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

 区别一：link先有，后有@import（兼容性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具有更小的体积。兼容性不是特别好。