<!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. docker之私有仓库镜像管理

    一.查看本地镜像 二.给镜像打标记(tag ) [root@node03 ~]# docker tag wordpress:v1 192.168.1.197:5000/wordpress:v1 2.删 ...

  2. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  3. linux一切皆文件之块设备文件（四）

    一.知识准备 1.在linux中,一切皆为文件,所有不同种类的类型都被抽象成文件(比如:块设备,socket套接字,pipe队列) 2.操作这些不同的类型就像操作文件一样,比如增删改查等 3.块设备是 ...

  4. win10系统安装web3js的正确方法

    在安装web3的时候 用npm  install web3 –save-dev 在win10系统下会一直安装不成功.后来换用了 cnpm install web3 –save-dev 安装时候报出:C ...

  5. PAT甲题题解-1003. Emergency (25)-最短路径+路径数目

    给出n个城市,m条边,起始点c1和目的点c2接下来给出n个城市的队伍数以及m条双向边问你求c1到c2的所有最短路径数目,以及其中经过的最多队伍数 先最短路dijkstra,同时建立vector数组pr ...

  6. JSP JSTL知识结构图

    自行绘制,欢迎指正.

  7. 20135202闫佳歆--week4 系统调用（上）--学习笔记

    此为个人笔记存档 week 4 系统调用(上) 一.用户态.内核态和中断处理过程 用户通过库函数与系统调用联系起来. 1.内核态 在高执行级别下,代码可以执行特权指令,访问任意的物理地址. 2.用户态 ...

  8. 《Linux内核分析》第三周学习小结 构造一个简单的Linux系统OS

    郝智宇 无转载 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 第三周 构造一个简单的Linux系统Me ...

  9. thinkphp5报错

    thinkPHP5配置nginx环境无法打开(require():open_basedirrestrictionineffect.File(/mnt/hgfs/ro (2018-07-19 22:05 ...

  10. [知乎]BAT占线

    黑色自有,蓝色全资收够,红色入股. https://www.zhihu.com/question/304396738/answer/547766603