1. 注释
本文中的文件名，写在了代码注释中。既然用到了三种文件，就把这三种文件的注释方法先说明一下。
1.1. HTML注释
语法<!--注释的内容-->,示例如下：
1.2. CSS注释
语法/*注释的内容*/，示例如下：
1.3. Javascript注释
和C语言相同，语法//注释的内容或者/*注释的内容*/，示例如下：
2. 使用Javascript
在html页面中使用Javascript，有三种方法：
2.1. body中
body中的Javascript代码，相当于C语言中位于main函数内代码，格式如下：
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("voidking.com");
alert("voidking.com");
</script>
</body>
</html>
|
2.2. head中
head中的Javascript代码，相当于C语言中位于main函数外的代码，一般是封装好的函数。格式如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8" />
<script type="text/javascript">
function hello(){
var str=prompt("VoidKing的网址是什么？","请在这里输入");
if(str!=null && str!="")
{
alert("你输入的是："+str);
}
else
{
alert("你什么也没有输入！");
}
}
</script>
</head>
<body>
<script type="text/javascript">
hello();
</script>
</body>
</html>
|
2.3. 外部
head中的Javascript代码不易维护，所以多数情况下我们会使用外部引用来代替。格式如下：
1
2
3
4
5
6
7
8
9
10
11
12
|
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<script type="text/javascript">
hello();
</script>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function hello(){
var str=prompt("VoidKing的网址是什么？","请在这里输入");
if(str!=null && str!="")
{
alert("你输入的是："+str);
}
else
{
alert("你什么也没有输入！");
}
}
|
3. 使用CSS
上面我们已经说完了使用Javascript的三种方式，爱思考的小伙伴肯定想到了CSS的使用方法，在这里，我也总结一下。
3.1. 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。格式如下：
1
2
3
4
5
6
7
8
9
10
|
<html>
<head>
</head>
<body>
<p style="color:red;margin-left:20px">
This is a paragraph.
</p>
</body>
</html>
|
3.2. 内部样式
当单个文件需要特别样式的时候，就可以使用内部样式表。格式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<html>
<head>
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
</style>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>
|
3.3. 外部样式
当样式需要被应用到很多页面的时候，外部样式表最适合。格式如下：
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>
|
1
2
3
|
body{background-color:red}
p{margin-left:20px}
|
4. 借花献佛
本来想自己整理出一批好的例子，但是，无意中发现了一个网站，已经做得非常好了。所以，void在这里就偷懒一下。
例子精品，还附有教程讲解，分享给大家——梦之都！
5. 结束语
这篇文章比预期的用时要短上很多，主要因为，我把痛苦的工作全部交给梦之都了，好机智地说！还想写个提高篇来着，但是能力有限，不能误人子弟啊！所以，Javascript笔记至此结束，接下来，该是jQuery了！
