HTML-4-列表、表格、媒体元素

最新推荐文章于 2022-02-25 21:59:27 发布

西西ANO

最新推荐文章于 2022-02-25 21:59:27 发布

阅读量95

点赞数

分类专栏： # HTML 文章标签： html 列表表格媒体元素

本文链接：https://blog.csdn.net/baidu_38126306/article/details/110261266

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML -> 列表、表格、媒体元素

1. 列表标签

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>
<!--无序列表
应用范围：导航、侧边栏...
-->
<ul>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
</ul>

<hr/>

<!--有序列表
应用范围：试卷、问答...
-->
<ol>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
</ol>
<!--自定义列表
    dl:标签
    dt:列表名称
    dd:内容
应用范围：公司网站底部
-->
<dl>
    <dt>课程</dt>
    <dd>C</dd>
    <dd>C++</dd>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>PHP</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>香港</dd>
    <dd>台湾</dd>
</dl>
</body>
</html>

2. 表格标签

为什么使用表格：
- 简单通用
- 结构稳定
基本结构：
- 单元格
- 行
- 列
- 跨行
- 跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格table
    行 tr
    列 td
-->

<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
        <!--
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        -->
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <!--<td>3-1</td>-->
        <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>
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>

    <tr>
        <td rowspan="2">Ano</td>
        <td>Java</td>
        <td>90</td>
    </tr>

    <tr>
        <td>C++</td>
        <td>88</td>
    </tr>

    <tr>
        <td rowspan="2">Charlie</td>
        <td>Java</td>
        <td>98</td>
    </tr>

    <tr>
        <td>C++</td>
        <td>80</td>
    </tr>
</table>
</body>
</html>

3. 媒体元素

视频元素：video
音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频、视频
    src:资源路径
    controls:控制条
    autoplay:自动播放
-->
<!--<video src="../resources/video/许光汉-别再想见我(超清).mp4" controls autoplay></video>-->

<audio src="../resources/audio/许光汉 - 别再想见我.mp3" controls autoplay></audio>
</body>
</html>

西西ANO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-4-列表、表格、媒体元素

HTML -> 列表、表格、媒体元素1. 列表标签无序列表有序列表定义列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表标签学习</title></head><body><ul> <
复制链接

扫一扫