1. 基本框架
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/mystyle.css">
<script language="javascript" type="text/javascript" src="./js/main.js"></script>
<style></style>
</head>
<body>
</body>
</html>
2. 常用标签
<h1></h1> 各级标题
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<img width="50%" height="500px" src="./img/test.jpg"/> 图片
<video width="320" height="240" controls> 视频
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
<hr/> 普通横线
<button onclick="alert('hello');">返回</button> 按钮
<progress id='progress1' value="0" max="100"></progress>
进度条 document.getElementById("progress1").value=10
<input type="number" autocomplete="off" min="0" max="100"/> 数字输入栏
<input name="name" type="text" autocomplete="off"/> 单行文本
<textarea name="textarea" id="textarea" cols="35" rows="5"></textarea> 多行文本
3. 最小js运行环境
<meta charset="UTF-8">
<button onclick='
//注释也可以正常使用
var inputstr = window.prompt("请输入:");//, "default value"
console.log(inputstr);
'>test</button>
4.使页面可以编辑
在F12开发者工具中运行:
document.designMode = "on"
document.designMode = "off"
5. JS数组操作
var test=[]
test = test.concat(12) //追加元素
==test.push(12)
==test = [test, 12]
test = test.slice(0, test.length-1) //删除最后一个元素
==test.pop()
test = test.slice(0,2) //[0, 2) 裁剪只保留区间的内容
for (var i = 0; i < test.length; i++) { //编历数组
console.log(i, arr[i])
}