HTML-列表、表格和媒体元素（详）

谁借莪１个温暖的怀抱￠ 2022-05-15 01:08 212阅读 0赞

## **什么是列表？** ##

**      ****列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息**

## 列表的分类 ##

无序列表的特性<ul>  
              ·没有顺序，每个<li>标签独占一行（块元素）  
              ·默认<li>标签项前面有个实心小圆点。  
              ·一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。                           
    有序列表的特性<ol>  
             ·有顺序，每个<li>标签独占一行（块元素）。  
             ·默认<li>标签项前面有顺序标记。  
             ·一般用于排序类型的列表，如试卷、问卷选项等。  
    定义列表的特性<dl>  
             ·没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）。  
             ·默认没有标记。  
             ·一般用于一个标题下有一个或多个列表项的情况。

列表对比

![70][]

列表样式  
  1.list-style-type  
                  none(无标记符号)------------------示例：list-style-type:none;  
                  disc(实心圆，默认类型)-------------示例：list-style-type:disc;  
                  circle(空心圆)-----------------------示例：list-style-type:circle;  
                  square(实心正方形)-----------------示例：list-style-type:square;  
                  decimal(数字)-----------------------示例：list-style-type:decimal;  
  2.list-style-image  
  3.list-style-position  
  4.list-style

## 表格 ##

为什么使用表格

1.简单通用       2.结构稳定

基本结构

1.单元格   2.行    3列

表格的基本语法

<table>（表格标签）
        <tr>（行标签）
           <td>第1个单元格内容</td>（单元格标签）
           <td>第2个单元格内容</td>
         ...
        </tr>
        <tr>
            <td>第1个单元格内容</td>
            <td>第2个单元格内容</td>
          ...
         </tr>
        </table>

表格的跨列

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

表格的跨行

## HTML5媒体元素 ##

视频元素（video）

音频元素（audio）

controls(提供播放、暂停和音量的控件)

自动播放属性（autoplay）

HTML5的结构元素

![70 1][]

语法

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

**·<****iframe****>****属性****（实现****页面间的相互跳转）**

·**在被打开的框架上加****name****属性**