<!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. C#_Stream

    IO操作基本上需要用到Stream相关的子类,因此这类问题在CSDN问得也是比较多.其实对于Stream来说,操作起来比较简单,只要对细节的处理稍微注意一下,相信在使用它的时候也会得心应手. 对于St ...

  2. Linux 上传代码到github

    1.git init 初始化 2.git clone将刚刚创建的项目克隆下来 git clone https://github.com/... 3.进入到Project,编写代码 4.项目完成后执行g ...

  3. Data Plane

    2015-2018,部分关于SDN数据平面的故障恢复文献粗读 SHEAR: A highly available and flexible network architecture marrying ...

  4. 第一个spring冲刺总结及后诸葛亮报告（附团队贡献分）

    眨眼就完结了第一阶段的冲刺了,之前因为学校停电停水等诸多原因而导致冲刺完毕时间的推迟. 第一阶段总体是做到了运算的功能,只是一些基本的功能实现,但能保证的容错性能较高. 1.在普遍的四则运算中都能见到 ...

  5. do

    http://www.cnblogs.com/xdp-gacl/p/3791993.html http://blog.sina.com.cn/s/blog_95c8f1ac010198j2.html

  6. PostgreSQL之oracle_fdw安装与使用

    目的介绍 现在项目开发遇到一个问题,就是需要从PostgreSQL中访问Oracle数据库 身为渣渣猿一脸懵逼.于是乎请教了公司的数据库方面的大牛韩工.告诉我用oracle_fdw 可以实现,但是在实 ...

  7. java 23种设计模式 深入浅出

    以下内容只作为对自己对知识进行总结,如有引用他人文章会在文段末尾表明出处: Java的23种设计模式 23种设计模式总共可以分为三大类,进行不定期更新总结,将逐步展开介绍自己对设计模式的理解,多多指教 ...

  8. 【转】Example of using the --info linker option

    5.3 Example of using the --info linker option This is an example of the output generated by the --in ...

  9. 【bzoj3237】 Ahoi2013—连通图

    http://www.lydsy.com/JudgeOnline/problem.php?id=3237 (题目链接) 题意 给出一个无向图,$Q$组询问,每次询问将原图断掉$C$条边后是否还连通. ...

  10. POJ 2240 Arbitrage / ZOJ 1092 Arbitrage / HDU 1217 Arbitrage / SPOJ Arbitrage（图论，环）

    POJ 2240 Arbitrage / ZOJ 1092 Arbitrage / HDU 1217 Arbitrage / SPOJ Arbitrage(图论,环) Description Arbi ...