第一章 HTML、CSS、JavaScript综述

最新推荐文章于 2024-10-27 11:25:22 发布

aco55

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量325

点赞数

分类专栏： HTML/CSS/JavaScript 文章标签： javascript html css dreamweaver class function

HTML/CSS/JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>