手把手教你给html文本添加有序列表与无序列表(代码详解)

之前的文章《一招教你使用css给HTML字体添加背景图(代码分享)》中,给大家介绍了如何用css给HTML字体添加背景图的方法。下面下面本篇文章给大家介绍怎样在html中给文本添加有序列表与无序列表,我们一起看看怎么做。

手把手教你给html文本添加有序列表与无序列表(代码详解)

html文本添加有序列表与无序列表的方法

1、首先打开html文档,输入nbsp;html>然后本文

2、这个标签

    叫做无序列表标签,如果咱们想用的话 ,它底下还得必须包含一个东西叫做

  • 这两个标签 ,它们是配合着使用,通过给大家代码示例。

    代码示例

    • 我喜欢吃苹果
    • 我喜欢吃西瓜
    • 我喜欢吃香蕉
    • 我喜欢吃火龙果

    代码效果

    立即学习“前端免费学习笔记(深入)”;

    微信截图_20210816160109.jpg

    无序列表

  • 可以有无限,所有其余的内容放在
  • 里面就可以。

    看看试试能不能把标签放在li里面效果怎么样?我们一起看看吧

    代码示例

    • 我喜欢吃苹果
    • 我喜欢吃西瓜
    • 我喜欢吃香蕉
    • 我喜欢吃火龙果
    • 我要打开百度

    代码效果

    立即学习“前端免费学习笔记(深入)”;

    微信截图_20210816160853.jpg

    结束出来,可以,但是在低级浏览器上不可以,OK 正常来说ul下面只能第1层,这个就是咱们无序列表的一个基本使用,接下来有序列表怎么做呢。

    3、这个标签

      叫做有序列表标签,和

        做法一样,必须包含一个东西叫做li这两个标签 ,通过给大家代码示例。

        代码示例

        1. 我喜欢吃苹果
        2. 我喜欢吃西瓜
        3. 我喜欢吃香蕉
        4. 我喜欢吃火龙果
        5. 我要打开百度

        代码效果

        立即学习“前端免费学习笔记(深入)”;

        微信截图_20210816161438.jpg

        其实这两个基本玩了一下这个html里的两个比较重要的标签 ,还有一个叫做

          一个叫做

            一个叫做无序列表 ,一个叫做有序列表 ,大家一定要注意 ,既然使用基本方法一致。

            推荐学习:Html视频教程

            以上就是手把手教你给html文本添加有序列表与无序列表(代码详解)的详细内容,更多请关注创想鸟其它相关文章!

            版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
            如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
            发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1550501.html

          1. (0)
            打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
            上一篇 2025年12月21日 20:58:16
            下一篇 2025年12月21日 20:58:27

            相关推荐

            • html篇:网页中如何实现输入框效果(代码详解)

              之前的文章《手把手教你给html文本添加有序列表与无序列表(代码详解)》中,给大家介绍了怎么使用html给文本添加有序列表与无序列表。下面本篇文章给大家介绍html网页中如何实现输入框效果,我们一起看怎么做。 标签指定:搜集用户信息并且输入字段很多种形式,比如:文本字段、复选框、单选按钮、等等。 添…

              2025年12月21日 好文分享
              000
            • 手把手教你使用css制作一个圆角按钮效果(代码详解)

              之前的文章《html篇:网页中如何实现输入框效果(代码详解)》中,给大家介绍了怎么使用html实现输入框效果。下面本篇文章给大家介绍怎么使用CSS制作圆角按钮效果,我们一起看看怎么做。 html制作一个网页中的圆角按钮的方法 1、新建一个html文件,首先body中先输入一个a标签,并插入一个空链接…

              2025年12月21日 好文分享
              000
            • 一招教你使用html给图片添加边框效果(代码详解)

              之前的文章《手把手教你使用css制作一个圆角按钮效果(代码详解)》中,给大家介绍了怎么使用css制作一个圆角按钮效果。下面本篇文章给大家介绍怎么使用html给图片添加边框效果,我们一起看看怎么做 图片添加边框效果的方法 1、打开HTML代码软件,建立一个代码,添加图片效果有两种方法 一方法:图片添加…

              2025年12月21日 好文分享
              000
            • 一文讲解html中怎么使用SVG实现画走势图(分享代码)

              之前的文章《浅析javascript中Reflect内置对象(代码详解)》中,给大家介绍了解了JS中Reflect内置对象。下面本篇文章给大家介绍怎么使用SVG实现画走势图,有需要的朋友可以参考一下,希望对你们有所助。 先说说viewBox是干嘛的,就是按比例缩放视图的。用图形来表示 svg wid…

              2025年12月21日
              000
            • 手把手教你怎么使用html+css实现轮播图效果(代码分享)

              之前的文章《手把手教你使用css制作一个简单的心跳效果(代码详解)》中,给大家介绍了怎么使用css制作一个简单的心跳效果。下面本篇文章给大家介绍怎么使用html+css实现轮播图效果,我们一起看看怎么做。 推动轮播实现效果图如下 首先写Html部分,你可以理解这个div标签,如果你写CSS或者JS的…

              2025年12月21日 好文分享
              000
            • 用HTML/CSS制作有趣的动态波浪形文本行

              在上一篇《很实用!css实现在单击按钮时显示按下的动态效果》中大家介绍了怎么使用css实现在单击按钮时显示按下的动态效果,有需要的朋友可以去学习了解一下~ 本文将带大家用HTML/CSS制作一种有趣的动态波浪形文本行效果! 下面我们直接看完整的代码示例: body { display: flex; …

              2025年12月21日
              000
            • HTML/css实现好玩的文本液体填充效果

              在上一篇文章中《如何使用css动态调整旋转半径?》给大家介绍了使用css实现动态调整旋转半径的效果,感兴趣的朋友可以学习了解一下~ 本文将给大家带来一个特别好玩的实现效果,各位对标题所述的“文本液体填充效果”不知道有没有想法? 首先我们来看一下这个效果是什么样的,如下图所示: 下面我们直接上完整的H…

              2025年12月21日
              000
            • html怎么实现内容超出自动隐藏

              html实现内容超出自动隐藏的方法是,给文本内容添加overflow属性,并且设置属性值为hidden即可,例如【div{overflow: hidden;}】。 本文操作环境:windows10系统、html 5、thinkpad t480电脑。 在实际工作中,我们可能会需要显示一段长文本,但是我…

              2025年12月21日
              000
            • html怎么设置文字居中对齐

              html设置文字居中对齐的方法是,给段落文字添加text-align属性,并且设置属性值为center即可,例如【h1 {text-align:center}】。text-align属性指定了元素文本的水平对齐方式。 本文操作环境:windows10系统、html 5、thinkpad t480电脑…

              2025年12月21日
              000
            • html怎么使文本框不可编辑

              html使文本框不可编辑的方法是,给文本框添加一个布尔属性disabled即可。disabled属性规定了应该禁用的input元素,被禁用的元素是无法使用和点击的。 本文操作环境:windows10系统、html 5、thinkpad t480电脑。 我们可以借助于disabled属性来实现文本框不…

              2025年12月21日
              000
            • html怎么创建表格

              html创建表格的方法:首先使用“” 标签定义表格框架;然后使用一个或多个“”标签定义表格中的行,一个或多个“”标签定义单元格;最后在td标签对中填入表格数据(单元格内容)即可,数据可以是文本、图片等信息。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 表格由 标签来定义…

              2025年12月21日 好文分享
              000
            • html网页的列表标签分为哪几种

              html网页的列表标签分为3种:1、无序列表,使用“”标签定义;2、有序列表,使用“”标签定义;3、自定义列表,使用“”标签定义。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html网页的列表 无序列表 有序列表 立即学习“前端免费学习笔记(深入)”; 自定义列表 1…

              2025年12月21日 好文分享
              000
            • 如何给html设置背景

              html设置背景的方法:1、使用body标签的bgcolor属性设置背景颜色;2、使用body标签的background属性设置背景图片;3、在body标签中使用style属性,添加“background:颜色值/url(‘图片路径’)”。 本教程操作环境:windows7系…

              2025年12月21日 好文分享
              000
            • html中如何添加一个表头

              在html表格中,可以通过在table标签中使用一个或多个“th”标签添加表头,th标签用于定义HTML表格中的表头单元格;语法“表头信息表头信息..”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html添加一个表头 月份 存款 一月 3000 元 二月 2000 …

              2025年12月21日
              000
            • html页面里中文乱码怎么解决

              中文乱码的解决方法:1、在HTML文档的head部分,使用“”语句设置编码方法即可;2、利用网页编辑器打开HTML文档,设置编码,以统一文件和代码的编码格式。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 出现乱码的原因: 出现中文乱码可能一个重要的因素就是网页可能没有设…

              2025年12月21日
              000
            • html文本区域大小怎么设置

              在html中,可以使用textarea标签的cols和rows属性来设置文本区域的大小,cols属性指定文本区域内可见的宽度,rows属性指定文本区域内可见的行数;语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 标签定义一个多行的文本输入控件。 文本区域中可容纳…

              2025年12月21日
              000
            • 怎么在head区域引入css

              引入方法:1、使用style标签引入,语法“css代码 ”;2、使用link引入,语法“”。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 在head区域引入css有两种方法: 内部样式表–用style标签定义 外部样式表&#821…

              2025年12月21日
              000
            • html如何调用外部css

              调用方法:1、使用“”语句调用;2、在style标签中使用“@import url(CSS文件路径地址)”语句调用。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 html调用外部css有两种方法 链接式–使用标签 导入式&#821…

              2025年12月21日
              000
            • 什么是HTML元素?浅谈元素的语法规则

              什么是HTML元素?本篇文章带大家了解一下HTML元素,介绍一下html 元素的语法规则。 相关推荐:《什么是CSS语法?详细介绍使用方法及规则》 HTML元素 HTML 元素指的是从开始标签到结束标签的所有代码。 如: 立即学习“前端免费学习笔记(深入)”; ,这就是一个HTML元素。 代码示例 …

              2025年12月21日 好文分享
              000
            • html+css+js实现星空旋转和文字淡入效果(附代码)

              本篇文章给大家通过代码示例介绍一下使用html+css+js如何实现一个星空旋转和文字逐渐出现的效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。     废话不多说直接上代码,效果是一个星空旋转和文字逐渐出现的效果,文字是逐渐出现的,星空中的小球是旋转的 星空特效 *{ marg…

              2025年12月21日
              000

            发表回复

            登录后才能评论
            关注微信