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了!