zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Maven 环境的配置
    zTree的简单例子
    plsql免安装客户端的配置
    HDU 1232 畅通工程
    HDU 5698 瞬间移动
    Codeforces 1015E1 Stars Drawing (Easy Edition)
    Codeforces 784B Santa Claus and Keyboard Check
    Codeforces 500C New Year Book Reading
    NSarray 赋值 拷贝 等问题记录
    UINavigationController 操作记录
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/9159385.html
Copyright © 2011-2022 走看看