那些你不得不知道的HTML知识点

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

行内元素：span、i、em、strong、b等等…
块元素：div、header、nav、article、section、aside、footer、h1~h6、ul、ol、dl、table等等…
空元素：area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr

扩展：
块元素独占一行，而行内块元素和行内元素可以和别人共处一行；
行内元素不能设置“width”和“height”，块元素和行内块元素可以设置“width”和“height”；
行内元素不能包含块元素，除了a元素；
行内元素可以包含别的行内元素；
行内元素脱离文档流后，会变成块元素；
等等…
另外它们之间可以互换，只需要给display属性赋不同的值（block、inline-block、inline）就可以了。

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

区别一、
先设计的link，@import在其之后（兼容性link比@import兼容）
区别二、
link在html页面进行导入外部样式，而@import则是在css中导入其他.css样式
区别三、
在加载顺序上马，浏览器先加载的link后加载@import

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

3.1 title与h1的区别：

定义：

title：概括的网站信息，可以告诉搜索引擎和用户这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们网站内容最主要的是什么

区别：

title是显示在网页标题上的，h1是显示在网页内容上的
在seo优化上title是要比h1重要的

场景：

大部分网页logo在都会包裹在h1标签里面，告诉蜘蛛我们网页最重要的内容是这个，一般网页有且只有一个h1标题。

3.2 b与strong的区别：

定义：

b：实体标签，用来给文字加粗的
strong：逻辑标签，用来加强字符语气的，同样可以家畜文字

区别：

b标签只有加粗的样式，没有其他含义
strong表示标签内文字比较重要，用于强调语气

场景：

一般几个文字需要特别强调，我们会加上strong标签，比如：疫情期间，阳性”1例“这两个文字我们会加上strong进行强调。

另外为了符合css3的规范，b尽量少用该用strong就行了。

3.3 i与em的区别：

定义：

i：实体标签，用来给文字倾斜
em：逻辑标签，用来强调文字内容的，同样可以倾斜文字

区别：

i标签只有倾斜的样式，没有其他含义
em表示标签内文字比较重要，用于强调

场景：

i标签更多用在字体图标上，em多用于术语上（医学、生物等等…)

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

区别一

title：鼠标移入图片上显示的值
alt：图片无法加载时显示的值

区别二

在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

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

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