从零开始学web开发之html5-4.列表

1.有序列表

<1>.<ol></ol>-<li></li>·

语法:

<ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>
  • ol:ordered list 有序列表
  • li:list item 列表项

有序列表从<ol>开始,到</ol>结束,中间的列表项是<li>标签内容。
两者配合使用,没有单独使用,而且<ol>标签内部不能存在任何其它标签,一般情况只能存在<li>标签(忽略嵌套列表).

<2>.type属性

语法:

<ol type="符号类型"></ol>

可以改变列表项前的项目符号,如默认是1、2、3,可换为a、b、c
说明:

属性值列表项的序号类型
1数字1,2,3..
a小写英文字母a,b,c…
A大写英文字母A,B,C…
i小写罗马数字i、ii、iii…
IⅠ、Ⅱ、Ⅲ…

  应该用CSS来控制样式,放弃用type属性。
  css属性list-style-type

2.无序列表

<1>.<ul></ul>-<li></li>

语法:

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>
  • ol:unordered list 有序列表
  • li:list item 列表项

两者配合使用,ul标签内部一般情况下只能存在<li>标签

<2>.type属性

语法:

<ol type="符号类型"></ol>

说明:

属性值列表项的序号类型
disc默认值,实心圆●
circle空心圆,○
square实心正方形,■

使用CSS同上。

3.定义列表 <dl></dl>

语法:

<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
</dl>
  • dl即是definition list,定义列表 .,标记定义列表开始与结束。
  • dt-definition term,定义名词,后面添加要解释的名词。
  • dd-definition description,定义描述,后面则添加该名词的具体解释,会自动缩进标签。

4.示例链接,右键可查看源码

示例网页链接

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值