• HTML_列表、表格与媒体元素


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

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

    例题:

    <!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>
    <li>第四</li>
    <li>第五</li>
    <li>第六</li>
    </ol>
    <hr/>
    <h2>定义列表</h2>
    <dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dt>蔬菜</dt>
    <dd>白菜</dd>
    <dd>香菇</dd>
    </dl>
    </ul>
    <h2>列表</h2>
    <table border="2">
    <tr>
    <th colspan="2" >姓名</th>
    <th rowspan="2">性别</th>
    <th>年龄</th>
    </tr>
    <tr>
    <td>熊大</td>
    <td>雄性</td>
    <td>5岁</td>
    </tr>
    <tr>
    <td>熊二</td>
    <td>雄性</td>
    <td>4岁</td>
    </tr>
    <hr/>
    <h2>视频video元素</h2>
    <video controls="controls">
    <source src="../素材/video.webm"/>
    <source src="../素材/video.tmp"/>
    </video>
    <hr/>
    <h2>音频audio元素</h2>
    <audio controls autoplay>
    <source src="../素材/music.mp3"/>
    <source src="../素材/music.ogg"/>
    </audio>
    <h2>iframe内联框架</h2>
    <iframe name="Chop02" src="Chop02.html"width="200px"height="200px">
    <hr/>
    <a href="Chop02.html"target="ifrmae">第一个页面</a>
    <a href="Chop03.html"target="ifrmae">第二个页面</a>
    <a href="Chop04.html"target="ifrmae">第三个页面</a>
    <iframe name="ifrmae" width="200px"height="200px"></iframe>
    </table>
    </body>
    </html>

  • 相关阅读:
    20172327 2017-2018-2 《程序设计与数据结构》第十一周学习总结
    20172327 2017-2018-2 《程序设计与数据结构》实验3报告
    20172327 2017-2018-2 《程序设计与数据结构》第十周学习总结
    20172327 2017-2018-2 《程序设计与数据结构》第九周学习总结
    20172327 结对编程项目-四则运算 第二周 阶段总结
    20172327 2017-2018-2 《程序设计与数据结构》第八周学习总结
    20172327 结对编程项目-四则运算 第一周 阶段总结
    20172327 2017-2018-2 《程序设计与数据结构》实验2报告
    20172327 2017-2018-2 《程序设计与数据结构》第七周学习总结
    MySQL数据库(四)—— 记录相关操作之插入、更新、删除、查询(单表、多表)
  • 原文地址:https://www.cnblogs.com/tinghao/p/9856780.html
Copyright © 2020-2023  润新知