列表、表格、媒体元素

最新推荐文章于 2024-10-08 17:48:41 发布

秃头酱酱

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量121

点赞数

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_59806308/article/details/123082343

版权

HTML 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

（一）列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>C语言</li>
    <li>Java</li>
    <li>前端</li>
    <li>Python</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>C语言</li>
    <li>Java</li>
    <li>前端</li>
    <li>Python</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
    <dd>C语言</dd>
    <dd>Java</dd>
    <dd>前端</dd>
    <dd>Python</dd>
<dt>位置</dt>
    <dd>中国</dd>
    <dd>辽宁</dd>
    <dd>抚顺</dd>
    <dd>新宾</dd>
</dl>
</body>
</html>

（二）表格

优点：简单通用、结构稳定。
基本结构：单元格、行、列、跨行、跨列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行：tr
列：td
边框：border
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="3">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

</body>
</html>

（三）媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--视频video和音频audio-->
<!--src：资源路径
    controls：控制选项
    autoplay：自动播放
-->
<video src="../resources/video/本溪.mp4" controls></video><br/>
<audio src="../resources/audio/赵丽颖 - 十年.mp3"controls></audio>
</body>
</html>