第十一周第二天笔记之html5知识

1 html5标签

• header 头部；
• footer 尾部；
• nav 导航菜单栏；
• aside 侧边栏；
• section 页面分块
• hgroup 标题组合
• article 文章
• dialog 对话，配合dt,dd
• figure 放置媒体资源
  • figureCaption 媒体标题
  • audio 音频
  • video 视频
  • 注意：通过src加载进来的音频和视频无法播放，通过autoplay属性来自动播放，如果想控制，则设置controls
  • source 放置音频视频地址，兼容性

• 验证代码：

   
   
   
       
       
   
   
   
  页面顶部/头部
   
  导航菜单栏
   
  
       
  侧边栏
       
  
           
  主标题
           
  副标题
       
       
  
           
  文章标题
           
  文章主题内容
       
   
   
  
       
  
           
  对话标题
           
  对话内容
       
   
   
  
       
  
           媒体标题
           
           
       
   
   
  尾部
   
   
  

• 链接资料
  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对象的方法；
• 代码：

   
   
   
       
       
       
   
   
   
  
       
  
           
  音符1
           
  音符2
           
  音符3
           
  音符4
           
  音符5
           
  音符6
           
  音符7
           
  音符8
       
   
   
  
       
  
           
           
           
           
           
           
           
           
       
   
   
   
   
   
  

3 原生JS版音乐播放器实例

• 代码：

   
   
   
       
       
       
   
   
   
  
       
  
           
  音符1
  
           
  音符2
  
           
  音符3
  
           
  音符4
  
           
  音符5
  
           
  音符6
  
           
  音符7
  
           
  音符8