<!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. Azure 基础：自定义 Table storage 查询条件

    本文是在 <Azure 基础:Table storage> 一文的基础上介绍如何自定义 Azure Table storage 的查询过滤条件.如果您还不太清楚 Azure Table s ...

  2. Windows Server 2003出现Directory Listing Denied This Virtual Directory does not allow contents to be listed.的解决方案

    Directory Listing DeniedThis Virtual Directory does not allow contents to be listed. 是目录权限无法访问的问题 解决 ...

  3. github添加ssh连接用户

    最近打算用flask写一个自己的博客网站,打算把代码放在GitHub上,使用ssh访问.记录下GitHub配置ssh用户的流程. 1.在本地电脑或云服务器上生成ssh公钥和私钥,window下可以进入 ...

  4. 金蝶K3 11.0 WISE版本盘点机PDA条码数据采集器仓库条码管理

  5. 重磅发布丨乐维监控：全面兼容云平台，助力企业DevOps转型升级！

    2019年伊始,我们迎来了乐维监控的又一重大功能更新——云平台监控,这将有效帮助企业将云上.云下数据聚合,方便统一化的监控管理与维护!未来,乐维监控每一次的产品功能及版本更新,我们都将第一时间于此发布 ...

  6. 通过blockchain_go分析区块链交易原理

    原文链接-石匠的Blog 1.背景 在去中心化的区块链中进行交易(转账)是怎么实现的呢?本篇通过blockchain_go来分析一下.需要进行交易,首先就需要有交易的双方以及他们的认证机制,其次是各自 ...

  7. html5实现拖拽上传头像

    1. 将客户端(本地电脑)中的图片拖到网页中 要点: html5 拖放, FileReader html: <div id="container" ondrop=" ...

  8. JavaScript中执行环境和栈

    在这篇文章中,我会深入理解JavaScript最根本的组成之一 : "执行环境(执行上下文)".文章结束后,你应该对解释器试图做什么,为什么一些函数/变量在未声明时就可以调用并且他 ...

  9. ajax设置自定义请求头

    1, $.ajax({ url:apiUrl, type:"get", timeout : 5000, //超时时间设置,单位毫秒 dataType: "json&quo ...

  10. ElasticSearch 2 (18) - 深入搜索系列之控制相关度

    ElasticSearch 2 (18) - 深入搜索系列之控制相关度 摘要 处理结构化数据(比如:时间.数字.字符串.枚举)的数据库只需要检查一个文档(或行,在关系数据库)是否与查询匹配. 布尔是/ ...