• HTML的列表,表格与媒体元素


    一.无序列表

                            <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>

  • 相关阅读:
    简单背包问题
    拓扑排序
    SPFA--P3905 道路重建
    Floyd--P1119 灾后重建
    Kmp--P3375 【模板】KMP字符串匹配
    练习 后缀数组
    BZOJ1036: [ZJOI2008]树的统计Count(树链剖分)
    BZOJ1503: [NOI2004]郁闷的出纳员(Splay)
    BZOJ2733: [HNOI2012]永无乡(线段树合并)
    BZOJ4196: [Noi2015]软件包管理器(树链剖分)
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/9159385.html
Copyright © 2020-2023  润新知