HTML外部文件引入
2016-11-08 12:35
113 查看
HTML中的引入最好都用相对路径,以免更换服务器或移动根目录时发生错误。
图片or视频引入
a标签
CSS样式引入
链接式与导入式的区别
JS文件引入
总结src和href的区别
2.
在这个例子中,a标签是href属性,img是src属性,这个就说明,没有链接不会影响页面,但没有img会影响页面。
1. 行内样式(不推荐使用)
2. 内嵌样式
3. 外部导入样式
4. 外部链接样式
使用链接式后,浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。
在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到
src 表示来源地址,在 img、script、iframe 等元素上,是引入。src 的内容,是页面必不可少的一部分,如果没有src,页面是不完整的。
所以href和src的区别就是,引用和引入。
图片or视频引入
a标签
CSS样式引入
链接式与导入式的区别
JS文件引入
总结src和href的区别
1. 图片or视频引入
<img src="img/smile.jpg">//图片在同层文件夹【img】中。 <video src="/video/movie.mp4" controls="controls">your browser does not support the video tag</video>//文件在下层文件【video】中。
2. <a>
标签
<a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a>//把一个图片作为<a>标签的连接。
在这个例子中,a标签是href属性,img是src属性,这个就说明,没有链接不会影响页面,但没有img会影响页面。
3. CSS样式引入
CSS样式引入主要有四种:1. 行内样式(不推荐使用)
2. 内嵌样式
3. 外部导入样式
4. 外部链接样式
//内嵌样式 <style type="text/css">...</style> //外部链接样式表 <link type="text/css" rel="stylesheet" href="../styles/main.css" /> //外部导入样式 <style type="text/css">@import"css/mystyle.css"; </style>
链接式与导入式的区别
链接式会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。但如果样式复杂,加载花去很多时间,这也成了缺点。使用链接式后,浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。
4. JS文件引入
<script type="text/javascript" src="../JS/myJS.js"></script> <script src="JS/myJS.js"></script> //这两种方式均可,在HTML5中已经默认script的类型是js了,所以就不需要再写type。
在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到
<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。
总结src和href的区别
href 表示超文本引用(hypertext reference),在 link和a 等元素上使用,是引用。href 的内容,是与该页面有关联。src 表示来源地址,在 img、script、iframe 等元素上,是引入。src 的内容,是页面必不可少的一部分,如果没有src,页面是不完整的。
所以href和src的区别就是,引用和引入。
相关文章推荐
- 在html中引入外部js文件,并调用带参函数的方法
- 在HTML中引入外部文件CSS和JS的方法
- html引入外部文件的路径问题
- HTML引入外部JS文件的方法
- 在html中引入外部js文件,并调用带参函数
- 【html】【2】html引入外部文件js css
- HTML中JS引入外部FLASH文件
- gcc中使用 -I 和 -L 引入外部头文件和库文件时路径的搜索次序
- html调用外部css文件和js文件
- html引入css文件
- XML配置中 引入外部property文件
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- Android Studio下JNI编程(引入外部或AS自行编译so文件)
- Html 拖拽排序代码(需要引入jquery.js文件)
- 解决HTML外部引用CSS文件不生效问题
- html引用外部css文件
- 最大化 JavaScript 应用程序的金科玉律是尽可能使用外部 JavaScript 文件,而不是直接将 JavaScript 代码包含在 HTML 文件中
- html引入样式表和js文件中间用逗号隔开是什么意思和(function($) {...})(jquery);的意思
- Velocity使用include和parse引入外部文件
- jsp.html中的引入js.css文件的问题,以及文件路径详解。