前端html(2)

踢球的打工仔2025-12-07 13:55

列表：ul和ol

我们有的时候，需要在界面中显示列表，这就需要用到ul和ol，如下：

复制代码

<html>
    <head>
        <title>网站名称</title>
    </head>
    <body>
        <ol>
            <li>有序列1</li>
            <li>有序列2</li>
            <li>有序列3</li>
        </ol>
        <ol start="10">
            <li>有序列1</li>
            <li>有序列2</li>
            <li>有序列3</li>
        </ol>
        <ul>
            <li>无序列1</li>
            <li>无序列2</li>
            <li>无序列3</li>
        </ul>
    </body>
</html>

注：由以上可知，ol为有序列表，且可以通过设置start属性来指定从序列几开始；ul为无序列表；

图像：img

img标签用来显示一个图片，我们找一个图片，整理后的文件下如下：

复制代码

<html>
    <head>
        <title>网站名称</title>
    </head>
    <body>
        <img src="./a.png"/>
    </body>
</html>

注：img的src用来设置你想要显示的图片，可以是一个网络地址，这里我用的是本地图片，./表示当前路径下

视频：video

上面我们放了一张图片，这里如果想要显示视频的话，可以使用video标签：

复制代码

<html>
    <head>
        <title>网站名称</title>
    </head>
    <body>
        <video src="./1.mp4" controls></video>
    </body>
</html>

音频：audio

audio和视频使用的方式一样：

复制代码

<html>
    <head>
        <title>网站名称</title>
    </head>
    <body>
        <audio src="./1.mp3" controls></video>
    </body>
</html>

注：以下的视频video和音频audio标签中的controls属性是用来设置是否显示自带的控制管理，你可以去掉试一下！