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

目录

1.列表

2.表格

3.媒体元素

4.结构元素

---

1.列表

信息资源的一种展现形式。是信息结构化和条理化，并以列表的样式显示出来。

列表的分类：

1. 无序列表

   没有顺序（导航、侧边栏新闻、有规律的图文组合模块等）

   <ul> <!--声明无序列表-->
       <li></li> <!--声明列表项(块元素、默认实心小圆点)-->
   </ul>

2. 有序列表

   有顺序（排序类型的列表：试卷、问卷选项等）

   <ol><!--声明有序列表-->
       <li></li>
   </ol>

3. 定义列表

   没有顺序（一个标题下有一个或多个列表项的情况）

   <dl><!--声明定义列表-->
       <dt></dt><!--声明列表项-->
       <dd></dd><!--定义列表项内容-->
   </dl>

2.表格

简单通用、结构稳定

<table><!--表格标签-->
    <tr><!--行标签-->
    <td></td><!--单元格标签-->
    </tr>
</table>

1. 表格的跨列(n:所跨的列数)

   <td colspan="n">单元格内容</td>

2. 表格的跨行(n:所跨的行数)

   <td rowspan="n"> </td>

3. 属性：

   border:边框 align:（left、center、right）水平居中 valign:（top、center、bottom）垂直居中
   
   <th> 表头 <caption> 表格头信息

3.媒体元素

• 视频元素：video(controls:提供播放、暂停和音量的控件)

  <video src="路径" controls> </video>
  
  <video controls ><!-- muted autoplay:自动播放   loop:循环     controls:控件-->
      <source src="视频路径"/>
  </video>

• 音频元素：audio

  <audio src="路径" controls></audio>
  
  <audio controls>
      <source src="音频路径">
  </audio>

4.结构元素

• 页面结构：整个页面、页面头部、页面主体、页面底部

• 元素：<header>头部</header>、 <section>主体</section>、<footer>底部</footer>、<article>独立文章内容</article>、<nav>导航类辅助内容</nav>、<aside> 侧边栏</aside>

• 内联框架：

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

  实现页面间相互跳转：被打开框架加name属性；超链接上设置target目标窗口属性为要打开的框架名（target属性值与iframe的name属性值一致）

  <a href="https://www.bdqn.cn/news/441-6.shtml" target="mainFrame">点击打开视频</a>
  <iframe name="mainFrame" width="600px" height="500px" frameborder="0" scrolling="no"></iframe>

  frameborder="0":边框线  scrolling="no"：滚动条