列表及表单

weixin_45753087

已于 2022-08-18 09:53:28 修改

阅读量178

点赞数

文章标签：前端学习 java

于 2022-07-21 20:17:33 首次发布

本文链接：https://blog.csdn.net/weixin_45753087/article/details/125918748

版权

1.1列表标签

列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

分类：无序列表（最多）、有序列表（最少）、定义列表（其次）

无序列表：没有先后之分，例如，中国的美食

有序列表：有先后之分，例如，排行榜

1.2无序列表

<body>
<!-- type的值的使用
        disc 默认值 实心圆
        circle 空心圆
        square 实心方块 -->
<ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>
</body>

应用场景

1.新闻列表 2.商品列表 3.导航条

1.3有序列表

<!-- type取值
        1  顺序为1 2 3 4……
        A  顺序为A B C D……
        a  顺序为a b c d……
        以此类推 -->
    <ol type="1">
        <li>珠穆朗玛峰</li>
        <li>乔戈里峰</li>
        <li>干城章嘉峰</li>
    </ol>

1.4定义列表

<dl>
        <!-- dt 列表标题 -->
        <dt>钓鱼岛</dt>
        <!-- dd 对列表标题的描述 -->
        <dd>钓鱼岛是中国的</dd>
        <dt>小男孩</dt>
        <dd>小男孩是日本的</dd>
    </dl>

应用场景

网站尾部的相关信息

做图文混排

2.1表格标签

表格标签作用: 用来给一堆数据添加表格语义其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

<body>
    <!-- 对齐 table tr td 设置水平对齐 align:left center right -->
    <!-- table 标签就是一个表格 -->
    <!-- tr 一个代表一行 -->
    <!-- td 一个代表一列 -->
    <!-- cellspacing 单元格与单元格的外边距 cellpadding 单元格与内容的内边距 -->
    <!-- 边框合并 cellspacing="0"
        利用css样式
         --