HTML系列教材（二十）- 基本元素 - 的无序列表标签<ul>和有序列表标签<ol>

首页实践项目全站通学习路线最近访问

学习进度
我的提问
我的回答
我的收藏
我的笔记
我的积分和佣金

边学边赚退出注册登录加入QQ群

HTML

概念 HTML 教程 HTML 开发 HTML 中文问题 HTML 标签 HTML 元素 HTML 属性 HTML 注释基本元素 HTML 阶段性练习1 HTML 标题 HTML 段落 HTML 粗体 HTML 斜体 HTML 预格式 HTML 删除效果 HTML 下划线 HTML 阶段性练习2 HTML 图像 HTML 超链 HTML 表格 HTML 列表 HTML 块 div span HTML 字体 HTML 内联框架表单元素 HTML 文本框 HTML 密码框 HTML 表单 HTML 单选框 HTML 复选框 HTML 下拉列表 HTML 文本域 HTML 普通按钮 HTML 提交按钮 HTML 重置按钮 HTML 图像提交 HTML 按钮 HTML 阶段性练习3

前端部分 / HTML / HTML系列教材（二十）- 基本元素 - 的无序列表标签<ul>和有序列表标签<ol> edit 享记藏

HTML系列教材（十九）- 基本元素 - 的表格标签 <table> 详解

HTML系列教材（二十一）- 基本元素 - 的块标签<div>和<span> 以及他们的区别

登录后可下载

工具版本兼容问题

列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示

纠

示例 1 : 无序列表
示例 2 : 有序列表

示例 1 :

无序列表

edit 顶折

纠问请先登录

运行效果

<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

 
<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

渲染中渲染完成

效果

示例 2 :

有序列表

edit 顶折

纠问请先登录

运行效果

<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

xxxxxxxxxx
 
<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>

渲染中渲染完成

效果

文件内容比较器

把你的代码复制到下面区域。如果在线比较不好用，请使用客户端比较软件： diffmerge 下载和使用教程

复制代码

代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢

分享连接

分享如下连接可增加积分，获取50%佣金

如果不方便发连接（如贴吧），可以使用如下由连接转换为的二维码. 鼠标在图片上右键，然后另存为即可

警告：请勿使用挂机软件刷积分，刷积分不会导致任何注册量，很容易被识别。一旦发现刷积分，即封号处理，请勿做吃力不讨好之事。

做练习的正确姿势

1. 自行完成练习

根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程

2. 带着疑问查看答案

完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路

3. 查看答案讲解视频

依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分

4. 再做一遍

理解后，再从头做一遍，把有疑问的地方都捋清楚

5. 总结

最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理

HTML系列教材（二十）- 基本元素 - 的无序列表标签<ul>和有序列表标签<ol> -总结笔记

把这时的想法，思路，研究都记录下来，等全部学完了，再回过头来巩固和理解，学习效果就会很好，知识点掌握得也牢固.
点击查看我的笔记

总结
代码

保存中预计需要秒保存完成保存失败，请联系站长

收藏本知识点

有的同学收藏是为了进行标记,过段时间再来看不明白的地方,在此处可以记录哪里不明白. 单纯收藏的, 直接点击提交即可。

点击查看我的收藏

错误纠正专用

站长比较马虎，难免出现错别字，如果发现哪里文字有误，请提交错误，站长会尽快修改，谢谢

HTML系列教材（十九）- 基本元素 - 的表格标签 <table> 详解

HTML系列教材（二十一）- 基本元素 - 的块标签<div>和<span> 以及他们的区别

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

删除提问已经提交成功，正在审核, 谢谢.

回复提问已经提交成功，正在审核, 谢谢.

2019-12-23 小企业的前端Time-HTML 列表

小企业哒

关于前端部分-HTML-列表的提问

问题
截图
代码
异常

留下足迹

<p>无序列表</p>
<ul>
    <li>魔女的夜宴</li>
    <li>千恋万花</li>
    <li>RIDDLE JOKER</li>
</ul>
 
