列表.表格与媒体元素

Posted 2020-10-04 秋风伊人

                                                                                                        第二章

                                                                                        列表.表格与媒体元素预习笔记

    单词:

        table:桌子,表格.目录

       video:磁带录像.录像

       audio:听觉的,声音的

       section:部分,部门,件

       article:物品,文章 论文

       aside:旁边

 一:

  1: 什么是列表:就是信息资源的一种展示形式,它可以是信息结构化和条理化;并以列表的形式显示出来;以便浏览者更快捷的获取相应的信息;

注意:从图中可以发现都是用列表来显示的信息.有的列表前有序号,有的就没有.

   2:html5中列表分为三类:

     1>无序列表:

定义:

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

语法: 

     <ul>

        <li>第一项</li>

        <li>第二项</li>

         <li>第三项</li>

      </ul>

****1>遵循W3C标准,<ul>标签的里面只能嵌套<li>标签,不能嵌套其他标签.

      2><li>标签里可以嵌套任何标签.

特征:

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

     2>默认<>标签前面有个实心的小圆点;

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

     2>有序列表

定义:

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

语法:

   <ol>

       <li>第一项</li>

        <li>第二项</li>

         <li>第三项</li>

   </ol>

特征:

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

     2>默认<>标签项的前面有顺序标记

     3>一般用于排序类型的列表,如试卷,问卷选项

     3>定义列表

定义:

     是一种特殊的列表形式,它是标题及列表的结合.语法相对与无序和有序列表不太一样,它使用<dl>标签作为列表的开始,使用<dt>标签作为每个列表项的起始,而对于每个列表项的起始.而对于每个列表项的定义则使用<dd>标签来完成.

语法:

   <dl>

         <dl>标题一</dt>

        <dd>第一项</dd>

        <dd>第二项</dd>

        <dt>标题二</dt>

        <dd>第一项</dd>

    </dl>

特征:

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

    2>默认没有标记

    3>一般用于(一个标题下有一个或者多个列表项)*n的情况下;

                                                                  技巧注意事项

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

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

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

 

二 :表格:

    1:表格是块状元素;发明该标签的初衷是显示表格数据,

    2:为什么使用表格

       1>简单通用

       2>结构稳定

      3:表格的基本结构

        1>单元格

        2>行

        3>列

  表格的基本语法:

   <table>

      <tr>

          <th>第一个单元格的内容</th>

         <th>第二个单元格的内容</th>

.         ...

         </tr>.

         <td>第一个单元格的内容</td>

         <td>第二个单元格的内容</td>

         .....

          </tr> 

    </table>

    创建表格的步骤:

   1>创建表格标签<table>....</table>

   2>在表格标签<table>....</table> 李闯建行标签<tr>....</tr> ,可以有多行,

   3>在第一行标签里<tr>...</tr>里创建单元格标签<th>....</th>.用于创建表格标题

   4>在行标签内<tr>.....</tr>里创建单元格标签<td>....</td>,可以 有多个单元格

  为了显示表格,一般还需要设置<table>标签的border边框属性,指定边框的宽度

三 :

   表格的跨行和跨行

  (1)表格的跨行:

定义:指单元格在垂直方向上的合并;

语法:

   <table >

     <tr>

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

     </tr>

   </table>

   (2):表格的跨列:

定义:单元格的横向合并;

 语法:

 <table >

     <tr>

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

     </tr>

   </table>

                                                  经验

     跨行和跨列以后,并不改变表格的特点;同行的总高度一致,同列的总宽度一致,因此,表格中的各单元的宽度或者高度互相影响,结构相对稳定,但缺点是不能灵活地进行布局控制;

 四:媒体元素:

   1>video元素的基本语法:

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

   2>音频元素

   语法:

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

   <audio src ="音频路径"controls ="controls">你的浏览器不支持audio标签</video>

五 :HTML5结构元素:

     header:标题头部的区域的内容

     footer:表及脚部区域的内容

    section:Web页面中的一块独立区域

    article:独立的文章内容

    aside:相关内容或应用

    nav:导航类辅助内容

 

 六:<iframe>框架

    语法:

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

     属性的使用:

     属性包括:name  width  height

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

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

                                                                                                                              总结

     1>掌握表格的基本使用方法:

         (1)<table> <tr> <td>创建表格

      2>媒体元素共有的属性:

         (!):src(链接地址)

         (2):controls(控制播放控件)

       3>可以让媒体元素在不同的浏览器下都支持播放的元素(source)

       4>语义化结构元素:header  section  article  nav aside footer 

       5>常用的框架技术<iframe>内敛框架

       6>配合使用<a>标签的target属性及<iframe>标签的属性,可以实现窗口间的关联