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.定义列表
            <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>
  • 相关阅读:
    android Logger 一二三
    深挖android low memory killer
    ios CoreBluetooth 警告 is being dealloc'ed while pending connection
    iOS 国际化多语言设置 xcode7
    iOS 控制单个控制器旋转
    ios 开发 收起键盘的小技巧
    xcode ___gxx_personality_v0" 编译错误
    xcode6 AsynchronousTesting 异步任务测试
    xcode6 framework missing submodule xxx 警告
    iOS AVCaptureVideoDataOutputSampleBufferDelegate 录制视频
  • 原文地址:https://www.cnblogs.com/liuying23/p/9856098.html
Copyright © 2011-2022 走看看