HTML标签及用法（3）-CSDN博客

本文链接：https://blog.csdn.net/Liuzhengyue_/article/details/137156731

列表（双标签）

作用：布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表

无序列表：

作用：布局排列整齐的不需要规定顺序的区域

标签：<ul>嵌套<li>，<ul>是无序列表，<li>列表条目

属性：type="square"实心方块 type="disc"实心圆 type="circle"空心圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <ul type="square">
        <li type="disc">
            <a href="../表格.html" target="_blank">基础信息</a>
        </li>
        <li type="circle">
            <a href="./522401200202258666.jpg" target="_blank">个人照片</a>
        </li>
        <li>列表条目3</li>
        <li>列表条目4</li>
    </ul>
</body>
</html>

浏览器效果：

有序列表：

作用：布局排列整齐的需要规定顺序的区域

标签：<ol>嵌套<li>，<ol>是有序列表，<li>是列表条目

属性：type="1/A/a/I/i"有五种不同的序列表示数字

注意：<ol>标签里只可以嵌套<li>标签

<li>标签可以包含其他的任何标签

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <ol type="1">
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
    <ol type="I">
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
    <ol type="A">
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>

</body>
</html>

浏览器效果：

定义列表：

标签：<dl>嵌套<dt><dd>，<dl>是定义列表，<dt>是定义列表的标题，<dd>是定义列表的叙述或详情

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义标签</title>
</head>
<body>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        <dd>维修服务价格</dd>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dt>关于小米</dt>
        <dd>了解小米</dd>
        <dd>加入小米</dd>
        <dt>关于我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
    </dl>
</body>
</html>

浏览器效果：

视频标签：

标签：<video>(双标签)

属性：src="视频的URL"， controls表示控制面板，使播放条显示出来。

注意：如果没有controls的话，浏览器是没有视频出现的。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title视频标签</title>
</head>
<body>
    <video src="./张学友 - 听海 (活出生命Live演唱会).mp4" controls></video>
</body>
</html>

浏览器效果：

音频标签：

标签：<audio>

属性：src="音频的URL"，controls控制面板，loop循环播放

案例：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐</title>
</head>
<body>
    <!-- controls表示控制面板，使播放条显示出来 -->
    <!-- 在html中属性名和属性值一样时，用一个单纯表示就可以 -->
    <audio src="../RedXxxxxx - 上海.春.mp3" controls loop></audio>
</body>
</html>

浏览器效果：

iframe内联标签：

标签：<iframe>也可以理解为内置浏览器

作用：实现内部跳转页面

属性：name="命名" src="URL" frameborder="数字"表示框线

iframe和<a>标签使用时：<a>的属性target的内容和iframe的name的内容相同时，可以实现一个页面跳转

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联标签</title>
</head>
<body>
    <!-- 也可以理解为内置浏览器 -->
    <table width="100%" align="center" width="100%" height="600">
        <tr bgcolor="pink">
         <td width="20%" height="100%">
            <a href="./无序列表.html" target="iframe">1.无序列表</a><br>
            <a href="./下拉菜单.html" target="iframe">2.下拉菜单</a><br>
            <a href="./字体实体.html" target="iframe">3.字体实体</a><br> 
            <a href="./图片测试.html" target="iframe">4.图片测试</a>
            <a href="./input标签使用.html" target="iframe">5.input标签使用</a>
            <a href="./按钮-botton.html" target="iframe">6.按钮-botton</a>
         </td>
         <td>
            <iframe src="../2023080910113-刘正月/表单测试.html" frameborder="0" width="100%" name="iframe" height="100%"></iframe>

浏览器效果：