HTML入门

来源：互联网发布：四年级奥数最优化问题编辑：程序博客网时间：2024/06/05 19:17

不管怎么说，先上代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Home</title>    <script type="text/javascript">        var state = 0;//控制动画执行步骤var speed = 5;//动画速度//收起当前图片        function close(){            if(item.width>0) {                item.width = item.width - Math.ceil(speed*Math.cos(item.width/con_wid*1.57));            }            else item.width=0;        }        function Step1(){            if(state ==1) {                if (item.width > 0) {                    close();                    var t = setTimeout("Step1()",10);                }                else                    state = 2;                    Step2();                        }        }//换上下一张图片function Step2() {            if(state==2) {                var a = Math.floor(Math.random() * 21) + 1;                item.src = "onmyoji/" + a + ".png";                state = 3;                Step3();            }        }//铺开下一张图片function open(){            if(item.width <con_wid) {                item.width = item.width + Math.ceil(speed*Math.cos(item.width/con_wid*1.57));            }            else  item.width=con_wid;        }        function Step3() {            if(state ==3){                if(item.width < con_wid) {                    open();                    var t = setTimeout("Step3()",10);                }                else                {                    state=0;                }            }        }//动画入口function Change(){if (state == 0){state=1;Step1();}}    </script></head><body><div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">    <img src="onmyoji/bg.jpg"  width="100%" height="100%" left="0" top="0"/></div>    <h1 align="center"><br>猜剪影游戏<br></h1><p align="center">请猜出下面这个剪影的名字</p><div align="center"><br><img src="onmyoji/1.png" id="pic" width="300" height="400" align="center"></div><div align="center"><br><input type="button" onclick="Change();"  value="下一题" ></div><script type="text/javascript"> //加载图片var item = document.getElementById("pic"); var con_wid = item.width;</script></body></html>

这里，主要是学习了一个万能的<div></div>的排版方法，并且单纯地用JS写了个小轮子。

CSS还没接触，所以暂时就这样子。

主要的网页的布置有这些。

1.body

<body>

中间就是会显示的内容

</body>

2.head

<head>

感觉有点像头文件的感觉

</head>

3.<div></div>能够形成一个区块。估计后面配合CSS使用可以搞事情。

4.<h1></h1>标题 <p></p>正文 <br>回车

5<script></script>中间书写脚本

0 0