• 第二章 表格,列表,媒体元素


    一.列表

      1.无序列表

          语法:<ul>

            <li>-</li>

              ....

            <li>-<li>

            </ul>

      

    特点:1.没有顺序,每个li元素独占一行(块级元素)
    2.默认每个li元素前有一个实心的小圆点
    3.一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等
    注意:
    1.遵循W3C标准,ul标签下只能有li标签,但是li标签下可以包含任何标签
    1.2有序列表
    语法:
    <ol>
    <li>***</li>
    <li>***</li>
    </ol>
    特点:1.有顺序,每个li元素独占一行
    2.默认每个li元素前有顺序标识1,2,3
    3.一般用于排序类型的列表,例如:问卷调查,
    1.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.一般用于一个标题下有 一个或者多个列表选项

    二.表格

     1.表格的跨行与夸列 <语法>

       表格夸列

    <table>

        <tr>

        <td rowspan="所夸的列数">单元格内容</td>

        </tr>

    </table>

      表格跨行

    <table>

        <tr>

        <td colspan="所夸的列数">单元格内容</td>

        </tr>

    </table>

    三.媒体元素

      1.视频元素:

        语法:

        <video src="视频路径"controls="controls"></video>

      video元素的应用

    <video controls>
      <source src="视频地址"/>
    </video>

      2.音频元素

        语法:

    <audio src="音频路径"controls="controls"></audio>

      音频元素的应用:
    <audio controls>
      <source src="音频路径"/>
    </audio>

    四.HTML5的结构元素

      

    <head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
    header{
    height:90px ;
    border: 0px solid black;    //头部
    }
    section{
    height: 500px;
    border: 0px solid black ;    //主题
    }
    footer{
    height: 160px;      //尾部
    border: 0px solid black;
    }
    </style>
    </head>

    五:<iframe>框架

      <iframe>框架的语法

    <iframe src="引用页面地址"name="框架表示名"></iframe>

        <iframe>使用

    <iframe src="引用页面地址"name="***">

    <a href="www.baidu.com"target="***"></a>

  • 相关阅读:
    数字化航电平台 3D 可视化,图扑助力珠海航展国产民机航电平台品牌发布
    20211123
    多叉树操作
    ILjava/lang/String;)Ljava/util/List
    Fiddler使用总结
    java stream map对于 key重复的处理方式,上述代码表示,重复的话,取信值
    java中map里面的key按我们插入进去的顺序输出
    IntelliJ IDEA 中自动去除未使用的引入(Unused import statement)
    加redis锁
    LambdaQueryWrapper 查distinct数据
  • 原文地址:https://www.cnblogs.com/fkx1/p/7449146.html
Copyright © 2020-2023  润新知