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

    一.无序列表

          <ul>
               <li>无序列表</li>
               <li>有序列表</li>
               <li>自定义列表</li>
          </ul>

         特性:1.没有顺序,每个<li>标签独占一行(块级元素)
            2.默认每一个li标签前有一个实心小圆点
            3.主要用于无序类型信息的展示,如导航栏等


       二.有序列表

          <ol>
               <li>无序列表</li>
               <li>有序列表</li>
               <li>自定义列表</li>
          </ol>

         特性:1.有顺序,每个<li>标签独占一行(块级元素)
            2.默认每一个li标签前有顺序标识
            3.一般用于排序类型的列表,如试卷、问卷选项等

       三:定义列表

          <dl>
           <dt>列表项1</dt>
            <dd>列表项1内容1</dd>
            <dd>列表项1内容2</dd>
           <dt>列表项2</dt>
            <dd>列表项2内容1</dd>
            <dd>列表项2内容2</dd>
          </dl>

         特性:1.没有顺序,每一个dt和dd标签独占一行(块元素)
            2.默认没有标记
            3.一般用于一个标题下有一个或多个列表项的情况

       四.表格

         组成部分:行
            列
            单元格
         表格优点:结构稳定
             简单通用


         <table border="1" align="right">
             <tr>
                 <td rowspan="2">张三</td>

                 <td>语文</td>
                 <td>98</td>
                 <tr>
                     <td>数学</td>
                     <td>89</td>
                 </tr>
                 </tr>

             <tr>
                 <td rowspan="2">李四</td>

                 <td>语文</td>
                 <td>76</td>
                 <tr>
                     <td>数学</td>
                     <td>60</td>
                 </tr>
             </tr>

         </table>

         <!--border:边框粗细        align:位置    center:居中        colspan:跨列   rowspan:跨行-->
         <table border="1" align="center">
                 <tr>
                         <td colspan="2" align="center">分数</td>

                 </tr>
                 <tr>
                         <td>89</td>
                         <td>95</td>
                 </tr>

         </table>

       五.媒体元素
          video:视频
            <video controls autoplay>
             <source src="视频地址 " type="video/视频格式">
             <source src="视频地址 " type="video/视频格式">
            </video>
          audio:音频
            <audio controls autoplay>
             <source src="音频地址 " type="audio/音频格式">
             <source src="音频地址 " type="audio/音频格式">
            </audio>

       六.页面格局结构
          header 标题头部区域的内容(用于页面或页面中的一块区域)
          footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
          section Web页面中的一块独立区域
          article 独立的文章内容
          aside 相关内容或应用(常用于侧边栏)
          nav 导航类辅助内容
          <header style="border: 1px; height: 100px;"><h1>页面头部</h1></header>
                <section style="border: 1px; height: 500px;"><h1>页面主题部分</h1></section>
                <footer style="border: 1px; height: 100px;"><h1>页面脚部</h1></footer>

       七.内联框架
          <iframe src="嵌套地址" name="自定义名称"></iframe>
          <!--target值必须和iframe的name属性值相等才能完成点击a标签时会在内联框架中显示要跳转的页面-->
          <a href="页面地址" target="内联框架自定义名称"></a>

  • 相关阅读:
    python-day49--前端 css-层叠样式表
    python-day49--前端 html
    python-day48--mysql之视图、触发器、事务、存储过程、函数
    python-day47--pymysql模块
    python-day47--mysql数据备份与恢复
    python-day46--前端基础之html
    python-day45--mysql索引
    window系统下远程部署Tomcat
    tomcat下部署应用helloworld
    tomcat配置文件context.xml和server.xml分析
  • 原文地址:https://www.cnblogs.com/szhhhh/p/9159555.html
Copyright © 2011-2022 走看看