第一章 面试题基础篇

1.1 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具有更小的体积。兼容性不是特别好。