学习前端,自己独立制作了一个仿知乎的页面,
电脑上的文件树及html引用方式为:(其中最主要的CSS是css文件夹内的两个文件base.css和common.css)
│ zhihu.html
│
├─css
│ base.css
│ common.css
│
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>知乎热榜实战</title> <link rel="shortcut icon" href="images/zhihu.ico" /> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="icomoon/style.css" /> </head> <body> ......
然后想看看在手机上显示会是什么样子,于是用usb线把放了网页的文件夹上传到了手机里,但是在手机的文件管理器将html文件用浏览器打开后发现只加载了html部分而不显示CSS。
绝对路径肯定是变化了,但外部CSS导入的相对路径我想是正确的,但怎么html一到手机上就不认外部css了?在手机的文本编辑部把html的外部CSS路径改成直接引用,然后把CSS文件和html放在一起,发现还是只加载html部分。
│ base.css
│ common.css
│ zhihu.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>知乎热榜实战</title> <link rel="shortcut icon" href="zhihu.ico" /> <link rel="stylesheet" href="base.css" /> <link rel="stylesheet" href="common.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> ...
最后还发现,只有把页面传到了FTP服务器后用手机连上FTP服的网址才能看到html有加载CSS,那么离线的情况是怎么一回事?求解。
肯定是路径问题
手机直接打开html页面,会引用同一文件夹下的css文件吗?
手机的文件系统和电脑不一样,程序拿到的是虚拟路径,只有系统知道虚拟路径和真实路径的匹配关系。浏览器自动识别会被虚拟路径带偏,拼出错的资源路径,肯定读不到嘛。手机是故意的,为了安全性。
通过浏览器直接打开html文件是不推荐的方式,由于协议问题,通过非http或其衍生协议之外的其他协议打开或请求数据是不被支持的,所以即使引用了css文件,程序也无法获取这些文件信息。