前端HTML面试题

高频题

1、行内元素有哪些？块级元素有哪些？空元素（void）有哪些？

（1）行内元素：a，b，span，img，input，strong，label，button，select，textarea，em

（2）块级元素：div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用）

（3）空元素（void）：即没有内容的HTML元素。br（换行），hr（水平分割线），meta，link，input，img

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

（1）从属差异：link是XHTML标签，不仅可以加载css，还可以加载其他的；@import属于css范畴，只能加载css

（2）加载差异：用link引用css时，在页面加载时同时加载，而@import是在页面加载完成后再加载

（3）兼容性：link是XHTML标签，无兼容问题，而@import不兼容ie5以下的浏览器

（4）可操作性：link可以通过js控制DOM去改变样式，而@import不能

3、title与h1的区别、b与strong的区别、i与em的区别

title与h1的区别：title：显示在网页标题上； h1：显示在网页内容上

b与strong的区别：b：只有加粗的样式，没有实际的含义；strong：表示标签内字符比较重要，用以强调的

 i与em的区别：i：只是一个倾斜标签，没有实际含义；em：表示标签内字符重要，用以强调的

4、img标签的title和alt有什么区别

（1）title:非常的重要，这个是标题栏上面显示的，也就是你要设置的重要关键词，一般设置精准点；

（2）alt：图片属性，命名这个最好与title中最重要的关键词设置一样，这样对你的优化有更好的效果！

5、png,jpg/jpeg,gif,webp这些图片格式解释一下，分别什么时候用？

png:无损压缩，尺寸体积要比jpg/jpeg的大，比较适合用于制作小图标。

jpg:采取压缩算法，有一些失真，比png的体积要小，适合制作中大图片。

gif:一般用于制作动态图片。

webp:这个我们在网页上直接下载的很多都是这种图片，它是同时支持有损或者无损压缩，同质量的图片，webp具有更小的体积，兼容性不是特别的好。