HTML5新增标签和属性

时间  2019-12-12
标签 html5 html 新增 标签 属性 栏目 HTML5 繁體版
原文   原文链接

HTML5的一大革新就是语义化标签的完善

section

w3c规范规定section是用来划分网页的,表示页面中的一个内容区块,好比章节,页眉,页脚或页面的其余部分.能够和h1,h2…等其余标签结合起来一块儿使用,表示文档结构javascript

article

定义能够独立于内容其他部分的完整独立内容块,article元素就是专门为摘要设计的,好比一篇文章html

aside

表示article标签内容以外的,与article标签内容相关的辅助信 息,aside元素应该被用于无关内容。前端

  • 若是你有你认为应该与主内容分开的内容，那么aside元素是你应该正 确考虑使用的元素。
  • 询问你本身aside元素中的内容是否能够被独立开来而不会影响文档或 者section中主内容的含义。
  • 能够用在主要内容相关的引用,侧边栏,广告,nav元素组等
  • 简单来讲 :aside的内容若是被删除，剩下的内容仍然很合理

hgroup

对整个页面/页面中的一个内容区块的标题进行组合html5

一个内容区块或整个页面的头部部分java

整个页面或页面区块的尾部web

页面中导航连接的部分正则表达式

figure

  • 表示一段独立的流内容,通常表示文档主体流内容中的一个独立单元
  • figure元素常常用于图片

figcaption

  • 表明一个图例的说明
  • 表明了figure元素的一个标题或者说是其相关解释.
  • 在使用figcaption时，它最好是figure块的第一个或者最后一个元素

mark

高亮显示浏览器

progress

进度条安全

time

<time></time>用来表现时间或日期服务器

  • <p> 咱们在天天早上 <time>9:00</time>开始营业。 </p>参数
  • <p>我在 <time datetime=“2016-02-14T20:00Z” pudate>这一天</time> 发布了一篇文章。 </p>

wbr

<p>一行放不下则在这换行<wbr/>能放下则一行显示</p>

datalist

选项列表与 input 元素配合使用，能够设置提示信息

<input  type="text" id="" list="shopCars"/>
<datalist id="shopCars"> <!--为表单设置可选值-->
<option value="aa"></option>
<option value="ab"></option>
<option value="c"></option>
</datalist>

details

用于描述文档或文档某个部分的细节
summary标签和details一块儿使用,表示标题,用户点击标题时会获得细节信息

<details>
<summary>111</summary>
<ul>
<li>111</li><li>222</li><li>333</li>
</ul>
</details>

output

不一样类型的输出,好比脚本的输出

<form oninput="x.value= parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" max="100" min="0" value="50"/>+
<input type="number" id="b" value="50"/>
<output name="x" for="a b">150</output>
</form>

新增标签的兼容问题

HTML5语义化标签在IE6-8下，对于不支持的标签不会有任何的样式,也默认的当成行内元素来出来,因此在样式表里要对这些标签订义一下 它默认的display
经过引入以下js来解决ie9如下新增标签的兼容问题

<!--[if lt IE 9]> <script type="text/javascript" src="html5.min.js"></script> <![endif]-->

Forms

新增input元素的种类：

  • search : 搜索输入框
  • tel : 电话号码输入框
  • url : 输入url地址
  • email : 邮件输入框
  • number : 数字输入框
  • range :特定范围内的数值选择器(经过拖动滚动条改变必定范围内的数字)
  • color : 颜色选取器 只在 Opera 和 Blackberry 浏览器
  • datetime : 显示完整日期和时间 UTC标准时间
  • datetime-local : 显示完整日期和时间
  • time : 显示时间
  • month : 显示月
  • week : 显示周

表单新特性

  • placeholder
    输入框占位符，经常使用做输入提示，在光标聚焦时，占位符自动消失
  • autocomplete : 是否保存用户输入值
    默认为on,关闭提示选择off
  • autofocus : 自动聚焦
  • required : 此项必填，不能为空
  • Pattern : 正则验证 pattern="\d{1,5}“
  • form 属性 只要加上 form 属性，表单元素能够放到页面的任意位置。
  • formnovalidate 和 novalidate
    它俩都表示不须要验证表单,直接提交；
    novalidate 用于 form 标签；
    formnovalidate 用于 submit类型的提交按钮。

表单验证

validity对象，经过下面的valid能够查看验证是否经过
oText.addEventListener("invalid",fn1,false);
valid : 验证不经过时返回false
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不知足pattern正则
customError 不符合自定义验证
setCustomValidity(); 自定义验证

当表单元素验证不经过时,会触发invalid事件，
如何判断表单元素有没有验证经过?
1)全部的表单元素上有个validity对象
2)validity对象上有一些属性:valid(false) valueMissing(true) patternMismatch(true) typeMismatch(true) customError(true)
注:括号里是验证不经过时的返回值
setCustomValidity 设置自定义验证规则

