HTML Lists

HTML Lists

Unordered HTML List 无序列表

Starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

list-style-type : disc (实心小圆), circle (空心小圆),square (实心正方形), none

注意:HTML 5中 <ul> 标签不支持type属性值!


Ordered HTML List 有序列表

Starts with the <ol> tag. Each list item starts with the <li> tag and are marked with numbers. 数字列表每个元素由数字标记

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

通过设定<ol> 标签type属性的值,来设定列表所使用的标号样式。

type 属性可以取得值:

  • 从1开始的阿拉伯数字
  • A  大写英文字母
  • a  小写英文字母
  • I  大写罗马数字
  • i  小写罗马数字

start 属性,取值number,Specifies the start value of an ordered list

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML Description Lists

A description list is a list of terms, with a description of each term. 描述列表由一系列项目条款和它们的描述组成。

The <dl> tag defines a description list. <dt> (定义描述元素 description terms/names) and <dd> (每个元素的描述 data/description)

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl> 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML中,使用`th:each`指令可以对一个列表进行循环,并将其中的每个元素绑定到一个变量上。如果想要实现列表的分页循环,可以在后端程序中对列表进行分页,然后在HTML中循环遍历分页后的子列表。 在Thymeleaf中,可以使用`th:if`指令和`th:unless`指令来实现分页循环。具体步骤如下: 1. 在后端程序中,将列表分为多个子列表,存储在一个父列表中,例如: ``` List<List<Item>> pages = new ArrayList<>(); int pageSize = 10; for (int i = 0; i < items.size(); i += pageSize) { int end = Math.min(i + pageSize, items.size()); pages.add(items.subList(i, end)); } ``` 在上面的例子中,`items`是需要分页循环的列表,`pageSize`表示每页显示的元素个数。将`items`分为多个子列表,存储在`pages`中。 2. 在HTML中,使用`th:each`指令遍历`pages`,并在每个子列表中循环遍历元素,例如: ``` <table> <thead> <tr> <th>名称</th> <th>价格</th> </tr> </thead> <tbody> <tr th:each="page, pageIndex : ${pages}"> <th:block th:if="${pageIndex.index} == 0"> <tr th:each="item : ${page}"> <td th:text="${item.name}"></td> <td th:text="${item.price}"></td> </tr> </th:block> <th:block th:unless="${pageIndex.index} == 0"> <tr th:each="item : ${page}"> <td th:text="${item.name}"></td> <td th:text="${item.price}"></td> </tr> </th:block> </tr> </tbody> </table> ``` 在上面的例子中,使用`th:each="page, pageIndex : ${pages}"`遍历`pages`,`pageIndex.index`表示当前子列表的索引,从0开始。在每个子列表中使用`th:each="item : ${page}"`遍历元素。使用`th:if`指令和`th:unless`指令,根据当前子列表的索引选择显示或隐藏`<tr>`标签。 使用`<th:block>`标签包裹`<tr>`标签,是为了避免在第一页的第一行出现空白行的问题。 需要注意的是,这种分页循环方式可能会导致HTML代码较为复杂,因此建议在后端程序中对列表进行分页,以减少HTML代码的复杂度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值