dwdivcss吧 关注:3贴子:49
  • 9回复贴,共1

html5的新特性

只看楼主收藏回复

作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程,但html5具体有哪些特性和改进,能准确地说出HTML5带来了哪些新特性吗?多数人还不是十分了解。下面介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率。
XHTML文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www。w3。org/TR/xhtml1/DTD/xhtml1-transitional。dtd">
HTML5文档类型
<!DOCTYPE html>


IP属地:广东1楼2014-04-04 11:08回复
    二、<small>重新定义
    <small>元素已经被重新定义了,指小字,因而更具可用性。试想下你网站底部的版权状态,根据对此元素新的HTML5定义,<small>可以正确地包裹这些信息。


    IP属地:广东2楼2014-04-04 11:09
    回复
      2025-06-06 13:29:46
      广告
      三、脚本(scripts)和链接(links)无需type
      这意味着,这些标签都各自指向样式表和脚本。因此,我们可以把type属性一起干掉。
      <link rel="stylesheet" href="path/to/stylesheet。css" />
      <script src="path/to/script.js"></script>


      IP属地:广东3楼2014-04-04 11:09
      回复
        五、语义的Header和Footer
        通过HTML5,我们可以使用<header>和<footer>元素
        <header>
        ...
        </header>
        <footer>
        ...
        </footer>
        它完全适合您有多个页眉和页脚的项目。
        尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此,将博客底部的,例如,元信息放在footer元素内部是说得通的。这同样也适用于header。


        IP属地:广东5楼2014-04-04 11:10
        回复
          六、文档某一部分的信息(hgroup)
          想象一下,在我的网站的标题,我有我的站点的名称,随后立即由一个副标题。虽然我们可以使用一个<h1>和<h2>标签,为其分别创造标记,但是依旧没有(因为HTML4)一个简单的方法来语义上说明了两者之间的关系。此外,一个h2标记的使用提出了更多的问题,在层次结构上,当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素,我们可以将这些标题组合在一起。
          <header>
          <hgroup>
          <h1> Recall Fan Page </h1>
          <h2> Only for people who want the memory of a lifetime. </h2>
          </hgroup>
          </header>


          IP属地:广东6楼2014-04-04 11:11
          回复
            七、Autofocus属性
            HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”,或有重点的,默认情况下,我们现在可以利用自动获取焦点属性。
            <input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>


            IP属地:广东7楼2014-04-04 11:12
            回复
              八、Audio支持
              我们无需再依赖第三方插件区渲染音频。HTML5提供了<audio>元素,嗯,至少,最终,我们将不必担心这些插件。就目前,只有最近期的的浏览器提供HTML5音频支持。在这个时候,它仍然是一个很好的做法提供一些向后兼容的形式。
              <audio autoplay="autoplay" controls="controls">
              <source src="file。ogg" />
              <source src="file。mp3" />
              <a href="file。mp3">Download this file.</a>
              </audio>
              Mozilla和WebKit的还没有完全相处,当涉及到音频格式, Firefox会希望看到一个.ogg文件,而WebKit的浏览器支持.mp3扩展。这意味着,至少在现在,你应该创建两个版本的音频。
              当Safari加载页面时,它不会承认.ogg格式,会跳过它并移动到的MP3版本,因此。请注意IE,每往常一样,不支持这些格式,Opera 10和以及以下版本只能使用.wav文件。


              IP属地:广东8楼2014-04-04 11:13
              回复
                九、Video支持
                与<audio>元素很类似,在新的浏览器中也存在Video!事实上,就在最近,YouTube宣告了新的HTML5视频嵌入,当然,是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器,它留给了浏览器来决定。虽然Safari和Internet Explorer9可以预期支持H.264格式的视频(其中Flash播放器可以播放),Firefox和Opera是坚持开源Theora 和Vorbis格式。因此,当显示HTML5的视频,您必须提供这两种格式。
                <video controls preload>
                <source src="cohagenPhoneCall.。ogv" type="video/ogg; codecs='vorbis, theora'" />
                <source src="cohagenPhoneCall。mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
                <p> Your browser is old. <a href="cohagenPhoneCall。mp4">Download this video instead.</a> </p>
                </video>


                IP属地:广东9楼2014-04-04 11:14
                回复
                  2025-06-06 13:23:46
                  广告
                  十、mark元素(Mark Element )
                  试想<mark>元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如,我在一些博客上搜索“北川景子”,我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。
                  <h3> 搜索结果 </h3>
                  <p> 我很喜欢《零秒出手》里面那个拉小提琴的女孩,原来她叫做 <mark>北川景子</mark>。 </p>


                  IP属地:广东10楼2014-04-04 11:14
                  回复
                    十一、data属性(The Data Attribute)
                    以前,我们可能会这样:
                    <h1 id=someId customAttribute=value> 小样,胆儿挺肥的呢 </h1>
                    校验器会小题大做!但是现在,只要我们以”data”为前缀定义我们的自定义属性,盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上,可能为了JavaScript之用,那么,本属性将大有帮助啊。
                    <div id="myDiv" data-custom-attr="My Value"> 大家好</div>


                    IP属地:广东11楼2014-04-04 11:16
                    回复