H5新特性 - 新增标签

新增标签

新增的语义标签

标签语义化

旨在让标签有自己的含义，见名知义

优势

代码结构清晰，方便阅读，有利于团队开发（开发效率提高）
方便其他设备解析（屏幕阅读器，盲人阅读器）以语义的方式来渲染页面
有利于搜索引擎优化（SEO）

• 主体结构元素
  主要用来划分区域

<nav> 导航 </nav>
<article> 主体 </article>
<section> 用来表示 段或者章节 (模块) </section>
<aside> 主体之外的附属信息 例如侧边广告栏 </aside>
<time> 9:00 </time>

• 非主体元素

<header> 用在页面的头部
<footer> 用在页面的底部
<address> 标签定义文档坐着或拥有的联系信息
<main> 定义文档的主要内容
进度条
<progress value=“25” min=“0” max=“50” id=“pro”></progress>

• 新增表单控件

email: <input type=“email” name="" value="" />
电话号码：<input type=“tel” name="" value="" />
在移动端会有键盘的切换
搜索： <input type=“search” name="" value="" />
网址：<input type=“url” />
数字： <input type=“number” />
数值选择器： <input type=“range” step=“1” min=“0” max=“10” value=“10”/>
step 每次移动的增量 min:最小值 max:最大值 value: 初始位置
颜色：<input type=“color” id=“col”/>
日期：<input type=“date” />
时间： <input type=“time” name="" id="" value="" />
周：<input type=“week” />
月：<input type=“month” />

• 新增表单属性
  placeholder : 提示信息
  autocomplete : 是否保存用户输入值(取消提示信息)
  autofocus : 指定表单获取输入焦点
  required : 表示此项必填 ，不能为空
  pattern : 正则验证 pattern="\d{1,5}"
  formaction : 在submit里定义提交地址
  formmethod : 选择数据提交方式 get post
  formnovalidate: 表单提交后，重新加载此页面

<form action="https://www.baidu.com/" autocomplete="on">
    <input type="text" placeholder="请输入字符~~" autofocus="autofocus"/>
    <input type="password"/>
    <input type="text" placeholder="请输入1-5位数字" autofocus="autofocus" 
    	 pattern="^\d{1,5}"/>
    <input type="email" name=""  value=""  required="required"/>
    <input type="submit" value="提交"/>
    <input type="submit" value="保存到草稿" 
    	formaction="http://www.w3school.com.cn/html5/att_input_type.asp" 
    	formmethod="get"/>
</form>

• 表单验证方式

	<form action="" method="post" >
    	用户新名：<input type="text"  required="required" id="name"/>
    	<input type="email" value=""/>
    	<input type="submit" value="提交11" onclick="checkForm(this.form)"/>
    	<input type="submit" formnovalidate="formnovalidate"/>
	</form>
	

• checkValidity()方法
  显式验证方法。每个表单元素都可以调用checkValidity()方法（包括form），它返回一个布尔值，
  表示是否通过验证。默认情况下，表单的验证发生在表单提交时，如果使用checkValidity()方法，
  可以在需要的任何地方验证表单。

    function check(){
        if(tex.value == ""){
            alert("请输入用户名");
            return false;
        }else if(!ema.checkValidity()){  
        //符合emali的验证alert("请输入emali邮箱")
            return false;
        }else{
            alert("验证通过")
        }
    }

• setCustomValidity()方法
  自定义错误提示信息的方法
  当默认的提示错误满足不了需求时，可以通过该方法自定义错误提示

    function checkForm(frm){
        var name = frm.name;
        console.log(name.value);
        if(name.value == ""){
            name.setCustomValidity("你是猪吗？！");
        }else{
            name.setCustomValidity("");
        }
    }