面试经常被问到的关于HTML问题

一、script标签为什么要放在body标签的底部？

因为浏览器在渲染html的时候，从上到下依次执行，遇到js文件就会停止当前页面的渲染，转而去下载js文件，如果将script标签放在头部，如果文件又很大的情况下，首屏时间就会延长，影响用户体验。
解决方法：
1、将script标签放到body的底部
2、通过defer\async属性将js文件转为异步下载
defer\async的区别
首先都是让js文件能够异步下载，不阻塞页面的渲染
区别就是defer必须等待整个文档渲染完成后才执行
而async在下载完成后，会暂停html的解析，转去执行js，也就是说 下载的处理二者是相同的，主要是执行的时间不同，async执行的时候还是要阻塞html的解析，defer就是安排到最后才执行。 另外如果两个属性同时设置，以async为准。

二、src和href的区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系。
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

三、link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

2021最新最全关于html面经
转载：https://blog.csdn.net/weixin_43786756/article/details/113548347