1.面试题:行内元素有哪些?块级元素有哪些? 空(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具有更小的体积。兼容性不是特别好。