<p>有序列表</p>
<ol>
    <li>柚子社</li>
    <li>千恋万花</li>
    <li>丛雨</li>
</ol>

1 个答案

DLong
跳转到问题位置答案时间：2021-12-04

又是你！

请先登陆

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

答案或者代码请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到

删除提问已经提交成功，正在审核, 谢谢.

回复提问已经提交成功，正在审核, 谢谢.

2019-09-23 好像还有一个定义列表

阿龙_

关于前端部分-HTML-列表的提问

问题
截图
代码
异常

<dl>
<dt>标题</dt>
<dd>第一项</dd>
</dl>

1 个答案

一定能学好JAVA
跳转到问题位置答案时间：2020-06-29

来了老弟

代码超过 5行，点击查看

<html>
    <head></head>
        <body>
            <p>无序列表</p>
            <ul>
                <li>此电脑</li>
                <li>回收站</li>
                <li>百度网盘</li>
            </ul>
            <p>有序列表</p>
            <ol>
                <li>此电脑</li>
                <li>回收站</li>
                <li>百度网盘</li>
            </ol>
        </body>
</html>

请先登陆

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

答案或者代码请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到

删除提问已经提交成功，正在审核, 谢谢.

回复提问已经提交成功，正在审核, 谢谢.

2019-04-18 来了，老弟

AIROC

关于前端部分-HTML-列表的提问

问题
截图
代码
异常

哈哈，差点闷逼了， <li>和<i>, 一个是和<ul><ol>用的一个是斜体,哈哈

<html>
    <head>
    <meta http-equiv"Content-Type",content=" text/html;charset=UTF-8">
    </head>
    <body>
        <ul>
            <p>我是无序的，不要学我</p>
            <li>hello</li>
            <li>word</li>
        </ul>
        <ol>
            <p>我是有序的，学我</p>
            <li>hello</li>
            <li>word</li>
        </ol>
        <>
    </body>
</html>

请先登陆

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

答案或者代码请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到

删除提问已经提交成功，正在审核, 谢谢.

回复提问已经提交成功，正在审核, 谢谢.

2017-12-01 列表的应用

mrnineteenth

关于前端部分-HTML-列表的提问

在实际的工作中，列表最主要的应用在什么地方呢？

3 个答案

王菜菜
跳转到问题位置答案时间：2021-11-13

list-style：none 可以去掉li前面的点

心之所向
跳转到问题位置答案时间：2018-10-22

前端很多地方会用表格的

我会努力学JAVA的
跳转到问题位置答案时间：2018-09-19

那就多了，你说啥地方不需要列表，

请先登陆

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

答案或者代码请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到

删除提问已经提交成功，正在审核, 谢谢.

回复提问已经提交成功，正在审核, 谢谢.

2017-09-23 无序和有序列表当用div的align设置为right时,内容在右边,可是序号在左边??

周自横

关于前端部分-HTML-列表的提问

问题
截图
代码
异常

无序和有序列表当用div的align设置为right时,内容在右边,可是序号在左边??

<div align="right">
        <ul>
            <li>无序列表一</li>
            <li>无序列表二</li>
        </ul>
        <br/>
        <ol>
            <li>有序列表一</li>
            <li>有序列表二</li>
        </ol>
    </div>

2 个答案

xiaoyang
跳转到问题位置答案时间：2019-08-08

我试了一下firefox是正常的，Chrome像你说的那样

87626380
跳转到问题位置答案时间：2017-12-18

是的

请先登陆

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

答案或者代码请至少填写一项, 如果是自己有问题，请重新提问，否则站长有可能看不到

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML-列表的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图

描述
代码
异常

分享连接

分享如下连接可增加积分，获取50%佣金

如果不方便发连接（如贴吧），可以使用如下由连接转换为的二维码. 鼠标在图片上右键，然后另存为即可

警告：请勿使用挂机软件刷积分，刷积分不会导致任何注册量，很容易被识别。一旦发现刷积分，即封号处理，请勿做吃力不讨好之事。