HTML文档中使用JavaScript和css
引入css
-
内嵌式引入：将css代码写在HTML中的style标签里面
<!DOCTYPE html><html><head><title>关于渐进增强和平稳退化</title><style type="text/css"> #box { width: 500px; height: 500px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; background: red; }</style></head><body><div id="box"></div></body></html> - 行内引入：在标签内部有style属性，将各个属性写入其中
<div id="box" style="width:255px;height:250px;background:red;"> - 外链式引入：将css代码写入专门的css文件中，通过HTML文档中的link标签引入：
比如在同一文件木下新建有a.html文件和b.css文件，通过b.css文件来设置a.html文档显示的body背景颜色
-
a.html
<!DOCTYPE html><html><head><title>aHtml</title><link rel="stylesheet" type="text/css" href="b.css" rel="external nofollow" /></head><body></body></html> -
b.css
body { background:red;}几种引入方式的对比分析
- 行内式：标签上属性太过繁多，对于大一些的页面难以管理维护，只限于简单已维护的测试页面
- 嵌入式：虽说在标签之外，但是任然在HTML文档结构之内，限于少量低缓存的使用
-
外链式：这是目前常见的css、html、js三者分离，易于管理
引入js
- 行内写入：类似于css的行内写法
<a href="#" rel="external nofollow" onclick="window.open('http://www.baidu.com','_blank')">Go baidu</a> - 嵌入式引入：包含在HTML文档页面的script标签之中
<!DOCTYPE html><html><head> <title>关于渐进增强和平稳退化</title> <style type="text/css"> #box { width: 500px; height: 500px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; background: red; } </style></head><body> <div id="box"> </div> <script type="text/javascript"> var oBox = document.getElementById("box") oBox.onmouseover = function(){ this.style.backgroundColor = "black"; } oBox.onmouseout = function(){ this.style.backgroundColor = "red"; } </script></body></html>- 外链式引入：写在单独的javascript文件中，需要使用的时候在script标签中引入
比如在同一文件目录下新建有a.html文件和b.js文件，通过b.js文件来操作a.html文档
- a.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>关于渐进增强和平稳退化</title></head><body> <div id="box"> </div> <script type="text/javascript" src="b.js"></script></body></html>- b.js文件
var oBox = document.getElementById("box"); oBox.onmouseover = function(){ this.style.backgroundColor = "black"; } oBox.onmouseout = function(){ this.style.backgroundColor = "red"; }几种引用方式的比较
- 行内式：不推荐使用，不容易维护，页面太乱
- 内嵌式：有风险，js是单线程有阻塞的，可能会影响后面的HTML代码资源加载
- 外链式：维护性好，不需要修改源HTML文档；可缓存，浏览器能够具体的设置缓存连接的所有javascript文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度（每次上新的时候，修改时间戳即可，）
