zoukankan      html  css  js  c++  java
  • 列表,表格与传媒元素

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

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

  • 相关阅读:
    小技巧:Sidebar上的Recent Posts如何排除某类别下的文章
    64位windows下,C# 访问 Lotus Domino Objects 时访问Com注册类失败原因
    ODP.net 及System.Data.OracleClient使用二三事
    收发超长短信的资料汇编
    python 3 中建立可迭代对象(making object iterable)
    悲催的PHP新型字符串
    wp下如何禁止分类列表列出某个分类
    人生的12句Comperehend领悟-感悟颇深
    RegexBuddyV3.03正则表达式工具下载
    《越狱》里玫瑰花的制作方法(超详细)
  • 原文地址:https://www.cnblogs.com/wnwn/p/9856363.html
Copyright © 2011-2022 走看看