结构标签
<header></header>
<nav></nav>
<main></main>
<footer></footer>
非结构标签
<p>这是一个<mark>突出</mark>标签</p>
下载进度条<progress max="100" value="50"></progress>
<figure>
<figcaption>
<p>这是小樱</p>
</figcaption>
</figure>
<p>沙发斯蒂芬斯蒂芬斯蒂芬沙发沙发斯蒂芬</p>
<script type="text/javascript">
var pro = document.querySelector("progress");
var timer = setInterval(function(){
if(pro.value == pro.max){
clearInterval(timer);
alert("下载完毕");
};
pro.value++;
},100);
</script>
表单相关
<form action="#" method="post">
颜 色:<input type="color" /><br /><br />
数 字:<input type="number" /><br /><br />
搜索框:<input type="search" name="" id="" value="" /><br /><br />
范 围:<input type="range" min="10"/><br /><br />
年月日:<input type="date" /><br /><br />
时 间:<input type="time" /><br /><br />
星 期:<input type="week" /><br /><br />
年 月:<input type="month" /><br /><br />
NBA球星搜索榜：<input type="search" placeholder="搜索你喜欢的球星" list="datalist" /><br /><br />
<datalist id="datalist">
<option value="詹姆斯" label="Top1"></option>
<option value="杜兰特" label="Top2"></option>
<option value="库里" label="Top3"></option>
<option value="维鲁斯" label="Top4"></option>
<option value="哈登" label="Top5"></option>
</datalist>
邮 箱：<input type="email" placeholder="请输入邮箱" autofocus="autofocus" name="e" autocomplete="on" required="required" /><br /><br />
多 选:<select name="" multiple="multiple">
<option value="">你好</option>
<option value="">你好</option>
<option value="">你好</option>
<option value="">你好</option>
<option value="">你好</option>
</select><br /><br />
<input type="submit" value="提交" /><br /><br />
</form>
<script type="text/javascript">
var color = document.querySelector("input[type=color]")
color.onchange = function(){
console.log(this.value);
document.body.style.backgroundColor = this.value;
};
var range = document.querySelector("input[type=range]");
range.onchange = function(){
console.log(this.value);
}
</script>
文件上传
<input type="file" name="" id="" value="" multiple="multiple"/>
<script type="text/javascript">
var inputFile = document.querySelector("input[type=file]");
inputFile.onchange = function(){
console.log(this);
console.log(this.files);
//把this.files对象转化成数组
var filesArr = Array.prototype.slice.call(this.files);
console.log(filesArr);
for(var tempFile of filesArr){
console.log(tempFile);
//因为将来要上传真实的文件内容到服务器，我们需要通过FileReader这个对象来以二进制或者其他形式进行数据读取
var fileReader = new FileReader();
//读取数据以二进制字符串格式，需要一个参数 Blob 对象
//fileReader.readAsBinaryString(tempFile);
//fileReader.readAsText(tempFile,"utf-8")
//base64的url格式,也是需要一个参数 Blob对象
fileReader.readAsDataURL(tempFile)
//读取过程中会一部出发3个事件
fileReader.onloadstart = function(){
console.log("====开始读取=====");
};
fileReader.onprogress = function(){
console.log("====开始中。。。=====");
};
fileReader.onloadend = function(){
console.log("读取完毕");
console.log(this.result)//读取的文件
};
}
};
</script>