HTML基础知识总结一

行内元素、块级元素与空元素

常见元素

行内元素：span、a、img、input等

块级元素：div、header、footer、p、h1...h6等

空元素：br、hr

如何转换

display: inline； 转为行内元素

display: block； 转为块级元素

display: inline-block； 转为行内块元素

特性

行内元素：设置宽高无效，默认不独占一行

块级元素：可以设置宽高，默认独占一行

行内块元素：可以设置宽高，默认不独占一行

页面导入样式时，使用link和@import的区别

区别一： 从历史来说，是先有link，后有@import的，因此link比@import兼容性好

区别二： 加载顺序有区别，浏览器会先加载link标签,后加载@import。

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

title与h1的区别：

title概况了网站信息，可以告诉搜索引擎或用户关于这个网站的主题是什么。h1是文章的主题内容，告诉搜索引擎网站文章内容主要是什么。

title是显示在网页标题上，h1显示在网页内容上。

从SEO的角度，title比h1更加重要，网站的logo一般用h1标签。

b与strong的区别：

b是实体标签，用于加粗文字。strong是逻辑标签，用来加强字符语气的。

b标签只有加粗的样式，没有实际含义。strong标签表示标签内字符比较重要，用于强调。

为了符合css3的规范，尽量少用b标签，多使用strong。

i与em的区别

i是实体标签，用于文字倾斜。em是逻辑标签，用来强调文字内容

i标签只有倾斜的样式，没有实际含义。em标签表示标签内字符比较重要，用于强调。

i更多用于字体图标，em用于一些术语(如医药、生物)上。

img标签的title和alt的区别

img的title属性是在图片能正常显示时，鼠标移入图片显示的值。

alt属性是在图片无法加载时显示的值。

从SEO的层面上，爬虫抓取不到图片的内容，在写img标签时加上alt属性来描述这张图片的内容或关键词，可以增加SEO效果。

png、jpg、gif、webp图片格式解释，分别什么时候用

png: 是无损压缩，体积比jpg/jpeg要大，清晰度高，适合做小图标。

jpg：采用压缩算法，体积比png小，清晰度低于png，一般用于中大型图片。

gif： 一般适合用于动图

webp: 同时支持有损和无损压缩，相同质量的图片，webp具有更小的体积，具备了png和jpg的优点，但兼容性不是特别好。

一般可以作判断：支持webp则用webp,不支持就用png/jpg。