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 &copy 妙味趣学</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>

 

posted @ 2016-04-06 11:00  无天666  阅读(264)  评论(0)  编辑  收藏  举报