结构标签

<header></header>
<nav></nav>
<main></main>
<footer></footer>

非结构标签

    <p>这是一个<mark>突出</mark>标签</p>

    下载进度条<progress max="100" value="50"></progress>
    <figure>
        ![](火影16.png)
        <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>