第二章笔记

                                                                                  表格 列表 媒体元素 

                                                                                           笔记    

   1:列表:

无序列表:

语法:

<ul>
           <li>女装/男装/内衣</li>
           <li>鞋靴/箱包/配件</li>
           <li>童装/玩具/孕产</li>
</ul>

 

特点:

    1>

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

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

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

 2:有序列表:

    语法:

   

 <ol>

     <li>李强</li>

     <li>李强1</li>

      <li>李强2</li>

</ol>

特征:

特征:

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

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

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

     3>定义列表:

语法:

<dl>
      <dt>标题一</dt>
      <dd>标题一的内容</dd>
      <dd>标题一的内容</dd>
      <dt>标题二</dt>
      <dd>标题二的内容</dd>
      <dd>标题二的内容</dd>
</dl>

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

    2>默认没有标记

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

                                                                  技巧注意事项

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

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

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

 

   3:表格的基本结构

        1>单元格

        2>行

        3>列

  表格的基本语法:

   <table>

      <tr>

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

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

.         ...

         </tr>.

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

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

         .....

          </tr> 

    </table>

 4:  表格的跨行和跨行

  (1)表格的跨行:

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

语法:

   <table >

     <tr>

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

     </tr>

   </table>

 

   (2):表格的跨列:

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

 语法:

 <table >

     <tr>

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

     </tr>

   </table>

 

                                                  经验

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

 5:媒体元素:

   1>video元素的基本语法:

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

代码举例:

复制代码

<baby>

<video controls>

<source src ="video/video.webm"/>

<source src ="video/video.mp4"/>

你的浏览器不支持video标签

</video>

</boby>

复制代码

   2>音频元素

   语法:

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

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

代码举例:

<body>

<audio controls>

<source src ="mucic/music.mp3"/>

<source src ="mucic/music.ogg"/>

</audio>

</baby>

 

6:HTML5结构元素:

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

     footer:表及脚部区域的内容

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

    article:独立的文章内容

    aside:相关内容或应用

    nav:导航类辅助内容

                                总结

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

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

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

         (!):src(链接地址)

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

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

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

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

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

原文地址:https://www.cnblogs.com/3020815dzq/p/7443553.html