zoukankan      html  css  js  c++  java
  • 第二章笔记

                                                                                      表格 列表 媒体元素 

                                                                                               笔记    

       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>标签的属性,可以实现窗口间的关联

  • 相关阅读:
    Python 之 Django框架( Cookie和Session、Django中间件、AJAX、Django序列化)
    SAP 公司间开票 报错 :0080264464 000000 销售机构 未定义
    C++虚函数、纯虚函数,继承及多态、友元
    postgre 用户权限管理
    mysql 主从搭建
    vue 配置开发线上环境
    基于Ant Design UI框架的React项目
    postgresql数据库报“connections on Unix domain socket "/tmp/.s.PGSQL.5432"?”
    postgres 连接数查看与设置
    修改postgresql密码
  • 原文地址:https://www.cnblogs.com/3020815dzq/p/7443553.html
Copyright © 2011-2022 走看看