<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
#box {
height: 200px
width: 200px
background-color: aqua
position: absolute
left:0
margin-top:50px
}
input {
width: 100px
height: 30px
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="前进">
<script>
var box = document.getElementById('box')
var bt = document.getElementsByTagName('input')
var timer = null
bt[0].onclick = function () {
ani(box,600)
}
function ani(ele,target) {
clearInterval(ele.timer)
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10
step = step>0?Math.ceil(step):Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px"
console.log(1)
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px"
clearInterval(ele.timer)
}
},30)
}
</script>
</body>
</html>
你想问的应该是，在搭建一个HTML文件时，基本的文件结构是什么样子吧？
标准的HTML文件由“文档声明、文件头、文件体”组成。
对于HTML5，文档声明也应该采取HTML5.0的声明方式，具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂（码匠） & 言成科技 联合出品</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<div>具体内容</div>
</body>
</html>
在html标签当中包含head标签和body标签两种，而head标签表示的是文件头，body标签表示文件体，文件头当中需要包含“字符编码”（head标签中的第一行）、“标题”（title标签）、“其他元信息”（除了字符编码外的其他meta），而文件体当中书写的具体代码就是在网页当中会显示的内容。
此外，在文件头部或文件体当中还可以使用link标签引入CSS文件，或者使用script标签引入JS文件。
关于文档声明，在传统的HTML4当中，有另外三种声明方法，请详见《文档声明 DOCTYPE常见的文档类型》
简单的htm的编写过程如下：
先新建一个文本文件，可以自己命名，如下图，我命名为测试。
编译文本，以最简单的代码格式为例<html> <head> <title> </title> </head> <body> </body></html>
在<body></body>写入你要写的内容,下面以hello world为例。
修改文件后缀名，将txt改为html。
测试是否成功，双击 测试.html，如果出现了下面的内容，恭喜你，你已经学会了最简单的html编写。
