html的列表.表格.表单

最新推荐文章于 2024-07-08 15:55:54 发布

菲燚莫属

最新推荐文章于 2024-07-08 15:55:54 发布

阅读量210

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/fymsa/article/details/124619222

版权

## 列表:
#### 1.无序列表:

2.特点:①自带小黑点,②li标签独占一行,③他是没有顺序的列表,可以随意切换顺序;

3.注意点:ul里面只能放li标签,但是li标签里可以包含其他内容.

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e2fae8729224c1eafad7db7ed0cdaa5~tplv-k3u1fbpfcp-watermark.image?)

#### 2.有序列表:
1.ol有顺序的列表,用的场景不多(排名)

2.特点:
①有顺序之分,
②li独占一行,

3.注意点:
①ol里面只能放li标签,
②li标签里面可以放任意标签.

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e859df1f28c4424a2136fec63f6eb57~tplv-k3u1fbpfcp-watermark.image?)

#### 3.自定义列表:
自定义列表:dl>dt>dd
应用场景:网页底端进行说明;
特点:
①dt里面写的内容,需要让dd围绕他进行修饰;
②dd会缩进;
③独占一行;

注意点:
①dl里面只能放dt+dd;
②dt+dd里面可以放任何内容.

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4841137bd9c74782b92ac96002926ae9~tplv-k3u1fbpfcp-watermark.image?)

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2744ea78ba6b49748eb717dc3ddeb5d6~tplv-k3u1fbpfcp-watermark.image?)

#### 综合

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4c7600581da4db08e847a9bdc098ccf~tplv-k3u1fbpfcp-watermark.image?)

#### 表格:
table

每一行:tr

单元格:td

table>tr>td

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62fc8a6bc53d472ebf24fa51742f461e~tplv-k3u1fbpfcp-watermark.image?)

#### 单元格合并

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/042bdc415bf84d7ba1942b71be494bfb~tplv-k3u1fbpfcp-watermark.image?)

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cccc422b929a49adb2bf89190f2a1bad~tplv-k3u1fbpfcp-watermark.image?)

#### 代码运行结果:

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/715a5ed6cc524ab391b86bcb25b6317b~tplv-k3u1fbpfcp-watermark.image?)

## 表单系列:

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/922e52f3c4b74c4aa11d50fe888476e6~tplv-k3u1fbpfcp-watermark.image?)

关注