HTML列表

IV4

于 2022-07-18 19:05:31 发布

阅读量44

点赞数

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

本文链接：https://blog.csdn.net/m0_53132067/article/details/125858127

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

列表

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

列表的分类：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表：用于试卷，问答-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr/>

<!--无序列表：用于导航，侧边栏-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>
<hr/>

<!--自定义列表：公司网站底部
    dl：标签
    dt：列表名称
    dd：列表内容-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>

    <dd>安徽</dd>
    <dd>浙江</dd>
    <dd>US</dd>
</dl>

</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table：
        行 tr rows
        列 td col
        跨列 colspan
        跨行 rowspan
-->
<table border="1px">
    <tr>
        <td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成绩</td>
<!--        <td>1-2</td>-->
<!--        <td>1-3</td>-->
<!--        <td>1-4</td>-->
    </tr>
    <tr>
        <td rowspan="2">小明</td>
        <td>&nbsp;语文&nbsp;</td>
        <td>&nbsp;98&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;数学&nbsp;</td>
        <td>&nbsp;37&nbsp;</td>
<!--        <td>3-3</td>-->
<!--        <td>3-4</td>-->
    </tr>
    <tr>
        <td rowspan="2">李华</td>
        <td>&nbsp;语文&nbsp;</td>
        <td>&nbsp;50&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;数学&nbsp;</td>
        <td>&nbsp;87&nbsp;</td>
    </tr>
</table>

</body>
</html>

音频和视频

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>

<video src="../resource/video/周杰伦-我是如此相信 (《天火》电影主题曲)(超清).mp4" controls ></video>
<!--controls 增加控制选项
    autoplay 设置自动播放-->
<br/>

<audio src="../resource/audio/周杰伦 - 我是如此相信.mp3" controls autoplay></audio>
<br/>

</body>
</html>

页面结构分析

元素名	描述
header	标记头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	地里的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容