很久之前讲了HTML合并单元格,接下来我们说下列表,包含无序列表和有序列表。
<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。无序列表的基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</ul>
来实战下,看看代码怎么写:
列举了三种水果,来看看在浏览器中效果
具体代码如下:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>无序列表</title>
</head>
<body>
<h4>您喜欢的事物</h4>
<ul>
<li>桃子</li>
<li>苹果</li>
<li>西瓜</li>
</ul>
</body>
</html>
对于无序列表,还有几点是需要注意的:
- 无序列表的各个列表项之间没有顺序级别之分,是并列的
- <ul></ul>之间只能嵌套<li></li>,在<ul></ul>之间放置其他标签或者是文字等,是不被允许的。
- <li></li>之间相当于一个容器,可以放任意元素。比如
- 无序列表会带自己的样式属性,但在实际操作时,使用css来设置
先看效果:
然后看下代码:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>无序列表</title>
</head>
<body>
<h4>您喜欢的事物</h4>
<ul>
<li>桃子</li>
<li>苹果</li>
<li>西瓜</li>
<li>
<p>这是一个段落</p>
<tr>
<td>苦难</td>
</tr>
</li>
</ul>
</body>
</html>
这里插入了一个<p>,还有<tr>和<td>,确实是什么都可以插进去的
无序列表说完后,我们来讲讲有序列表
<ol>标签用于定义有序列表,列表排序以数字来显示,并使用<li>标签来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
好的,今天就先到这里,稍后再说