1.HTML------超文本标记语言。可以由Window系统自带的Notepad和Adobe Dreamweaver编写。
2.CSS------层叠样式表。目前唯一的网页页面排版样式标准。
3.JavaScript-------基于对象的脚本语言。提供了网页交互性。
HTML、CSS、JavaScript的语法结构
1.HTML
<html>
<head>
……………………
</head>
<body>
……………………
</body>
</html>
2.CSS
<style type=text/css>
……………………
</style>
3.JavaScript
<Script Language="JavaScript">
…………………………
</Script>
一个HTML、CSS、JavaScript的综合应用
<!实例1-4-1代码>
<html>
<head>
<title>第一个实例</title>
<style type=text/css>
<!--
body{background-image:url(1-4-1.jpg);background- attachment:scroll;background-position:100% 100%;
background-repeat:no-repeat}
h2{font-family:黑体;font-size:22pt;color:red}
.p1{font-size:20px;color:#000000;text-align:left}
-->
</style>
</head>
<body>
<center>
<h2>第一个HTML、CSS、JavaScript实例</h2>
</center>
<hr>
<p class=p1>1.HTML是网页架构基础。</p>
<p class=p1>2.用CSS定义背景图片的位置、标题2和段落的格式。</p>
<p class=p1>3.用JavaScript编写文字随鼠标旋转的特效。</p>
<SCRIPT LANGUAGE="JavaScript">
if (document.all) {
yourLogo = "第一个HTML、CSS、JavaScript实例";
logoFont = "黑体";
logoFont = "Arial";
logoColor = "ff0000";
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:20px;height:20px;font-family:'+logoFont+';font-size:100px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.οnmοusemοve=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 0.9;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
</script>
</body>
</html>