博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
列表、表格与媒体元素
阅读量:5116 次
发布时间:2019-06-13

本文共 1694 字,大约阅读时间需要 5 分钟。

一.无序列表

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

转载于:https://www.cnblogs.com/1314Justin/p/9159555.html

你可能感兴趣的文章
Vue_(组件通讯)子组件向父组件传值
查看>>
jvm参数
查看>>
我对前端MVC的理解
查看>>
Silverlight实用窍门系列:19.Silverlight调用webservice上传多个文件【附带源码实例】...
查看>>
2016.3.31考试心得
查看>>
mmap和MappedByteBuffer
查看>>
Linux的基本操作
查看>>
转-求解最大连续子数组的算法
查看>>
对数器的使用
查看>>
【ASP.NET】演绎GridView基本操作事件
查看>>
ubuntu无法解析主机错误与解决的方法
查看>>
尚学堂Java面试题整理
查看>>
MySQL表的四种分区类型
查看>>
[BZOJ 3489] A simple rmq problem 【可持久化树套树】
查看>>
STM32单片机使用注意事项
查看>>
swing入门教程
查看>>
好莱坞十大导演排名及其代表作,你看过多少?
查看>>
Loj #139
查看>>
hihocoder1187 Divisors
查看>>
Azure 托管镜像和非托管镜像对比
查看>>