H5引用外部样式css文件踩坑实战经验（link css文件不加载显示）

这两天踩了一个引用外部样式css文件得坑，今天分享给大家。

使用代码：

<link href="/Content/font1825501/iconfont.css?v=20200520" rel="stylesheet" type="text/css" />

现象如下：

1、微信打开H5页面，样式没有加载出来，采用微信网页“刷新”页面又可以正常显示。返回后重新进入页又不行了。

2、用浏览器打开，F12查看源码又有样式link相关得html代码，但是网络请求没有这个css文件，也没有报错。

经过各种排查问题，各种猜测，尝试，无果。最后，网上找资料有一个网友得的回复提醒了我，他说：看是不是有代码把css阻塞了？

我觉得有道理，索性把link引用放在页面最前面，果然成功了！！！！！

后来我对比了一下这两个引用得位置得区别。

把link放在head中得任意位置都是可以，唯独放在body不行。

我下来查了查资料，HTML5中link就不能放在body中，这点千万要记住！不然会出现，以上等各种问题。

参考：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link

注意事项：

ps：看来基础知识太重要了。