h5 -1
2016-04-06 11:00
344 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5+CSS3 loading 效果收集－－转载
- 2016年最火的15款HTML5游戏引擎
- 非常优秀的8个HTML5前端框架
- ajax与HTML5 history pushState/replaceState实例
- Web开发者不容错过的10个HTML5工具
- 设计师必看的10个HTML5动画工具
- HTML5游戏实战之拼图游戏（包含关卡）
- 客户端存储之HTML5 web存储
- websocket使用
- 30多个HTML5经典动画应用展示
- HTML5性能优化与分析
- HTML5 声明兼容IE的写法(转载)
- 手把手教你搭建自己的Java Web(Android)项目（SpringMVC + Mybatis服务端，Html5 Web端, Android客户端实现）
- HTML5调用摄像头实例
- h5 和之前版本的区别
- html5：服务器事件推送（server-sent events）Asp.net
- html5
- HTML5 -1- 简介
- 移动h5自适应布局
- html5 图片热点area，map的用法