分针网——每日分享：HTML5新增标签 + 智能表单

更多文章：www.f-z.cn

一.HTML5的新增语义标签

1. 全新语义化标签

<section>:用来定义文档或应用程序中的区域或章节.

<nav>:用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域.

<article>用来包裹独立的内容片段,通常用来包裹文档中文章.

<aside>:用来表示与页面主内容松散相关的内容,常被用来用作侧边栏的部分.

<hgroup>:如果页面中有一组使用<h1>,<h2>,<h3>等标签的标题,标语和副标题, 则可以使用该标签进行包裹.HTML5的大纲结构算法会自动组织好大纲.

<header>:被用作网页的页眉部分

<footer>:被用作网页的页脚部分

2.语义化标签的兼容性问题

在IE低版本浏览器中,无法识别HTML5的新增标签,所以使用HTML5进行的页面布局会全部无效.这里推荐使用Modernizr来解决兼容性问题

Modernizr是一个用于检测浏览器功能的开源JavaScript库.包括Twitter,微软和谷歌都在使用Modernizr作为兼容性的解决方案.

2.1 下载Modernizr： http://www.modernizr.com

2.2 引用Modernizr

Modernizr作为一个JavaScript的库,引用方式和jQuery一样,都是在<script>标签中进行引用,代码如下:

  
  

   
   <script src
   
   =
   
   "js/modernizr.js"
   
   > 
   
   <
   
   /script
   
   >
  
  

2.3针对IE低版本浏览器增加垫片脚本

因为我们在高版本浏览器中并不需要使用Modernizr进行兼容性方案的解决,所以,我们只需要针对IE8以下浏览器引用上述的js文件,代码如下:

  
  

   
   <
   
   !
   
   --
   
   [
   
   if lts IE 
   
   8
   
   ]
   
   >
  
  
  
  
    
   
   <script src
   
   =
   
   "js/modernizr.js"
   
   >
   
   <
   
   /script
   
   >
  
  
  
  

   
   <
   
   !
   
   [endif
   
   ]
   
   --
   
   >
  
  

二.HTML5中的多媒体

1. 多媒体标签

1.1 <video>

HTML <video>标签用于在HTML文档中嵌入视频文件.

1.2 <audio>

HTML <audio>标签用于在HTML文档中嵌入音频文件.

1.3 文件格式的兼容性问题

由于专利的问题，不同的浏览器对HTML5的video和audio有不同的规范和实现；所以,多媒体的文件格式的不同会在不同浏览器中出现兼容性问题.通常使用<source>元素来解决.

1.3.1 <video>的兼容性解决方案

  
  

   
   <video controls
   
   >
  
  
  
  

   
   <source src 
   
   = 
   
   "yourvideo.webm" type
   
   =
   
   "video/webm"
   
   >
  
  
  
  

   
   <source src 
   
   = 
   
   "yourvideo.mp4" type
   
   =
   
   "video/mp4"
   
   >
  
  
  
  

   
   <
   
   /video
   
   >
  
  

1.3.2 <audio>的兼容性解决方案

  
  

   
   <audio controls
   
   >
  
  
  
  

   
   <source src 
   
   = 
   
   "youraudio.ogg" type
   
   =
   
   "audio/ogg"
   
   >
  
  
  
  

   
   <source src 
   
   = 
   
   "youraudio.mp3" type
   
   =
   
   "audio/mp3"
   
   >
  
  
  
  

   
   <
   
   /audio
   
   >
  
  

2. 多媒体常用属性

1.autoplay

布尔属性;指定后，视频会马上自动开始播放，不会停下来等着数据载入结束.

2.control

加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放.

3.loop

布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方.

4.muted

布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放.

5.src

要嵌到页面的视频的URL。可选；你也可以使用 <source> 元素来指定需要嵌到页面的文件。

三.HTML5中的智能表单

1. 表单新增输入类型

type="email":指定用户输入符合电子邮箱格式的值,如果提交一个不符合电子邮箱格式的值是,浏览器会生成警告信息.

type="number":指定用户输入数字类型的值.

type="tel": 对格式没有要求,只是在针对移动端上,对点击后跳出数字键盘.

type="color":在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值

type="date:在支持该特性的浏览器中生成一个日期选择器.

type="month:在支持该特性的浏览器中生成一个月份选择器.

type="week:在支持该特性的浏览器中生成一个选择器,选择器允许用户选择一年中的某一周.

type="time:允许用户输入一个24小时制的时间值,在支持该特性的浏览器中会生成一个加减控制按钮.

type="range和:生成一个滑动条,默认的输入范围是0到100.

2. 表单新增属性

placeholder: 在表单域中显示占位符

required:表明该表单必填,如果表单提交时,必填项没有任何信息,浏览器则会显示警告信息.

autofocus:让表单在加载完成时就有一个表单被默认选中,方便用户输入

autocomplete:帮助用户根据历史输入信息自动完成输入

list 和 <datalist>:list属性中的值同时也是<datalist>中的id,这样就可以让<datalist>与输入项关联起来,在用户开始输入的时候,输入框下面就会显示一个数据选择框,其中包含从<datalist>中检索到的匹配数据.

multiple:规定<input>元素可以选择多个值.

pattern:描述了一个正则表达式用于验证<input>中的值.

3. 表单事件

oninput : 当用户输入内容的时候触发该事件

oninvalid: 当信息无法验证通过的时候触发该事件

加入职业技能圈 q群：272292492