<!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>

H5 Day1 练习的更多相关文章

  1. Day1:html和css

    Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示.运行的平台,IE.火狐(Firefox).谷歌(Chrome). ...

  2. 前端入门——day1（简介及推荐书籍和网站）

    写给谁 这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章 终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...

  3. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  4. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  5. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  6. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  9. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

随机推荐

  1. 《Deep Learning》(深度学习)中文版PDF免费下载

    <Deep Learning>(深度学习)中文版PDF免费下载 "深度学习"经典著作<Deep Learning>中文版pdf免费下载. <Deep ...

  2. Nuxeo 认证绕过和RCE漏洞分析（CVE-2018-16341)

    简介 Nuxeo Platform是一款跨平台开源的企业级内容管理系统(CMS).nuxeo-jsf-ui组件处理facelet模板不当,当访问的facelet模板不存在时,相关的文件名会输出到错误页 ...

  3. level3

    伸冤下:老师的评论是有看到!看完我就去修改程序了,忘记回复请原谅!= = 前阵子都在修改功能和思路,但是由于一个细节的错误找不到,导致没有成品可以上传...求谅解. 细心真的很重要 = =!!! im ...

  4. Alpha 冲刺五

    团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 暂无实质性进展. 项 ...

  5. final 发布 领跑衫获奖感想

    时间 :2016年5月20日 13:30--14:00 final发布中,我们团队严一格演示了最终版本的四则运算项目, 修正了beta版本发布时弹幕部分无法消除的bug,总体效果达到预期. 遗憾的是没 ...

  6. 苹果手机input框上方有一条阴影线以及input框的placeholder颜色的设置

    今天做手机端的时候,用到input框来输入手机号码,但是在安卓手机上input的效果是正常的,在苹果手机上,input的上边框会变粗,有阴影 因为苹果手机的默认给input加上了阴影 给input加入 ...

  7. P2704 [NOI2001]炮兵阵地

    题目描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用“H” 表示),也可能是平原(用“P”表示),如下图.在每一格平原地形上最 ...

  8. hdwiki 前后台版权信息在哪修改

    hdwiki 前台copyright 信息在 view/default/footer.htm 搜索footer-phdwiki 后台copyright 信息在 view/default/admin_m ...

  9. 【Revit API】创建相机视角

    在Revit中有一个相机功能可以以相机视角产生一个视图.一开始我在Revit2016的API文档中找关键词Camera,但是没什么收获. 其实这个相机功能的真正核心是创建透视视图:View3D.Cre ...

  10. 【BZOJ1452】[JSOI2009]Count（树状数组）

    [BZOJ1452][JSOI2009]Count(树状数组) 题面 BZOJ 洛谷 题解 数据范围这么小?不是对于每个颜色开一个什么东西记一下就好了吗. 然而我不会二维树状数组? 不存在的,凭借多年 ...