HTML5学前热身 实用技巧及应用详解

时间:2012-09-12来源:51CTO

十四、必要的属性(Required Attribute)

表单允许新的必要属性,用来指定是否需要特殊的input。这取决于你的代码偏好,你可以以下面两种方式之一申明此属性。

  1. <inputtypeinputtype="text"name="someInput"required> 

或者,使用更结构化的方法:

  1. <inputtypeinputtype="text"name="someInput"required="required"> 

两种方法都行。有了这个代码,并且浏览器支持此属性,如果“someInput”文本框是空白,则表单不会被提交。下面是一个简单的例子,我们还将添加占位符属性,因为没有理由不这样做。

  1. <formactionformaction=""method="get"> 
  2. <labelforlabelfor="name">姓名:</label> 
  3. <inputidinputid="name"name="name"type="text"placeholder="zhangxinxu"required="required"/> 
  4. <buttontypebuttontype="submit">提交</button></form> 

如果input里面内容是空白,则表单提交的时候,文本框会高亮显示。

十五、Autofocus属性

同样,HTML 5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”,或有重点的,默认情况下,我们现在可以利用自动获取焦点属性。

  1. <inputtypeinputtype="text"name="someInput"placeholder="zhangxinxu"requiredautofocus> 

十六、Audio支持

我们无需再依赖第三方插件区渲染音频。HTML 5提供了元素,我们将不必担心这些插件。就目前,只有最近期的的浏览器提供HTML 5音频支持。在这个时候,它仍然是一个很好的做法提供一些向后兼容的形式。

  1. <audioautoplayaudioautoplay="autoplay"controls="controls"> 
  2. <sourcesrcsourcesrc="file.ogg"/> 
  3. <sourcesrcsourcesrc="file.mp3"/> 
  4. <ahrefahref="file.mp3">Downloadthisfile.</a> 
  5. </audio> 

Mozilla和WebKit的还没有完全相处,当涉及到音频格式,Firefox会希望看到一个.ogg文件,而WebKit的浏览器支持.mp3扩展。这意味着,至少在现在,你应该创建两个版本的音频。

当Safari加载页面时,它不会承认.ogg格式,会跳过它并移动到的MP3版本,因此。请注意IE,每往常一样,不支持这些格式,Opera10和以及以下版本只能使用.wav文件。

十七、Video支持

与元素很类似,在新的浏览器中也存在Video!事实上,就在最近,YouTube宣告了新的HTML 5视频嵌入,当然,是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器,它留给了浏览器来决定。虽然Safari和InternetExplorer9可以预期支持H.264格式的视频(其中Flash播放器可以播放),Firefox和Opera是坚持开源Theora和Vorbis格式。因此,当显示HTML 5的视频,您必须提供这两种格式。

  1. <videocontrolspreload> 
  2. <sourcesrcsourcesrc="cohagenPhoneCall.ogv"type="video/ogg;codecs='vorbis,theora'"/> 
  3. <sourcesrcsourcesrc="cohagenPhoneCall.mp4"type="video/mp4;'codecs='avc1.42E01E,mp4a.40.2'"/> 
  4. <p>Yourbrowserisold.<ahrefahref="cohagenPhoneCall.mp4">Downloadthisvideoinstead.</a></p> 
  5. </video> 

还有一个值得注意的一些事情:

1.我们技术上不需要来设置type属性,但是,如果我们不这样做,浏览器不得不自己去寻找类型。

2.不是所有的浏览器理解HTML5视频。在资源元素的下面,我们可以提供一个下载链接,或嵌入视频的Flash版本代替。

3.controls和preload属性就会在下面提及。

4.有方法可以让所有的浏览器支持video标签。

1 2 3 4 5 6

关键词: HTML5

加入微信
获取电子行业最新资讯
搜索微信公众号:EEPW

或用微信扫描左侧二维码

相关文章

查看电脑版