1. 程式人生 > >列表表格以及媒體元素

列表表格以及媒體元素

一、列表

  資訊資源的一種展現形式

二、列表的分類

  1.有序列表

    <ol>

      <li/>內容1</li>

      <li>內容2</li>

    </ol>

  預設每一個li前有順序標識

  2.無序列表

    <ul>

      <li>內容1</li>

      <li>內容2</li>

    </ul>

  預設每一個li前有一個實心小圓點

  3.定義列表  

    <!--dh標籤同樣代表 列表項的開始類似於dt標籤-->

    <dl>

      <dt>列表項1</dt>

      <dd>列表項1值1</dd>

      <dd>列表項1值2</dd>

    </dl>

  沒有順序,每一個dt和dd標籤獨佔一行

  預設沒有標記

三.表格

  <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>