列表、表格与媒体元素

一.列表
     信息资源的一种展示形式

二.列表的分类
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.定义列表
        <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>

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
</head>
<body>
   <h2>无序列表</h2>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
     <hr/>
   <h2>有序列表</h2>
         <ol>
             <li>第一项</li>
             <li>第二项</li>
             <li>第三项</li>
         </ol>
     <hr/>
   <h2>定义列表</h2>
   <dl>
       <dt>水果</dt>
       <dd>苹果</dd>
       <dd>橘子</dd>

       <dt>蔬菜</dt>
       <dd>土豆</dd>
       <dd>西红柿</dd>
   </dl>
    <hr/>

               <h2>表格·</h2>
          <table  border="5px">
                   <tr >
                      <td   rowspan="2">第一个单元格内容</td>
                      <td   colspan="2">第二个单元格内容</td>
                      <td>第三个单元格内容</td>
                   </tr>
              <tr>
                  <td>第一个单元格内容</td>
                  <td>第二个单元格内容</td>
                  <td>第三个单元格内容</td>
              </tr>
          </table>
   <hr/>
        <h2>视频</h2>
         <video autoplay="" controls="">
             <source src="video/video.webm"/>
             <source src="video/video.mp4">
         </video>
            <hr/>
            <h2>音频</h2>
         <audio autoplay="" controls="">
                 <source src="audio/music.ogg"/>
                 <source src="audio/music.mp3"/>
         </audio>
  <hr/>
       <h2>内联框架</h2>
     <a href="firsthtml.html" target="if">第一个页面</a>
     <a href="secondhtml.html" target="if">第二个页面</a>
     <a href="thirdhtml.html"  target="if">第三个页面</a>
       <iframe name="if"  width="200px" height="200px"></iframe>

</body>
</html>
原文地址:https://www.cnblogs.com/liuying23/p/9856098.html