HTML5技术

Write Less, Do More(4)

字号+ 作者:H5之家 来源:H5之家 2015-09-13 16:00 我要评论( )

等标签,不过我们可以用一小段JS代码来修正它,用document.createElement(tagName) 来创建未知的元素IE的解析器会识别出这些元素 script type=text/javascriptdocument.createElement(section);document.createElem

等标签,不过我们可以用一小段JS代码来修正它,用document.createElement(tagName) 来创建未知的元素IE的解析器会识别出这些元素

<script type="text/javascript"> document.createElement("section"); document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu"); </script>

  • HTML5学习教程五 HTML5拖放

    HTML5学习教程五 HTML5拖放

    HTML5学习教程五 HTML5拖放
    刚升级了wordpress看看 好使不?

    1


    HTML5 拖放(Drag 和 drop)是 标准的组成部分。

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
    浏览器支持
    Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

    注释:在 Safari 5.1.2 中不支持拖放。

    下面的例子是一个简单的拖放实例:

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> </html>

    它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。
    设置元素为可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

    拖动什么 - ondragstart 和 setData()

    然后,规定当元素被拖动时,会发生什么。

    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

    dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()

    进行放置 - ondrop

    当放置被拖数据时,会发生 drop 事件。

    在上面的例子中,ondrop 属性调用了一个函数,drop(event):

    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }

    代码解释:

    调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
    通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    被拖数据是被拖元素的 id ("drag1")
    把被拖元素追加到放置元素(目标元素)中

  • HTML5学习教程四 HTML5音频

    HTML5学习教程四 HTML5音频

    HTML5学习教程四 HTML5音频
    HTML5 提供了播放音频的标准。
    Web 上的音频

    直到现在,仍然不存在一项旨在网页上播放音频的标准。

    今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

    HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

    audio 元素能够播放声音文件或者音频流。
    音频格式

    当前,audio 元素支持三种音频格式:
    IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
    Ogg Vorbis √ √ √
    MP3 √ √ √
    Wav √ √ √
    如何工作

    如需在 HTML5 中播放音频,您所有需要的是:

    <audio src="song.ogg" controls="controls"> </audio>

    control 属性供添加播放、暂停和音量控件。

    audio 之间插入的内容是供不支持 audio 元素的浏览器显示的:
    实例

    <audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>

    上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

    要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 新鲜出炉的less与sass较量 - 海*星

      新鲜出炉的less与sass较量 - 海*星

      2017-04-29 09:03

    • H5天气查询demo(二) - natureless

      H5天气查询demo(二) - natureless

      2016-05-03 14:00

    • [小北De编程手记] : Lesson 03 玩转 xUnit.Net 之 Fixture(上) - 小北@Alan

      [小北De编程手记] : Lesson 03 玩转 xUnit.Net 之 Fixture(上) -

      2016-02-21 14:00

    • ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once

      ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完

      2016-01-14 13:08

    网友点评
    e