H5常用标签和属性

表单

<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="userName">姓名:</label>
        <input type="text" name="userName" id="userName" placeholder="请输入用户名">
        <label for="userPhone">手机号码:</label>
        <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
        <label for="email">邮箱地址:</label>
        <input type="email" required name="email" id="email">
        <label for="collage">所属学院:</label>
        <input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
        <datalist id="cList">
            <option value="前端与移动开发学院"></option>
            <option value="java学院"></option>
            <option value="c++学院"></option>
        </datalist>
        <label for="score">入学成绩:</label>
        <input type="number" max="100" min="0" value="0" id="score">
        <label for="level">基础水平:</label>
        <meter id="level" max="100" min="0" low="59" high="90"></meter>
        <label for="inTime">入学日期:</label>
        <input type="date" id="inTime" name="inTime">
        <label for="leaveTime">毕业日期:</label>
        <input type="date" id="leaveTime" name="leaveTime">
        <input type="submit">
    </fieldset>
</form>
<script>
    document.getElementById("score").oninput=function(){
        document.getElementById("level").value=this.value;
    }
</script>

dom操作

<ul>
    <li>请选择</li>
    <li class="red">前端</li>
    <li class="green">java</li>
    <li class="blue">javascript</li>
    <li id="c">c++</li>
</ul>
<script>
    /*获取第一个li标签*/
    window.onload=function(){
        /*ElementsByTagName获取的是数组*/
        /*索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加*/
        /*var cli=document.getElementsByTagName("li")[1];
        console.log(cli);*/

        /*query:查询  Selector：选择器   querySelector(传入选择器名称)*/
        /*querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素*/
        /*参数要求：如果是类选择器，必须添加.  如果是id选择器， 必须添加# ,否则当成标签处理*/
        var javaLi=document.querySelector(".green");
        //var javaLi=document.querySelector("#c");
        console.log(javaLi);

        /*querySelectorAll获取满足条件的所有元素--数组*/
        var allLi=document.querySelectorAll("li")[0];
        console.log(allLi);
    }
</script>

类样式操作

<ul>
    <li class="red">前端与移动开发</li>
    <li class="blue">java</li>
    <li>javascript</li>
    <li class="red">c++</li>
</ul>
<script>
    window.onload=function(){
        /*add:为元素添加指定名称的样式.一次只能添加一个样式*/
        document.querySelector("#add").onclick=function(){
            /*classList:当前元素的所有样式列表-数组*/
            document.querySelector("li").classList.add("red");
            document.querySelector("li").classList.add("underline");
            //document.querySelector("li").className="red underline"
            /*获取样式*/
            var result=document.querySelector("li").classList.item(2);
            console.log(result);
        }

        /*remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个*/
        document.querySelector("#remove").onclick=function(){
            document.querySelector(".blue").classList.remove("blue");
        }

        /*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除*/
        document.querySelector("#toggle").onclick=function(){
            document.querySelectorAll("li")[2].classList.toggle("green");
        }

        /*contains:判断元素是否包含指定名称的样式，返回true/false*/
        document.querySelector("#contain").onclick=function(){
            var isContain=document.querySelectorAll("li")[3].classList.contains("red");
            console.log(isContain);
        }
    }
</script>

自定义属性

<p data-school-name="stand">111</p>
<p data-name="eng">222</p>
<script>
    window.onload=function(){
        var p=document.querySelector("p");
        /*获取自定义属性值*/
        /*将data-后面的单词使用camel命名法连接:必须使用camel合法法获取值否则有可能无法获取到值*/
        //var value=p.dataset["schoolname"];//data-schoolname
        var value=p.dataset["schoolName"];//data-school-name
        console.log(value);
    }
</script>

多媒体标签

<!--embed:可以直接插入音频视频，本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件  兼容性-->

<!--flash:  1.先学习flash,增加使用成本  2.iphone,ipd,不支持flash-->

<!--audio:音频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放-->
<audio src="../mp3/aa.mp3" controls></audio>

<!--video：视频-->
<!--
src:播放文件的路径
controls:音频播放器的控制器面板
autoplay:自动播放
loop:循环播放
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
width:视频的宽度
height:视频的高度
-->
<!--注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放-->
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600"></video>

<!--source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择-->
<video src="../mp3/flv.flv" controls></video>
<video controls>
    <!--视频源，可以有多个源-->
    <source src="../mp3/flv.flv" type="video/flv">
    <source src="../mp3/mp4.mp4" type="video/mp4">
</video>

网络状态

/*网络连接时调用*/
window.addEventListener("online",function(e){
    console.log("ok");
    console.log(e.returnValue);
});
/*网络断开时调用*/
window.addEventListener("offline",function(e){
    console.log("no");
    console.log(e.returnValue);
});

全屏

btn.onclick=function() {
    /*能力测试*/
    if(docuEle.requestFullScreen){
        document.getElementById("img").requestFullScreen();
    }
    else if(docuEle.webkitRequestFullScreen){
        document.getElementById("img").webkitRequestFullScreen();
    }
    else if(docuEle.mozRequestFullScreen){
        document.getElementById("img").mozRequestFullScreen();
    }
}