22个HTML 5第二讲

22个html 5 第二讲:上面一章讲到了HTML5的几个技巧,现在我们来学习新的技巧。

8. 占位符

此前,我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。

 
 
  1.    

9. 本地存储

多亏了HTML5的 local storage ,我们可以让高级浏览器"记住"我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。

10. 语义性的Header和Footer

 
 
  1.    
  2. …   
   
  •    
  • …   
  •    

    上面的代码一去不复返。Divs从根本上来说并没有任何语义结构,即使应用上了ID还是如此。而在HTML5中,我们可以使用

    元素,上面的代码就可以替换为:

     
     
    1.    
    2. …   
       
  •    
  • …   
  •    
  • 不过注意不要将这两个元素与网站的头部和脚部混淆起来。它们只是代表它们的容器。

    11. IE和HTML5

    IE理解新的HTML5元素需要费一定的神,为了确保新的HTML5元素能够以块级元素正确显示,有必要将它们用下面的代码定义风格:

     
     
    1. header, footer, article, section, nav, menu, hgroup {     
    2. display: block;     
    3. }   

    就算如此,IE还是不知道这些元素究竟是什么,因而会无视这些格式,还需要用到下面的代码来解决这个问题:

     
     
    1. document.createElement(“article”);   
    2. document.createElement(“footer”);   
    3. document.createElement(“header”);   
    4. document.createElement(“hgroup”);   
    5. document.createElement(“nav”);   
    6. document.createElement(“menu”);   

    12. 群组标题(hgroup)

    假设一个网站有名称、副标题分别用

    标签来标记,在HTML4中还没有一种能够将两者之间的关系用很好的语义关系来描述的方法,此外,当使用h2在页面中显示其它标题时,在层级方面问题就更多。而使用群组标题hgroup元素,我们可以将这些标题聚集在一起,而不影响文档的整个纲要。

     
     
    1.    
    2.    
    3.  Recall Fan Page 

         
    4.  Only for people who want the memory of a lifetime. 

         
    5.    
    6.    

    13.必要(Required)属性

    表单允许新的必要属性,规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好,用下面两种不同方式来声明这个属性:

     
     
    1.    

    或者,更严谨:

     
     
    1.    

    上面两行代码都行得通。用了这行代码之后,并且浏览器支持required属性的话, 输入空白的表单就不会被提交。下面是一个简单的例子,同时我们也添加了占位符属性:

     
     
    1.    
    2.  Your Name:    
    3.    
    4. Go   
    5.    

    如果输入是空的,表单将无法提交,突出显示文本框。
    14. 自动对焦(Autofocus)属性

    同样地,有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被"选择"或被聚焦,我们现在可以使用HTML的自动对焦autofocus属性。

     
     
    1.    

    15. 音频支持

    我们再也不需要依靠第三方插件来提供音频了。HTML5提供了音频元素

     
     
    1.    
    2.    
    3.    
    4. Download this file.   
    5.    

    说道音频格式,Mozilla和Webkit都还没有完全支持。Firefox希望看到一个 .ogg文件,Webkit浏览器只支持最常见的.mp3扩展名。这意味着说,至少目前为止,你应该创建两个版本的音频。当Safari加载页面时,它认不出.ogg格式的文件,将会跳过并移到mp3版本上。请注意,IE并不支持它,Opera 10 或更低的版本只支持 .wav文件。

    新闻标题:22个HTML 5第二讲
    当前链接:http://www.shufengxianlan.com/qtweb/news36/324886.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    网站营销知识

    同城分类信息