H5 Day1 练习
<!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 练习的更多相关文章
- Day1:html和css
Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示.运行的平台,IE.火狐(Firefox).谷歌(Chrome). ...
- 前端入门——day1（简介及推荐书籍和网站）
写给谁 这篇文章写给想要入门前端或者刚入门前端的小白~如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦. 为啥写这篇文章 终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章.回想起自己的 ...
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
随机推荐
- RabbitMq基础教程之基本概念
RabbitMq基础教程之基本概念 RabbitMQ是一个消息队列,和Kafka以及阿里的ActiveMQ从属性来讲,干的都是一回事.消息队列的主要目的实现消息的生产者和消费者之间的解耦,支持多应用之 ...
- PAT甲题题解-1022. Digital Library (30)-map映射+vector
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789235.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- CSAPP lab2 二进制拆弹 binary bombs phase_2
给出对应于7个阶段的7篇博客 phase_1 https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2 https://www.cnblogs. ...
- sql not in 优化问题
问题情境: not in 耗时过长.想用join或exits代替.结果并不明显,这里先记录3种写法,以后探讨速度问题. sql语句: // not exists sql = @"select ...
- 从零开始学Kotlin-使用接口（7）
从零开始学Kotlin基础篇系列文章 定义接口 使用关键字interface定义接口 interface InterfaceDemo7 { } 类或对象可以实现一个或者多个接口 class demo7 ...
- JS基础（四）运算符
一.比较运算符 1.== : 判断两边值是否相等 2.>= : 判断左边的值是否大于或等于右边的值 3.<= : 判断左边边的值是否小于或等于右边的值 4.> : 判断左边的值是 ...
- MongoDB入门 和nodejs操作
简介 MongoDB 开源,高性能的NoSQL数据库:支持索引.集群.复制和故障转移.各种语言的驱动程序:高伸缩性: NoSQL毕竟还处于发展阶段,也有说它的各种问题的:http://coolshel ...
- kafka 数据一致性-leader,follower机制与zookeeper的区别；
我写了另一篇zookeeper选举机制的,可以参考:zookeeper 负载均衡 核心机制 包含ZAB协议(滴滴,阿里面试) 一.zookeeper 与kafka保持数据一致性的不同点: (1)zoo ...
- BZOJ2460 Beijing2011元素（线性基+贪心）
按价值从大到小考虑每个元素,维护一个线性基,如果向其中加入该元素的编号仍然构成线性基,则将其加入. 不会证明.当做线性基的一个性质吧. #include<iostream> #includ ...
- fgt2eth Script
fgt2eth Script explanation_on_how_to_packet_capture_for_only_certain_TCP_flags_v2.txt Packet capture ...