(一)将一段文字拖拽带某个div中去
分析:
浏览器默认不许拖拽
数据拖拽后怎么体现出啦
解决过程:
1、文字不许拖拽
draggable="true"----让元素可以拖拽
2、文字内容怎么发送出去
οndragstart=" drag(event)"
函数中
function drag(e){
e.dataTransfer.setData("Text", e.target.id) /*页面上必须设置id*/
}
3、另一边接收获取文字
οndrοp="drop(event)"
函数中
function drop(e){
var data = e.dataTransfer.getData('Text');
/*内存中存在的东西,它以id的形式存在在内存中*/
e.target.appendChild(document.getElementById(data));
/*因为浏览器不许拖拽,所以设置事件阻止默认行为*/
e.preventDefault();
}
4、最后设置事件阻止默认行为
οndragοver="allowDrop(event)"
函数中
function allowDrop(e){
e.preventDefault();
}
(二)视频播放的处理:
controls-----控制器
autoplay-----自动播放
loop---------循环播放
(1)简单的视屏播放:
标准版:
<video controls=“controls/true”autoplay="autoplay" loop="loop">
<source src="XXX" type="vide/mp4">
你的浏览器不支持视屏播放,请下载最新的浏览器
</video>
自定义播放btn版:
<video loop="loop">
<source src=" XXX" type="vide/mp4">
你的浏览器不支持视屏播放,请下载最新的浏览器
</video>
<button οnclick="fun(event);">播放</button>
function fun(e){
var video = docment.getElementByTagName("video")[0]
video,play();
}
(三)音频播放的处理
非循环播放:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
支持多种类型
循环播放:
<audio controls="controls" loop="loop">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
----------------------------------------------------------------------------------------------------
简单的html5
1、XHTML严格模式,有开始也有结尾,严格区分大小写
2、htm与html一样的,只是有的老式的网页不能识别4位的后缀,所以删除l
3、html5新特性
(1)、语义特性(Class:Semantic)
(2)、本地存储
(3)、网页多媒体特性(Class:MULTIMEDIA)
4、head与header的区别
head用于定义html的属性,写的代码不能在页面上显示出来
header用于替代div,写的东西可以在网页中显示出来
5、<footer></footer>脚部分,就是代替了<div id="footer"></div>
6、<section>定义文档中的章节、页眉、页脚或文档中的其他部分
<section>
<h3></h3>
<p></p>
<section>
-----------------------------也相当于<div id=""></div>,就算删除<section>也不会影响
7、<hgroup>当<h>标签有很多时,用此标签包裹在一起
8、<nav>导航还是相当于div
<nav>
<ul>
<li></li>
</ul>
</nav>
11、图文并茂
<figure>
<figcaption>文字</figcaption>
<figcaption><img src=" "></figcaption>
</figure>
----------------------------图片在文字上方,文字在图片左边边线下面对齐
与
<dl><dd><dt>相比:
图片在上方,文字在下方,但文字在图片左边边线的左边对齐
15、-----------------------------------------------------------------------------进度条
<meter value="3" min="0" max="10"></meter>
<progress max = "10" min = "0" value = "4"/>
16、<time>标签
<p>我们每天早上<time>9:00</time>上班</p>
《搜索引擎在抓时就知道9:00代表时间》
17、<menu>菜单
18、<datalist>标签
<input id="myCar" list="cars">
<datalist id="cars">
<option value="W3C">
分析:
浏览器默认不许拖拽
数据拖拽后怎么体现出啦
解决过程:
1、文字不许拖拽
draggable="true"----让元素可以拖拽
2、文字内容怎么发送出去
οndragstart=" drag(event)"
函数中
function drag(e){
e.dataTransfer.setData("Text", e.target.id) /*页面上必须设置id*/
}
3、另一边接收获取文字
οndrοp="drop(event)"
函数中
function drop(e){
var data = e.dataTransfer.getData('Text');
/*内存中存在的东西,它以id的形式存在在内存中*/
e.target.appendChild(document.getElementById(data));
/*因为浏览器不许拖拽,所以设置事件阻止默认行为*/
e.preventDefault();
}
4、最后设置事件阻止默认行为
οndragοver="allowDrop(event)"
函数中
function allowDrop(e){
e.preventDefault();
}
(二)视频播放的处理:
controls-----控制器
autoplay-----自动播放
loop---------循环播放
(1)简单的视屏播放:
标准版:
<video controls=“controls/true”autoplay="autoplay" loop="loop">
<source src="XXX" type="vide/mp4">
你的浏览器不支持视屏播放,请下载最新的浏览器
</video>
自定义播放btn版:
<video loop="loop">
<source src=" XXX" type="vide/mp4">
你的浏览器不支持视屏播放,请下载最新的浏览器
</video>
<button οnclick="fun(event);">播放</button>
function fun(e){
var video = docment.getElementByTagName("video")[0]
video,play();
}
(三)音频播放的处理
非循环播放:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
支持多种类型
循环播放:
<audio controls="controls" loop="loop">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
----------------------------------------------------------------------------------------------------
简单的html5
1、XHTML严格模式,有开始也有结尾,严格区分大小写
2、htm与html一样的,只是有的老式的网页不能识别4位的后缀,所以删除l
3、html5新特性
(1)、语义特性(Class:Semantic)
(2)、本地存储
(3)、网页多媒体特性(Class:MULTIMEDIA)
4、head与header的区别
head用于定义html的属性,写的代码不能在页面上显示出来
header用于替代div,写的东西可以在网页中显示出来
5、<footer></footer>脚部分,就是代替了<div id="footer"></div>
6、<section>定义文档中的章节、页眉、页脚或文档中的其他部分
<section>
<h3></h3>
<p></p>
<section>
-----------------------------也相当于<div id=""></div>,就算删除<section>也不会影响
7、<hgroup>当<h>标签有很多时,用此标签包裹在一起
8、<nav>导航还是相当于div
<nav>
<ul>
<li></li>
</ul>
</nav>
9、artical标签,表示独立的一块(与当前网页是独立的东西),不会对其他东西造成影响,在标签里面有自己的头部分<header>等
10、aside标签,表示旁边(也是独立的一块),一般用广告、侧边等11、图文并茂
<figure>
<figcaption>文字</figcaption>
<figcaption><img src=" "></figcaption>
</figure>
----------------------------图片在文字上方,文字在图片左边边线下面对齐
与
<dl><dd><dt>相比:
图片在上方,文字在下方,但文字在图片左边边线的左边对齐
15、-----------------------------------------------------------------------------进度条
<meter value="3" min="0" max="10"></meter>
<progress max = "10" min = "0" value = "4"/>
16、<time>标签
<p>我们每天早上<time>9:00</time>上班</p>
《搜索引擎在抓时就知道9:00代表时间》
17、<menu>菜单
18、<datalist>标签
<input id="myCar" list="cars">
<datalist id="cars">
<option value="W3C">