「HTML」学习笔记-基本标签-2

目录

一、音视频

二、列表

三、div和span

四、表格


一、音视频

-音频标签:<audio></audio>

-属性:

src:音频文件路径

loop:循环播放

autoplay:自动播放

preload:预加载,none|metadata|auto

-语法结构:

<!--写法1-->
<audio src="1.mp3"></audio>

<!--写法2-->
<audio>
<source  src="1.mp3"></source>
</audio>

-视频标签:<video></video>

-属性:

src:音频文件路径

loop:循环播放

autoplay:自动播放

width:宽

height:高

poster:封面图片

preload:预加载,none|metadata|auto

-语法结构:

<!--写法1-->
<video src="1.mp4"></video>

<!--写法2-->
<video>
<source  src="1.mp4"></source>
</video>

二、列表

无序列表<ul>

属性:

type:disc默认的,实心圆

circle空心圆,square方块

使用:type默认实心圆

<ul>
				<li>张三</li>
				<li>李四</li>
</ul>

「HTML」学习笔笔记-基本标签-2

type默认为实心圆

使用:type空心圆

<ul type="circle">
        <li>张三</li>
        <li>李四</li>
    </ul>

「HTML」学习笔笔记-基本标签-2

circle为空心圆

使用:type方块

<ul type="square">
        <li>张三</li>
        <li>李四</li>
    </ul>

「HTML」学习笔笔记-基本标签-2

square方块

有序列表<ol>

属性:

type:取值有1,a,A,i,I,分别代表数字,小写字母序列,大写字母序列,小写罗马数字,大写的罗马数字,默认的是数字,使用方式同上,这里不再图示。

案例:

<ol>
				<li>张三</li>
				<li>李四</li>
</ol>

自定义列表<dl>

一般用来进行图文展示

案例:

<dl>
        <dt>
            <img src="images/car-1.png" alt="">
        </dt>
        <dd>凯美瑞</dd>
    </dl>

「HTML」学习笔笔记-基本标签-2

三、div和span

这两个都可以当作容器来使用,嵌套其他标签

div:块级元素,默认占整行

span:行级元素,内容多宽他就多宽

四、表格

结构组成:

table:表格标签

tr:行标签

td:列表签

两行两列:

<table border="1">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>100</td>
        </tr>
    </table>

border="1" 表示表格边框宽度为1px

「HTML」学习笔笔记-基本标签-2

合并行:rowspan

<table border="1">
        <tr>
            <td rowspan="2">姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>100</td>
        </tr>
    </table>

「HTML」学习笔笔记-基本标签-2

合并列:colspan

<table border="1">
        <tr>
            <td colspan="2">信息</td>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>100</td>
        </tr>
    </table>

「HTML」学习笔笔记-基本标签-2

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

世人万千丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值