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

什么是列表？

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

列表的分类

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

列表对比

列表样式
  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>

      表格的跨行

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

HTML5媒体元素

视频元素（video）

音频元素（audio）

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

<video controls>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
</video>

自动播放属性（autoplay）

<video autoplay>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    
</video>

HTML5的结构元素

<iframe>内联框架

语法

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

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

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

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

<iframe name="mainFrame" src="subframe/the_second.html" />

              在超链接上设置target目标窗口属性为希望显示的框架窗口名

 

<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>