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>

  • 相关阅读:
    使用vscode 用git 拉取代码,提示:在签出前,请清理存储库工作树
    区分手机端和pc端加载不同的样式
    关于vue的代码规范
    各种名词汇总整理
    ZB埋点汇总
    项目实战 OLAP数据提取
    大数据intern_1总结:数据埋点以及SQL复习
    leetcode 343+279+91+64+70 动态规划
    leetcode 241 加优先级括号
    leetcode 17+79+93+46+47+77+39+40+78+90+131+37 回溯法
  • 原文地址:https://www.cnblogs.com/wishsaber/p/9159075.html
Copyright © 2011-2022 走看看