HTML相关
行内元素、块级元素、空元素有哪些？
行内元素：
特点：
1:不独占一行
2:宽度自适应
3:不能设置宽高
4:高度和内外边距不会影响周围元素的布局
元素:
a、span、img、b、input、button、i、select、textarea、label等
块级元素：
特点:
1:独占一行
2:宽高可设置
元素:
div、p、h1...h6、ul、ol、li、header、footer、main、nav、table、form等
空元素：
特点：没有内容或子元素的元素也叫自闭合元素，不需要结束标签
元素：br、hr、input、img、link、meta等
link和@import的区别
link：
是html标签，可以直接在html中使用，<link rel='stylesheet' href='./style.css'/>
页面加载时同时加载外部样式，不会阻塞其他资源加载，可以提高页面加载速度
是html标准的一部分，几乎所有浏览器都支持，兼容性比较好
引入的样式权重高，会优先应用
适用于html文档中直接引入外部样式，适用于并行加载多个资源情况
@import:
是css提供的一种规则，再csszhong通过@import url('./style.css')引入外部样式
页面加载完毕后才加载外部样式，会阻塞页面的渲染，会导致页面加载速度变慢
较旧的浏览器有可能不支持，尤其是ie5以下的版本中无法识别
引入的样式权重较低，可能会被后续样式覆盖
b与strong的区别
b:
属于html标签，主要用于设置文本的粗体效果
strong:
属于xhtml标签，有更强的语义性，不仅有加粗效果，还有语义上的强调作用
搜索引擎会更倾向于strong标签的关键词，有助于提高关键词的权重和页面的排名
过度使用strong标签可能被视为过度优化，可能会对排名产生负面影响
建议使用strong
i与em的区别
i:
仅表示斜体样式，适用于需要区分普通文本的场景
em:
用于表示强调文本，具有语义化
搜索引擎和语音阅读器会对em标签给予更多重视，在阅读时加强语气
h1和title的区别
h1：
定义了html文档中最高级别的标题，一个页面一般只有一个h1
用于表达页面的核心内容，对SEO非常重要
用于结构化内容，并告诉搜索引擎和用户页面的主题
title：
定义了html文档的标题，显示在浏览器的标题栏或标签页上
也用于书签和搜索引擎结果页
主要用于描述整个html文档
img标签的title和alt的区别
title：
是一个全局属性，可以用于所有标签，提供关于元素的额外信息，通常在鼠标悬停在元素上显示为一个工具提示
提供额外的信息用于增强用户体验，不直接影响可访问性或搜索引擎优化
alt：
img标签的特有属性，图像无法加载时，浏览器会显示alt替代文本
提高了网页的可访问性和搜索引擎优化
<img src="car.png" alt="这是一张车的图片">
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。
