快捷搜索:  汽车  科技

html代码表示创建一个有序列表(先从前端开始--HTML之无序列表)

html代码表示创建一个有序列表(先从前端开始--HTML之无序列表)来实战下,看看代码怎么写:</ul><li>列表项2</li><li>列表项3</li>...

很久之前讲了HTML合并单元格,接下来我们说下列表,包含无序列表和有序列表。

<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。无序列表的基本语法格式如下:

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

...

</ul>

来实战下,看看代码怎么写:

html代码表示创建一个有序列表(先从前端开始--HTML之无序列表)(1)

列举了三种水果,来看看在浏览器中效果

html代码表示创建一个有序列表(先从前端开始--HTML之无序列表)(2)

具体代码如下:

<!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>

对于无序列表,还有几点是需要注意的:

  1. 无序列表的各个列表项之间没有顺序级别之分,是并列的
  2. <ul></ul>之间只能嵌套<li></li> 在<ul></ul>之间放置其他标签或者是文字等,是不被允许的。
  3. <li></li>之间相当于一个容器,可以放任意元素。比如
  4. 无序列表会带自己的样式属性,但在实际操作时,使用css来设置

先看效果:

html代码表示创建一个有序列表(先从前端开始--HTML之无序列表)(3)

然后看下代码:

<!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>

好的,今天就先到这里,稍后再说

猜您喜欢: