zoukankan      html  css  js  c++  java
  • 列表、表格与媒体元素

    2.1.1  列表简介

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

    2.1.2   列表及其应用

         1.无序列表及其应用

           无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始。

             语法:              

    <ul>
       <li>第一项</li>
       <li>第二项</li>
       <li>第三项</li>
    </ul>
    (遵循W3C标准,<ul>标签里面只能嵌套<li>标签,不能嵌套其他标签)
    (<li>标签里面可以嵌套任意标签)

           无序列表的特征如下。

           (1)没有顺序,每个<li>标签独占一行(块标签)。

           (2)默认<li>标签项前面有个实心小圆点。

           (3)一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等。

         2.有序列表及其应用

           有序列表由<ol>标签和<li>标签组成,使用<ol>标签作为有序列表的声明,使用<li>标签作为每个列表项的起始,有序列表嵌套同无序列表一样,

      只能<ol>标签里嵌套<li>标签

           语法:

    <ol>
       <li>第一项</li>
       <li>第二项</li>
       <li>第三项</li>
    </ol>

             有序列表的特性如下。

             (1)有顺序,每个<li>标签独占一行(块元素)。

             (2)默认<li>标签项前面有顺序标记。

             (3)一般用于排序类型的列表,如试卷、问卷选项等。

         3.定义列表及其应用

             定义列表是一种很特殊的列表形式,它是标题及列表项的结合。定义列表的语气相对无序和有序列表不太一样,它使用<dl>标签作为列表的开始,

         使用<dt>标签作为每个列表项的起始,而对于每个列表的定义则使用<dd>标签来完成。

             语法:

    <dl>
       <dt>标题一</dt>
       <dd>第一项</dd>
       <dd>第二项</dd>
        <dt>标题二</dt>
        <dd>第一项</dd>
        <dd>第二项</dd>
    </dl>

           定义列表的特征如下。

           (1)没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)。

           (2)默认没有标记。

           (3)一般用于(一个标题下有一个或多个列表项)*n的清况。

    HTML5中三种列表的注意事项。

                (1)无序列表中的每项都是平级,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容,有序列表会依据列表项的顺序进行显示。

                (2)在实际的网页的应用中,无序列表比有序列表应用更加广泛,有序列表ol-li一般用于显示带有顺序编号的特定场合。

                (3)定义列表一般适用于带有标题和标题解释性内容的场合。

      2.2.1   为什么使用表格

                  1.简单通用。

                  2.结构稳定。

    2.2.2   表格的基本结构

             表格是有指定数目的行和列组成。

          1.单元格

             单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格

         2.行

          一个或多个单元横向堆叠形成了行。

         3.列

           由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列。

    2.2.3   表格的基本语法

          创建表格的基本语法。

          语法:

                 

    <table>
          <tr>
             <th>第一个表格的内容</th>
             <th>第二个表格的内容</th>
             <th>第三个表格的内容</th>
                    ......
          </tr>
          <tr>
             <td>第一个表格的内容</td>
             <td>第二个表格的内容</td>
    <td>第三个表格的内容</td>
    ......
    </tr>
    </table>

    2.2.4   表格的跨列和跨行

         1.表格的跨列

          跨列是指单元格的横向合并

        语法:

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

         col为column(列)的缩写,span为跨度,所以colspan的意思为跨列。

    2.    表格的跨行

             跨行是指单元格在垂直方向上合并的。

             语法:

     <table>
              <tr>
                 <td  rowspan=“所跨的行数">单元格内容</td>
              </tr>
    </table>

    row为行的意思,rowspan即跨行。

          一般而言,跨行或跨列操作时,需要以下两个步骤。

           (1)在需合并的第一个单元格,设置跨列或跨行属性,如colspan="3".

             (2)   删除被合并的其他单元格,即把某个单元格看成多个单元格合并后的单元格

    3.   表格的跨列与跨行的综合应用

           有时表格中的既有跨行又有跨列的情况,从而形成了相对复杂的表格显示。

        跨行和跨列以后,并不改变表格的特点,同行的总高度一致,同列的总宽度一致。因此表格中各单元格的宽度和高度互相影响,

      结构相对稳定,但缺点是不能灵活地进行布局控制。

     2.3.1  媒体元素概述

          2.3.2  视频元素

                   1.video元素的基本语法

                     HTML5中的video元素是用来播放视频文件的,支持Ogg(Ogg  Vordis的简写)、MPEG4、WebM等视频格式。

                     语法:

                               <video  src="视频路径"  controls=”controls“></video>

                    其中src属性用于指定要播放的视频文件的路径,controls属性用于提供播放、暂停和音量控件,此外还可以width和heigth设置视频的宽度和高度。

               2.video元素的应用

    <body>
     <video  controls>
            <soure  src="video/video.webm"/>
             <soure  src="video/video.mp4"/>
              您的浏览器不支持video标签
    </video>
    </body>

    2.3.3   音频元素

        1.audio元素的基本语法

                HTML5中的audio元素是用来播放音频文件的,支持Ogg、MP3、WAV等音频模式。

               语法:

                        <audio  src="音频路径"  controls=”sontrils“></audio>

        2.audio元素的应用

    <body>
    <audio controls>
           <source  src="music/music.mp3"/>
            <source  src="music/music.ogg"/>
    </audio>
    </body>

    2.4.2  HTML5的结构元素

    元素名         描述
    header 标记头部区域(用于页面或页面中的一块区域)
    footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
    article Web页面中的一块独立区域
    section 独立的文章内容
    aside 相关内容或应用(常用于侧边栏)
    nev 导航类辅助内容

     2.5  <iframe>框架

          <iframe>框架的主要作用是使页面中的部分内容用框架实现,一般应用于页面中引用站外的页面内容,使用比较方便、灵活。

    2.5.1  <iframe>的语法 

                 语法:

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

    2.5.2  <iframe>属性的使用

             <iframe>内联框架的常用属性包括name、width、heigth。其中name属性可以和前面学过的锚链接结合起来实现页面间的相互转换。

              (1)在被打开的框架上加name属性,关键代码如下。

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

               (2)  在超链接上设置target窗口属性为希望显示的框架窗口名,关键代码如下。

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

    谢谢观看!!!

  • 相关阅读:
    hive与hbase整合
    待重写
    hive DML
    【知识强化】第六章 总线 6.1 总线概述
    【知识强化】第五章 中央处理器 5.1 CPU的功能和基本结构
    【知识强化】第四章 指令系统 4.3 CISC和RISC的基本概念
    【知识强化】第四章 指令系统 4.2 指令寻址方式
    【知识强化】第四章 指令系统 4.1 指令格式
    【知识强化】第三章 存储系统 3.6 高速缓冲存储器
    【知识强化】第三章 存储系统 3.5 双口RAM和多模块存储器
  • 原文地址:https://www.cnblogs.com/javahenku/p/7441920.html
Copyright © 2011-2022 走看看