<form action="" >
   <!-- <input type="text" name="text" id="text1" pattern="\d{2}"/>-->
    <input type="url" name="url" id="text1" />
    <input type="submit" value="提交"/>
</form>

<script>
    var oText = document.querySelector("#text1");

    oText.addEventListener("invalid",function(){
        //valid 只要验证不经过,值为false
        console.log(this.validity.valueMissing);/!*配合required属性,若是为空,则这个值true*!/
    },false)

    oText.addEventListener("invalid",function(){
        console.log(this.validity.customError)
        if(this.validity.patternMismatch){
            this.setCustomValidity("只能输入两位数字");//自定义验证提示信息
            console.log(this.validity.customError)
        }else{
            this.setCustomValidity('');
        }
    },false)

    oText.addEventListener("invalid",function(){
      console.log(this.validity.typeMismatch)
    },false)
</script>

全局属性

  • data-yourvalue
    自定义属性
    data-name : dataset.name
    data-name-first : dataset.nameFirst
  • Hidden
    加上这个属性,元素则是不可见状态
  • spellcheck
    对你输入的内容纠错
  • tabindex
    按下tab键能够根据设置的顺序进行跳转
  • contenteditable
    <p contenteditable="true">请您留言</p>
    表示这块内容是能够编辑的 去掉则不能够修改
  • desginMode
    <script>
    window.document.designMode = “on“
    </script>

HTML5表单及其验证

HTML表单一直都是Web的核心技术之一，有了它咱们才能在Web上进行各类各样的应用。HTML5 Forms新增了许多新控件及其API，方便咱们作更复杂的应用，而不用借助其它Javascript框架。

表单还是以<form>元素做为容器，咱们可在其中设置基本的提交特性；
当用户提交页面时，表单仍然向服务器发送表单控件的值；
以前老版本中的表单控件，如text radio checkbox等等，均可以按原有方式使用，尽管增长了新的功能；
仍然可使用javascript操做表单控件。

1.输入型控件

Input type 用途 说明
email 电子邮件地址文本框
url 网页URL文本框
number 数值的输入域 属性 值 描述
max number 规定容许的最大值
min number 规定容许的最小值
step number 规定合法的数字间隔（若是 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
range 特定值的范围的数值，以滑动条显示 属性 值 描述
max number 规定容许的最大值
min number 规定容许的最小值
step number 规定合法的数字间隔（若是 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
Date pickers 日期，时间选择器 仅Opera9+支持，包含date, month, week, time, datetime, datetime-local
search 用于搜索引擎，好比在站点顶部显示的搜索框 与普通文本框用法同样，只不过这样更语文化
color 颜色选择器 仅Opera支持

将本来type为text的input控件声明为以上特殊类型，是为了给用户呈现不一样的输入界面（移动平台上支持这些不一样的输入界面，这里就不细说），并且表单提交时会对其值作进一步的验证。下面展现这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。

E-mail:

date:

range: number: color:

2. 表单新特性和函数

2.1 placeholder

当用户尚未输入值时，输入型控件可能经过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供相似功能，简单的说下在旧版本中经常使用的解决方案，为输入控件建立一个label，而后经过CSS控制些label的位置使之覆盖在输入控件上面，当label得到焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框得到焦点并有值后，该提示信息自动消失。

如：

<p><label for="runnername">Runner:</label>
             <input id="runnername"name="runnername" type="text" placeholder="First and last name" />
          </p>

2.2 autocomplete

其实在IE6中,autocomplete就已经实现，不过如今这一特性终于标准化了，浏览器经过autocomplete特性可以知晓是否应该保存输入值以备未来使用，autocomplete应该用一保护用户敏感数据，避免本地浏览器对它们进行不安全的存储。

类型 做用
on 该字段无需保护，值能够被保存和恢复
off 该字段须要保护，值不能够保存
unspecified 包含<form>的默认设置，若是没有被包含在表单中或没有指定值，则行为表现为on

如：

<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。

2.3 autofocus

页面载入时，咱们经过autofocus指定某个表单元素得到焦点，但每一个页面只容许出现一个autofocus，若是设置多个则至关于未指定些行为。目前Opera10,Chrome和Safari浏览器支持。若是用户有但愿焦点转移的状况下，使用autofocus会惹恼用户。

2.4 list特性和datalist

经过使用list，开发人员可以为某个输入型控件构造一个选值列表，其使用方法：

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Webpage:




2.5 required

required 属性规定必须在提交以前填写输入域（不能为空）。它是表单验证最简单的一种方式方法，使用方法：

Name: <input type="text" name="usr_name" required="required" />
2.6 pattern

