列表表格及媒体元素

Posted 2021-01-15 12aa

一.列表
 信息资源的一种展示形式
 
二.列表的分类
 1.有序列表
  <ol>
   <li>列表项1</li>
   <li>列表项2</li>
  </ol>
  
  特性：
   1.有顺序，每一个li独占一行
            2.默认每一个li前有顺序标识
 
 2.无序列表
  <ul>
   <li>列表项1</li>
   <li>列表项2</li>
  <ul>
  
  特性：
   1.没有顺序，每一个li独占一行（块元素）
            2.默认每一个li前有一个实心小圆点
 
 3.定义列表
  <!--dh标签同样代表 列表项的开始类似于dt标签-->
  <dl>
   <dt>列表项1</dt>
   <dd>列表项1值1</dd>
   <dd>列表项1值2</dd>
   
   <dt>列表项2</dt>
   <dd>列表项2值1</dd>
   <dd>列表项2值2</dd>
  </dl>
  
  特性：
   1.没有顺序，每一个dt和dd标签独占一行
   2.默认没有标记
三.表格
 <table>
  <tr>
   <th>第一行第一个单元格</th>
   <th>第一行第二个单元格</th>
   
  </tr>
  <tr>
   <td>第二行第一个单元格</td>
   <td>第二行第二个单元格</td>
  </tr>
 </table>
 跨行（rowspan）和跨列（colspan）：横向跨列，纵向跨行
 
四.音频和视频元素
 ※使用时注意浏览器兼容问题
 
    <video controls="controls">

        <source src="../video/video.webm"/>
        <source src="../video/video.mp4"/>

    </video>

   
    <audio controls autoplay>
        <source src="../music/music.mp3"/>
        <source src="../music/music.ogg"/>
    </audio>
 
 controls:播放插件 autoplay:自动播放
 
五.iframe内联框架
 <iframe src="嵌套的页面地址" name="内联框架名称" width="200px" height="200px"></iframe>
   
   
 点击链接跳转到指定地址:
 <a href="fristhtml.html" target="ifrmae">内联框架第一个页面</a>
    <a href="secondHtml.html" target="ifrmae">内联框架第二个页面</a>
    <a href="thridHtml.html" target="ifrmae">内联框架第三个页面</a>
    <iframe src="fristHtml.html" name="ifrmae" width="200px" height="200px"></iframe>