<!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. Linux下的信号详解

    文章链接:https://blog.csdn.net/qq_38646470/article/details/80257512

  2. CEPH FILESYSTEM

    参考文档: CEPH FILESYSTEM:http://docs.ceph.com/docs/master/cephfs/ CephFS best practices:http://docs.cep ...

  3. C语言 -- 字符串详解

    字符串是一种非常重要的数据类型,但是C语言不存在显式的字符串类型,C语言中的字符串都以字符串常量的形式出现或存储在字符数组中.同时,C 语言提供了一系列库函数来对操作字符串,这些库函数都包含在头文件 ...

  4. SCRUM 12.17

    今天,我们的用户统计功能终于上线了!! 大家辛苦工作了许久.我们测试的用户统计功能效果模拟如下 还有一些好消息,比如,我们的应用在小米平台收到了崩溃的反馈报告. 这说明我们留下的一些BUG暴露了出来, ...

  5. 图文转化(Alpha)版使用说明

    图文转化使用说明 本软件是一款扫描图片上的文字转化成txt或doc格式存储的软件. 现在还只是初期简单的一个实现,软件暂时的界面显示如下: 简介:照片选取的是手机里的本地照片,拍照打开照相机进行拍照. ...

  6. CMake系列之一：概念

    不同的make工具遵循不同的规范和标准,因此针对不同的标准需要不同的Makefile文件.CMake利用一种平台无关的CMakeList.txt文件定制编译流程,根据目标用户的平台生成本地化的Make ...

  7. PAT 甲级 1057 Stack

    https://pintia.cn/problem-sets/994805342720868352/problems/994805417945710592 Stack is one of the mo ...

  8. offices 激活

    http://www.xitongcheng.com/jiaocheng/dnrj_article_44577.html  破解工具见cnblos文件中 : https://blog.csdn.net ...

  9. python进阶：Python进程、线程、队列、生产者/消费者模式、协程

    一.进程和线程的基本理解 1.进程 程序是由指令和数据组成的,编译为二进制格式后在硬盘存储,程序启动的过程是将二进制数据加载进内存,这个启动了的程序就称作进程(可简单理解为进行中的程序).例如打开一个 ...

  10. Spring MVC的路径匹配规则 Ant-style

    Spring默认的策略实现了 org.springframework.util.AntPathMatcher,即Apache Ant的样式路径,Apache Ant样式的路径有三种通配符匹配方法(在下 ...