pattern 属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，若是value不符合其正则表达式，那表单将通不过验证，没法提交。使用方法：

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
2.7 novalidate

novalidate 属性规定在提交表单时不该该验证 form 或 input 域。

如：

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

3. 表单验证

表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化，让web应用更快的抛出错误，但它仍不能取代服务器端的验证，重要数据还要要依赖于服务器端的验证，由于前端验证是能够绕过的。

目前任何表单元素都有八种可能的验证约束条件：

名称 用途 用法
valueMissing 确保控件中的值已填写 将required属性设为true，
<input type="text"required="required"/>
typeMismatch 确保控件值与预期类型相匹配 <input type="email"/>
patternMismatch 根据pattern的正则表达式判断输入是否为合法格式 <input type="text" pattern="[0-9]{12}"/>
toolong 避免输入过多字符 设置maxLength，<textarea id="notes" name="notes" maxLength="100"></textarea>
rangeUnderflow 限制数值控件的最小值 设置min，<input type="number" min="0" value="20"/>
rangeOverflow 限制数值控件的最大值 设置max，<input type="number" max="100" value="20"/>
stepMismatch 确保输入值符合min,max,step的设置 设置max min step，<input type="number" min="0" max="100" step="10" value="20"/>
customError 处理应用代码明确设置能计算产生错误 例如验证两次输入的密码是否一致

下面展示浏览器自带的验证功能请在Chrome、Opera或Firefox中查看：

源代码：

<form name="register1" id="register1">
          <p><label for="runnername">RunnerName:</label>
             <input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
          </p>
          <p><label for="phone">Tel #:</label>
             <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
                    placeholder="xxx-xxxx-xxxx"/></p>
          <p><label for="emailaddress">E-mail:</label>
             <input id="emailaddress" name="emailaddress" type="email" 
                    placeholder="For confirmation only"/></p>
          <p><label for="dob">DOB:</label>
             <input id="dob" name="dob" type="date"
                    placeholder="MM/DD/YYYY"/></p>
          <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
          <p><label for="style">Shirt style:</label>
               <input id="style" name="style" type="text" list="stylelist" title="Years of participation" 
                autocomplete="off"/></p>
            <datalist id="stylelist">
             <option value="White" label="1st Year"/>
             <option value="Gray" label="2nd - 4th Year"/>
             <option value="Navy" label="Veteran (5+ Years)"/>
            </datalist>
           
         <fieldset>
            <legend>Expectations:</legend>
            <p>
            <label for="confidence">Confidence:</label>
            <input id="confidence" name="level" type="range"
                   onchange="setConfidence(this.value)"
                   min="0" max="100" step="5" value="0"/>
            <span id="confidenceDisplay">0%</span></p>
            <p><label for="notes">Notes:</label>
               <textarea id="notes" name="notes" maxLength="100"></textarea></p>
         </fieldset>
 
         <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
        </form>

但是各个浏览器验证行为不一致，咱们可能须要统一其验证行为，借助javascript咱们能够统一浏览器的验证行为。

仍是以上上述HTML为基础，咱们为其加上相关javascript:

//自定义表单控件验证行为
            var checkvalue = function(e){
                var el = e.target;
                var isvalid = el.checkValidity();
                if(isvalid){
                    el.className= "";
                    el.parentElement.getElementsByTagName("label")[0].className="";
                }else{
                    el.className= "error";
                    el.parentElement.getElementsByTagName("label")[0].className="error";
                }
                e.stopPropagation();
                e.preventDefault();
            }
            //定义表单验证方法
            function invalidHandler(evt) {
                checkvalue(evt);
            }
            function loadDemo() {
               var myform = document.getElementById("register1");
               //注册表单的oninvlid事件
               myform.addEventListener("invalid", invalidHandler, true);
                for(var i=0;i< myform.elements.length-1;i++){
                    //注册表单元素的onchange事件，优化用户体验
                    myform.elements[i].addEventListener("change",checkvalue,false);
                }
            }
            //在页面初始化事件（onload）时注册的自定义事件
            window.addEventListener("load", loadDemo, false);

最后说下输入两次密码匹配的验证，写的很简单：

<form name="passwordChange">
    <p><label for="password1">New Password:</label>
    <input type="password" id="password1" onchange="checkPasswords()"></p>
    <p><label for="password2">Confirm Password:</label>
    <input type="password" id="password2" onchange="checkPasswords()"></p>
</form>
<button onclick="document.passwordChange.password1.checkValidity()">Check Validity</button>
function checkPasswords() {
        var pass1 = document.getElementById("password1");
        var pass2 = document.getElementById("password2");
 
        if (pass1.value != pass2.value)
            pass1.setCustomValidity("两次输入的密码不匹配");
        else
            pass1.setCustomValidity("");
    }
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程