代码在文档下半部分，教程视频请上优酷：v.youku/v_show/id_XNDQ1NDEwNzY0.html
如果觉得文档简单，请看教程视频，代码在此文档下半部分。
第一块，布局的实现
1、什么是标签，什么是标签的属性
<body></body><p></p><b></b>
开始标签和结束标签，组成一对标签
<p id="p_id" ></p>
网页代码中有很多标签，每个标签也有很多属性，这个需要我们在实践中不断掌握
2、网页我们要让大家知道这个网页写的什么，就必须有标题
<title>标题</title>
3、做按钮
<button>按钮</button>
4、网页制作的思路
a、先布局，再实现功能（建议）
b、先实现功能，再布局。（已经对网页代码编写有一定水平，以及有全局观的时候）
5、画出水平线的专用标签
<hr>___水平线
<br>————换行的
不成对的标签
6、方块的制作（非常重要）
可以说，网页布局最重要的就在这里了，别小看了方块。
<div></div>是现在网页布局最常用的，也是效率最高的，同样是对于写脚本很方便的
可以做个比方，一件方便面与里面一包方便面
<div>
<div></div>
</div>
7、两种常用style属性
a、什么是style，style可以设置的风格非常多，css文件来保存这种风格。
b、style常用属性:height;width
c、另外两个style属性：top;left
d、距离的相对与绝对：position:absolute,relative,fixed
8、在网页制作之中，div这一对标签可以布局任何东西
第二块，也就是功能的实现
js脚本的功劳了
1、实现功能的第一步，命名
网页代码编写中，我们需要知道 要实现或者说要拥有某个功能的标签或者对象叫什么。。
id,name,title,主要用到的是id
2、javascript脚本的编写
<script>
var a="hello";变量
function helloworld(){}  方法
var b={};对象
</script>
对象可以拥有方法，而变量可以在方法中使用，方法可以返回变量或者改变变量，而且方法可以调用方法
给标签命名的意义就在于，可以在脚本中调用这个标签，相应地就可以控制这个标签的相关属性，并且进行修改。
主要就是带大家入门，让大家知道网页编写，看似容易，其实容易的是外表，内在还是有许多的需要学习的。
入门，主要是让大家有个宏观的看法，同时让大家从代码中了解一些自己从未从未接触的知识。
大家仔细了解一下不懂的标签、方法，就可以触类旁通，举一反三。
推荐：www.w3school/。可以问我要手册！还有需要在本地建服务器以及相关软件获取知识，大家都可以问我。我的qq:1664090637，晚上8点到10点在线解答问题。
祝大家喜爱网页编程，It行业从此一路顺风！
以下是代码部分：
<title>我的第一个小游戏</title>
<body id="body_id">
<button onclick="Global.startgame()">开始游戏</button>
<button onclick="Global.fastA()">给A加速</button>
<button onclick="Global.fastB()">给B加速</button>
<button onclick="Global.slowA()">给A减速</button>
<button onclick="Global.slowB()">给B减速</button>
<div id="gamebox" >
<div id="box_h">A</div>
<div id="box_v">B</div>
</div>
<div id="box_result" >游戏尚未开始！</div>
<script>
var Global={};
var obj_ElementById("box_h");
var obj_ElementById("box_v");
var obj_ElementById("box_result");
var a_step=10;
var b_step=10;
ve_h=function(){
var screen_w=document.body.clientWidth;
var screen_h=document.body.clientHeight;
if(parseInt(obj_h.style.left)<=screen_w-parseInt(obj_h.style.width)){
    obj_h.style.left=parseInt(obj_h.style.left)+a_step*Math.random();
    }
else{
obj_result.innerHTML="比赛结束：A获胜！";
Global.stopgame("h");}
}
ve_v=function(){
var screen_w=document.body.clientWidth;
var screen_h=document.body.clientHeight;
if(parseInt(obj_v.style.left)<=screen_w-parseInt(obj_v.style.width)){
    obj_v.style.left=parseInt(obj_v.style.left)+b_step*Math.random();
    }
else{
obj_result.innerHTML="比赛结束：B获胜！";
Global.stopgame("v");    }
}
Global.startgame=function(){
a_step=15;
b_step=15;
obj_h.style.left=0;
obj_v.style.left=0;
while(!u_result||!(u_result=="A"||u_result=="B")){
var u_result=prompt("你认为A和B谁将先到达终点？","");
}
obj_result.innerHTML="您选择的是："+u_result+";游戏正在进行中...请等待结果！！";
int_h=ve_h,100);
int_v=ve_v,100);编程入门先学js
}
Global.stopgame=function(){
ElementById("body_id").style.backgroundPosition="0% 0%";
ElementById("body_id").style.backgroundImage="url(IMG_6712.jpg)";
clearInterval(int_h);
clearInterval(int_v);
}
Global.fastA=function(){
a_step+=10;
}
Global.fastB=function(){
b_step+=10;
}
Global.slowA=function(){
if(a_step>10){
a_step-=10;}
}
Global.slowB=function(){
if(b_step>10){
b_step-=10;}
}
</script>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。