H5 Day1 练习

Posted 龍四

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 Day1 练习相关的知识,希望对你有一定的参考价值。

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,ul{ margin:0; padding: 0; }
        nav{ display: block; height: 30px;   }
        ul{ width: 100%;  }
        ul li{ list-style: none; float: left;height: 30px;width:20%; text-align: center;background-color: #ccc;   }
        .content { margin-top: 20px;  }
        .content:after{
            content: "";
            display: block;
            visibility: false;
            clear: both;
        }
        .content article{ float: left; width: 80% ;  }
        .content aside{ float: left; width: 20% ;  background-color: #e3e3e3;}
        .content h3{ margin-top: 20px;  }
        footer{ text-align: center;margin-top: 15px;  }
        .red { color: red;  }
    </style>
    <script type="text/javascript">
        window.onload = function(){
                var qq = document.getElementById("qq");
                qq.addEventListener("invalid",function(){
                   qq.setCustomValidity("亲,您输入的QQ不对啦!");
                });
        };
    </script>

</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">国内机票</a></li>
                <li><a href="#">国际机票</a></li>
                <li><a href="#">酒店</a></li>
                <li><a href="#">火车票</a></li>
                <li><a href="#">保险</a></li>
            </ul>
        </nav>
    </header>
    <section class="content">

        <article>
            <form action="" id="myform" > 
                <h3>新增的语义化标签</h3>
                <article>section header nav footer aside article</article>
                <h3>新增的表单类型</h3>
                text:<input type="text" onchange="alert(this.value)"   ><br>  
                date:<input type="date">    <br>        
                time:<input type="time"><br>
                week:<input type="week"><br>
                month:<input type="month"><br>
                number:<input type="number">   <br> 
                search:<input type="search"> <br> 
                color:<input type="color"> <br>
                range:<input type="range">
                <h3>两个事件</h3>
                text oninput:<input type="text" oninput="alert(this.value)"   ><br>  
                text onchange:<input type="text" onchange="alert(this.value)"   ><br>  
                <h3>新的表单校验</h3>
                email:<input type="email"><br>
                url:<input type="url"><br>
                require:<input type="text" required ><br>
                自定义事件:<input type="text" id="qq" pattern="[0-9]\d[4,10]"  >
                <h3>其他表单属性</h3>
                placeholder:<input type="text" placeholder="请输入姓名" ><br>
                autofocus:<input type="text" autofocus><br>
                autocomplete:<input type="text" autocomplete="on" name="name"  ><br>
                 multiple:<input type="file" multiple="multiple"><br>
                 <label for="course">
                    课程:<input type="text" list="courseList" id="course">
                </label>
                <datalist id="courseList">
                    <option value="php">php</option>
                    <option value="python">python</option>
                    <option value="photoshop">photoshop</option>
                    <option value="java">java</option>
                    <option value="javascript">javascript</option>
                    <option value="front end">front end</option>
                    <option value="back end">back end</option>
                </datalist>
                <h3>HTML多媒体 音频和视频</h3>
                <audio src="Kalimba.mp3" controls autoplay>
                        <source src="Kalimba.mp3">
                        <source src="Kalimba.ogg">
                        <source src="Kalimba.mp3">
                        你的浏览器不支持音频播放,请更新你的浏览器版本
                </audio> <br>
                <video src="Wildlife.wmv" controls autoplay width="300px">
                        <source src="Wildlife.wmv">
                        <source src="Wildlife.ogg">
                        <source src="Wildlife.webM">
                </video><br>
                <h3>DOM扩展(重要)</h3>
                //根据类型查找元素,返回一个伪数组
                document.getElementsByClassName(“className”)

                //通过css选择器获取元素,返回符合要求的第一个元素,注意返回结果是对象
                document.querySelector(“css选择器”)

                //通过css选择器获取元素,返回伪数组
                document.querySelectorAll(“css选择器”)
                <h3>
                    类名操作
                </h3>
                添加类:node.clasList.add("className");
                移除类: node.classList.remove("className");
                切换类:node.classList.toggle("className");
                判断类: node.classList.contains("className");
                <h3>自定义属性</h3>
                <section id="attrDemo"  data-name="lxf" age="27" >
                    在HTML5中我们可以自定义属性,其格式如下data-*="" <br>
                        div id="demo" data-name="itcast" data-age="10" data-user-name="hcc"><br>
                        var demo = document.querySelector(‘#demo‘);<br>
                        1、读取 demo.dataset[‘name‘] 或者 demo.dataset[‘age‘]<br>
                        2、设置demo.dataset[‘name‘] = ‘web developer‘<br>
                        3、demo.dataset[‘userName‘]//如果-比较多,需要转换成驼峰命名法。<br>
                </section>
                <h3>进度条(了解)</h3>
                <progress value="50" min="0"  max="100" ></progress><br>
                <meter value="30" min="0" max="100" low="20" high="80"></meter> <br>

                <input type="submit" value="提交">
            </form>
<br>
form属性: <input type="password" name="pwd" form="myform">
        </article>
        <aside>
            aside
        </aside>
    </section>
    <footer>
        <p>
            Copyright ? 2005 - 2017 际珂国际 Inc. All Rights Reserved. 版权所有 
        </p>
        商旅管家  一站式服务平台 沪ICP备13006682号  
    </footer>
</body>
</html>
View Code

 

以上是关于H5 Day1 练习的主要内容,如果未能解决你的问题,请参考以下文章

H5C3day1:更具语义化的H5标签

day1练习题

PMP练习题Day1笔记

PMP练习题Day1笔记

HTML5 | 学习打卡day1

day1_17-9-3