h5 -1
<header></header> 页眉
主要用于页面的头部的信息介绍，也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合
一个标题和一个子标题，或者标语的组合
<hgroup>
<h1>妙味课堂</h1>
<h2>带您进入富有人情味的IT培训</h2>
</hgroup> <figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<figure>
<img src=“miaov.png”/>(注意没有alt)
<figcaption> 妙味课堂 photo © 妙味趣学</figcaption>
</figure> 新的表单特性和函数
placeholder : 输入框提示信息
例子 : 微博的密码框提示
autocomplete : 是否保存用户输入值
默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空
Pattern : 正则验证 pattern="\d{1,5}“
Formaction 在submit里定义提交地址 表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证 表单验证
Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header>用在页面的头部或者版块的头部</header>
<footer>用在页面的头部或者版块的底部</footer>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<nav><a href="#">链接</a><a href="#">链接</a></nav>
<nav>
<p><a href="#">妙味课堂</a></p>
<p><a href="#">妙味课堂</a></p>
</nav>
<nav>
<h2>妙味精品课程</h2>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">html+css</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<hgroup>
<h1>妙味课堂</h1>
<h2>带您进入富有人情味的IT培训</h2>
</hgroup>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>
<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="text" list="valList" />
<datalist id="valList">输出框提示的下拉列表
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<details>
<summary>妙味课堂</summary>
<p>国内将知名的IT培训机构</p>
</details>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<dialog open>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<progress max="200" value="100">
<span>76</span>% //低版本的兼容
</progress>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="email" />
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="range" step="2" min="0" max="10" value="2" /> 最小是0最大是10，每一步是2，初始值是2
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="color"/>
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="datetime"/> 时间控件
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="datetime-local"/>
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="month"/>
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入4-16个字符" />
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="on" /> 保存之前输入的值作为提示
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" />
<input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" autofocus /> 获取焦点
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required /> 非空校验
<input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" required />
<input type="submit" />
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" /> 正则校验，前台校验在浏览器可以改，改了就没有了。
<input type="submit" value="提交" />
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" /> 按钮的url
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" required id="text"/>
<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.valid);
ev.preventDefault();
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" required id="text"/>
<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false); //invalid事件名
function fn()
{
alert(this.validity.valueMissing);
ev.preventDefault();//阻止默认提交事件 /*validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证*/ } //valueMissing 当输入值为空的时候返回true
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="email" id="text"/>
<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.typeMismatch);
ev.preventDefault();
} //valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型email不一致的时候返回true
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="email" id="text" maxlength="5"/>
<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.value="123456789";
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.tooLong);
ev.preventDefault();
} //valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
<input type="text" id="text" />
<input type="submit" />
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function()//oninput事件
{
if(this.value=="敏感词")
{
this.setCustomValidity("请不要输入敏感词");//校验下拉框文本
}
else
{
this.setCustomValidity("");
}
};
function fn()
{
alert(this.validity.customError);
ev.preventDefault();
} //valueMissing 当输入值为空的时候返回true
//typeMismatch 当输入类型和要求的类型不一致的时候返回true
//patternMismatch 当用户输入的内容和预期的正则要求不匹配 返回true
//tooLong 当用户输入的长度 超出了maxlength的限制 返回true
//customError 不符合自定义验证的时候返回true
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" placeholder="请输入4-16个字符" name="user" pattern="\d{1,5}" required />
<input type="submit" value="提交" />
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" formnovalidate />
</form>
</body>
</html>
h5 -1的更多相关文章
- 旺财速啃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还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【腾讯Bugly干货分享】H5 视频直播那些事
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- bzoj 3781 小B的询问（莫队算法）
[题意] 若干个询问sigma{ cnt[i]^2 } cnt[i]表示i在[l,r]内的出现次数. [思路] 莫队算法,裸题. 一个cnt数组即可维护插入与删除. [代码] #include< ...
- Embedded之memory type
1 Types of memory 2 Characteristics
- PySpark调用自定义jar包
在开发PySpark程序时通常会需要用到Java的对象,而PySpark本身也是建立在Java API之上,通过Py4j来创建JavaSparkContext. 这里有几点是需要注意的 1. Py4j ...
- 桶排序-Swift
import Foundation let b:Array = [5,2,3,1,8] var a:NSMutableArray = [] for var i in 0 ..< 11 { a[i ...
- js运动 模仿淘宝幻灯
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- delphi请求idhttp数据
idhttp ss : TStringStream; begin ss := TStringStream.)); { 指定gb2312的中文代码页,或者54936(gb18030)更好些 utf8 对 ...
- Nginx下Redmine2.6配置
Apache下Redmine2.6配置,请参考:http://blog.linuxeye.com/405.html CentOS6.6下安装Redmine2.6+MySQL5.6+Nginx,教程如下 ...
- HDU 5794 A Simple Chess (Lucas + dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5794 多校这题转化一下模型跟cf560E基本一样,可以先做cf上的这个题. 题目让你求一个棋子开始在( ...
- uva 542 - France '98(概率）
题目链接:uva 542 - France '98 题目大意:有16支球队比赛,给出16支球队的名称,然后给出16*16的表格,g[i][j] 表示i队胜j队的概率,问说16支球队获得总冠军的概率. ...
- C#下利用高精度计时器进行计时操作
简介 精确的时间计量方法在某些应用程序中是非常重要的.常用的 Windows API 方法 GetTickCount() 返回系统启动后经过的毫秒数.另一方面,GetTickCount() 函数仅有 ...