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>

  • 相关阅读:
    Windows SDK编程(Delphi版) 之 应用基础,楔子
    一个小问题引发的论证思考
    Delphi 组件开发教程指南(7)继续模拟动画显示控件
    用PyInstaller将python转成可执行文件exe笔记
    使用 .Net Memory Profiler 诊断 .NET 应用内存泄漏(方法与实践)
    Microsof Office SharePoint 2007 工作流开发环境搭建
    How to monitor Web server performance by using counter logs in System Monitor in IIS
    LINQ之Order By
    window 性能监视器
    内存泄露检测工具
  • 原文地址:https://www.cnblogs.com/chuliuxiang/p/9159004.html
Copyright © 2011-2022 走看看