HTML面试专题

一. 行内元素有那些？块级元素有那些? 空（void）元素有那些?

        <!-- 行内元素 -->
        <span></span>
        <img src="" alt="" />
        <input type="text" />
        
        <!-- 块级元素 -->
        <div></div>
        <footer></footer>
        <header></header>
        <section></section>
        <p></p>
        <h1></h1>
        ....
        <h6></h6>
        
        <!-- 空元素 -->
        <br></br>
        <hr></hr>
  
        <!-- 元素之间的转换问题 -->
        <!--把元素转为块级元素 独占一行 可以设置宽高 -->
        <div style="display: block"></div>
        <!--把元素转为行元素    不独占一行 设置宽高无效 根据内容控制大小-->
        <div style="display: inline"></div>
        <!--把元素转为行内块元素  不独占一行 可以设置宽高 -->
        <div style="display: inline-block"></div>

二. 页面导入样式时，使用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. webp 这些图片格式解释一下，分别什么时候用?

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