学习HTML(六)——<body>内部可用标签介绍

1)有序列表标签<ol>
和列表标签相关的标签有两类,<ol>和<li>标签。<ol>和</ol>标签定义总的列表区域。<li>和</li>表示的是
在列表区域中的列表项。列表区域内可以包含多个列表项。浏览器在显示列表项时会自动为每个列表项添加序号。
具体的例子和示意图如下:
<!DOCTYPE html>
<html>
<head>
<title>Test Lists</title>
</head>
<body>
<h1>中国古代著名诗人</h1>
<ol>
<li>李白</li>
<li>杜甫</li>
<li>王勃</li>
<li>李商隐</li>
</ol>
</body>
</html>
 
2)无序列表标签<ul>
无序列表标签和有序列表标签的唯一区别就是有序列表标签的每个列表项都是有编号的,而无序列表标签
则没有编号,编号位置显示的是圆点。其他的都是一样的。下面是例子和示意图。
<!DOCTYPE html> 
<html> 
 <head>
 <title>Unordered Lists</title> 
 </head>
 <body>
 <h1>Some random thoughts</h1> 
 <p>underneath are things i randomly thought</p> 
 <ul>
 <li>sleep</li>
 <li>do sports</li> 
 <li>watch TV</li> 
 <li>play computer games</li> 
 </ul>
 </body>
 </html>
 
3)标签嵌套
<ul>、<ol>和<li>内部都可以互相嵌套,这样就可以形成多级标签。下面是例子和示意图.
<!DOCTYPE html> 
<html>
 <head>
 <title>Nested lists</title>
 </head>
 <body>
 <ol>
 <li>Dad's interests
 <ul>
 <li>football</li>
 <li>knitting</li> 
 </ul>
 </li>
 <li>Mom's interests
 <ul>
 <li>hating football</li> 
 <li>skydiving</li>
 </ul>
 </li>
 </ol>
 <ul>
 <li>Favorite Boys' Names 
 <ol>
 <li>孟星魂</li>
 <li>郭靖</li>
 <li>狄云</li>
 </ol>
 </li>
 <li>Favorite Girls' Names 
 <ol>
 <li>木婉清</li>
 <li>小昭</li>
 <li>双儿</li>
 </ol>
 </li> 
 </ul>
 <ul>
 <ol>
 <li>孟星魂</li>
 <li>郭靖</li>
 <li>狄云</li>
 </ol>
 </ul>
 </body> 
</html>
 
 
参考文献:
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值