<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
无序排序：
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>在html中表示有序列表的html代码是<ol>标签，用来定义有序列表，其中的每一项都用<li>标签来定义。例如：<ol> <li>香蕉</li> <li>苹果</li> <li>橘子</li> </ol>
html中共有3种列表：无序列表ul、有序列表ol、定义列表dl。
1、无序列表：
<ul>
<li>……</li>
<li>……</li>
</ul>
ul是最常用到的列表，一般的新闻列表都是通过ul实现的。其中li是没有顺序性的，就是并列关系。通过设置list-style样式可以控制li前边显示点或圈等（具体查看在线手册）。在具体 *** 作中，列表前边的小图标都是通过背景图来实现的。
2、有序列表：
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
有序列表在实际中用到的比较少，顾名思义，里边的li是有顺序的。可以通过设置来实现li前边显示“1，2，3”或其他顺序（具体查看在线手册）。
1、定义列表：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
定义列表的本意是下定义用的，就是一个标题，然后下边是分条内容。但在实际中，由于定于列表本身就3个标签dl、dt、dd，并且为块元素，所以定义列表经常用来布局。
其实他们的区别都可以用css来更改
<dl>适合于列表内容项，一个大标题，下面几个小标题的那种
<tr><td>(HTML中没有<tl>，估计是你笔误吧)，是<table>里的标签，这个适合于做表格，在早期都是拿来布局的，后来被<div>给代替了
<ul><li>无序列表，适用于那种不需要指明数字序号的列表，没有顺序的列表
<ol><li>有序列表，顾名思义，就是需要按一定顺序排列的列表
他们的表现形式，你可以把代码打出来，观察下就知道了，我把他们打出来了，你可以看下他们的区别
<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>前端技术点</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dt>Java开发</dt>
<dd>Java Web</dd>
</dl>
<table border="1">
<tr>
<td>这个是表格</td>
<td>这个是表格</td>
<td>这个是表格</td>
</tr>
<tr>
<td>这个是表格</td>
<td>这个是表格</td>
<td>这个是表格</td>
</tr>
</table>
<ul>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
</ul>
<ol>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
<li>这个是有序列表</li>
</ol>
</body>
</html>
在有序列表元素ol，添加属性reversed，下面进行验证：
1、起始代码
2、起始效果
3、设置代码
4、设置结果
2ol-li有序列表(在网页中显示的默认样式一般为：每项 li 前都自带一个序号，序号默认从1开始)
其实导航栏就是给列表标签设置CSS样式
第一步:
在HTML上的文件里加上ul-li 标签,在对应的CSS文件中使用下边语句去掉 li 标签前面默认的小圆点
第二步:
让 li 标签 浮动 起来,一般设置为左浮动,看看它是不是变成了一横排
第三步:
美化一下你的导航栏,给它加个背景色吧 background-color: red;
每个导航单元的字数不同,大小不同给它设置宽高看起来更美观 height: 30px; width: 100px;
字体颜色也可以设置哦 color: #000f;
留个分界线导航栏不会连成一片了 margin-left: 1px;
第四步:
加上一个鼠标事件,鼠标移动到导航单元改变背景色和文本颜色
第五步:
使用a标签给你的导航加上链接
一般加上链接后文本会默认加一个下划线,使用语句 text-decoration: none; 去除下划线
未被访问的链接
鼠标指针移动到链接上
正在被点击的链接
已被访问的链接
不同的属性会呈现不同的效果哦, 赶快试试吧 !
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）