第二章列表，表格与媒体元素

HTML列表、表格与媒体元素详解

最新推荐文章于 2025-11-25 09:46:19 发布

原创最新推荐文章于 2025-11-25 09:46:19 发布 · 763 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#媒体

第二章列表表格媒体元素

文章目录

第二章列表表格媒体元素

1.列表

列表的分类

无序列表

有序列表

定义列表

//无序列表
<ul>
      <li>范冰冰演藏族女孩</li>
      <li>撞死两个人后自拍</li>
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>
 </ul>
//ul 声明无序列表  li 声明列表项

//有序列表
<ol>
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>
ol 声明有序列表 li 声明列表项

//定义列表
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>
dl 声明定义列表 dt 生命列表项 dd  定义列表内容

在这里插入图片描述

2.表格

<table>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>
//table 表格标签  tr 行标签 td 单元格标签

1.表格的跨列

<table>
  <tr>
    <td colspan="n">单元格内容</td>
  </tr>
  <tr>
    <td>单元格内容</td>
     ……
  </tr>
   ......
</table>
//colspan 所跨的列数

2.表格的跨行

<table >
  <tr>
    <td rowspan="n">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
//rowspan 所跨的行数

3.表格的跨行和跨列

<tr>
        <td colspan="3">学生成绩</td>
</tr>
<tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
</tr>
//rowspan 跨行 colspan 跨列

3.媒体元素

1.视频元素 video

<video src="视频路径"  controls></video>
//src 指定要播放的视频文件的路径 controls 提供播放，暂停和音量的控件

主流浏览器支持的视频格式

在这里插入图片描述

自动播放属性

<video autoplay>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    你的浏览器不支持video元素
</video>
//autoplay 自动播放属性

2.音频元素

<audio src="音频路径" controls></audio >
//src 指定要播放的音频文件的路径 controls  提供播放暂停和音量的控件

主流浏览器支持的音频格式

在这里插入图片描述

4.页面结构分析

html5的结构元素

在这里插入图片描述

<header><h2>网页头部</h2> </header>
 <section><h2>网页主体部分</h2></section>
 <footer><h2>网页底部</h2></footer>
//效果如下

在这里插入图片描述

iframe 内联框架

<iframe src="path" name="mainFrame" ></iframe>
src 引用页面地址 name 框架标识名

可以设置src 的属性值为http://www.bdqn.cn, 在这个页面中也可以打开一个线上的网页

iframe属性实现页面间的相互跳转

<iframe name="mainFrame" src="subframe/the_second.html" />
//在被打开的框架上加name属性
<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>
//在超链接上设置target目标窗口为希望显示的框架窗口名