HTML:列表标签、表格标签、媒体元素

列表标签

什么是列表:

  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息

列表的分类:

  • 无序列表 ol(Ordered list)
  • 有序列表 ul (Unordered list)
  • 自定义列表

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>

<hr>

<!--无序列表-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<!--
自定义列表
   dl: 标签
   dt: 列表名称
   dd: 列表内容
-->
<dl>
    <dt>数字</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>

    <dt>数字(中文)</dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>
</body>
</html>

运行结果:
在这里插入图片描述

表格标签

在这里插入图片描述
示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
表格 table
行 tr(table rows)
列 td
-->
<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

运行结果:
在这里插入图片描述

媒体元素(vedio & audio)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--视频
  video
  controls: 控制条
  autoplay: 自动播放
-->
<video src="resources/vedio/蛇蛇.mp4" controls autoplay></video>

<!--音频
    audio
  controls: 控制条
  autoplay: 自动播放-->
<audio src="resources/audio/星沉大海.mp3" controls autoplay></audio>
</body>
</html>

运行结果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/I_r_o_n_M_a_n/article/details/114152019
今日推荐