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" /> </head> <body> </body> </html> -
b.css
body { background:red; }几种引入方式的对比分析
- 行内式：标签上属性太过繁多，对于大一些的页面难以管理维护，只限于简单已维护的测试页面
- 嵌入式：虽说在标签之外，但是任然在HTML文档结构之内，限于少量低缓存的使用
外链式：这是目前常见的css、html、js三者分离，易于管理
引入js
- 行内写入：类似于css的行内写法
<a href="#" 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文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度（每次上新的时候，修改时间戳即可，）