1 html5标签
- header 头部；
- footer 尾部；
- nav 导航菜单栏；
- aside 侧边栏；
- section 页面分块
- hgroup 标题组合
- article 文章
- dialog 对话，配合dt,dd
- figure 放置媒体资源
- figureCaption 媒体标题
- audio 音频
- video 视频
- 注意：通过src加载进来的音频和视频无法播放，通过autoplay属性来自动播放，如果想控制，则设置controls
- source 放置音频视频地址，兼容性
<audio autoplay controls> <source src="" type="audio/mp4"> </audio> - 验证代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5体验</title> </head> <body> <header>页面顶部/头部</header> <nav>导航菜单栏</nav> <section class="articleList"> <aside>侧边栏</aside> <hgroup> <h2>主标题</h2> <h4>副标题</h4> </hgroup> <article> <h6>文章标题</h6> <p>文章主题内容</p> </article> </section> <section class="dialog"> <dialog> <dt>对话标题</dt> <dd>对话内容</dd> </dialog> </section> <section class="mediaList"> <figure> <figureCaption>媒体标题</figureCaption> <audio src="media/01.mp3" autoplay="autoplay" controls>浏览器不支持该音频文件</audio> <video src="" autoplay="autoplay" controls>浏览器不支持该视频文件</video> </figure> </section> <footer>尾部</footer> </body> </html> - 链接资料
html5和css3学习大纲
html5基础知识1
2 音乐播放器实例
- 思路：
- 页面结构li浮动，新建ins定位在li中，用于运动；
- 通过each遍历li数组，然后再each中获取每个li元素，获取其索引值，再设置其背景色；
- 添加mouseenter和mouseleave事件，让ins元素移入li时，移动到顶部，移出li后，回到原来位置；
- 给document对象设置keydown事件，判断键盘码来控制设置不同索引值的li元素自动触发mouseenter事件；
- 利用定时器在间隔时间后，自动触发mouseleave事件，让其回到原来位置；
- 知识点：
- 页面结构中设置li元素属性box-sizing的属性值为border-box，则元素设置的总宽度则包含内padding和外边框；
- jQuery中事件
$("li").mouseenter(function(){})里面匿名函数中的this为触发的元素，默认传入一个事件对象实参； - jQuery中each方法
$("li").each(function(){})作用是遍历li数组，每次向匿名函数中传两个实参，index和item，索引值和元素本身，里面的this为元素本身； - jQuery中trigger方法
$(this).trigger("mouseover")作用是自动触发事件； - audio对象身上的方法load()和pla()方法，为原生JS对象的方法；
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音乐播放器实例</title> <style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 1120px; margin: 40px auto; border: 1px solid blue; } ul::after{ display: block; height: 0; content: ""; clear: both; } ul>li{ width: 140px; height: 60px; line-height: 60px; text-align: center; float: left; position: relative; } ul>li ins{ position: absolute; width: 140px; height: 60px; left: 0; top: 60px; } ul>li+li{ border-left: 1px dashed red; box-sizing: border-box; } </style> </head> <body> <section> <ul> <li>音符1</li> <li>音符2</li> <li>音符3</li> <li>音符4</li> <li>音符5</li> <li>音符6</li> <li>音符7</li> <li>音符8</li> </ul> </section> <section class="mediaList"> <figure> <audio src="audio/1.mp3"></audio> <audio src="audio/2.mp3"></audio> <audio src="audio/3.mp3"></audio> <audio src="audio/4.mp3"></audio> <audio src="audio/5.mp3"></audio> <audio src="audio/6.mp3"></audio> <audio src="audio/7.mp3"></audio> <audio src="audio/8.mp3"></audio> </figure> </section> <script src="JS/jquery.js"></script> <script> var ary=["red","yellow","blue","pink","orange","black","purple","green"]; $("li").each(function (index, item) { $(item).append("<ins>").find("ins").css("backgroundColor",ary[index]); }).mouseenter(function () { //此时的this为触发元素，并且传入一个事件对象实参 $("audio")[$(this).index()].load();//加载音频 $("audio")[$(this).index()].play();//播放音频 $(this).find("ins").stop().animate({top:0}); }).mouseleave(function () { $(this).find("ins").stop().animate({top:60}); }); $(document).keydown(function (e) { if(e.keyCode>=49 && e.keyCode<=56){ $("li").eq(e.keyCode%49).trigger("mouseenter"); setTimeout(function () { $("li").eq(e.keyCode%49).trigger("mouseleave") },400)//通过定时器让其运动回去； } }) </script> </body> </html>
3 原生JS版音乐播放器实例
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音符键盘实例复习</title> <style> *{ margin: 0; padding: 0; list-style: none; } .container{ width: 100%; } .container .wrap{ width: 1127px; height: 60px; margin: 40px auto; border: 1px solid blue; text-align: center; } .container .wrap li{ width: 140px; height: 60px; line-height: 60px; float: left; position: relative; } .container .wrap li+li{ border-left: 1px dashed red; } .container .wrap li ins{ width: 100%; height: 100%; position: absolute; left: 0; top: 60px; } </style> </head> <body> <div class="container"> <ul class="wrap"> <li><p>音符1</p><ins></ins></li> <li><p>音符2</p><ins></ins></li> <li><p>音符3</p><ins></ins></li> <li><p>音符4</p><ins></ins></li> <li><p>音符5</p><ins></ins></li> <li><p>音符6</p><ins></ins></li> <li><p>音符7</p><ins></ins></li> <li><p>音符8</p><ins></ins></li> </ul> <div class="mediaList"> <audio src="./audio/1.mp3"></audio> <audio src="./audio/2.mp3"></audio> <audio src="./audio/3.mp3"></audio> <audio src="./audio/4.mp3"></audio> <audio src="./audio/5.mp3"></audio> <audio src="./audio/6.mp3"></audio> <audio src="./audio/7.mp3"></audio> <audio src="./audio/8.mp3"></audio> </div> </div> <script src="../toolLibrary/myutils.js"></script> <script src="../toolLibrary/finallyAnimate.js"></script> <script src="../toolLibrary/myEvent.js"></script> <script> var oWrap=document.getElementsByTagName("ul")[0]; var aIns=oWrap.getElementsByTagName("ins"); var oMedia=utils.getByClass("mediaList")[0]; var aAudio=utils.getChildren(oMedia,"audio"); var ary=["red","yellow","blue","pink","orange","black","purple","green"]; add(); function add() { //给每个音符添加背景色 for(var i=0; i<aIns.length; i++){ aIns[i].index=i; on(aIns[i],"mouseenter",function () { //播放音乐 aAudio[this.index].load(); aAudio[this.index].play(); clearInterval(this.timer); toMove(this,0); }); on(aIns[i],"mouseleave",function () { clearInterval(this.timer); toMove(this,60); }); utils.setCss(aIns[i],"backgroundColor",ary[i]); } } //给document对象绑定keydown事件 on(document,"keydown",toKeydown); function toKeydown(e) { //1-8对应的键盘码为49-56 if(e.keyCode>=49 && e.keyCode<=56){ var m=e.keyCode%49; aAudio[m].load(); aAudio[m].play(); clearInterval(aIns[m].timer); toMove(aIns[m],0); clearTimeout(n); var n=setTimeout(function () { clearInterval(aIns[m].timer); toMove(aIns[m],60) },400) } } //运动 function toMove(ele,topval) { animate({ ele:ele, effect:0, target:{ top:topval }, duration: 300 }) } </script> </body> </html>
