首页 > 软件开发 > HTML >

HTML无序列表ul标签用法

来源:互联网 2023-03-16 19:19:42 438

HTML超文本标记语言,是目前使用最广泛的语言,我们打开一个网页右击选择“源文件”,显示的内容就是html。这边今天为大家讲下HTML中无序列表ul标签的用法,而Ul一般与li(列表项)一起使用,有需要了解的朋友可以看下:p6y办公区 - 实用经验教程分享!

ps:本篇经验是本人根据自己所知而写的,如有不妥的地方请指出!p6y办公区 - 实用经验教程分享!

HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

方法/步骤

  • 1

    ul>是无序列标签,英文单词为“unordered list”,是闭合标签,尾巴为/ul>,具体使用语法如下:ul>内容/ul>p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 2

    编辑方式:可以网上百度在线HTML编辑器,或是新建文本文档输入内容后另外为”.html“格式,如下图:p6y办公区 - 实用经验教程分享!

    ps:这里使用文本文档方式!p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 3

    讲完编辑方法,现在正式说说ul>用法,其常结合列表项标签li>一起使用,使用格式如下图:p6y办公区 - 实用经验教程分享!

    html>p6y办公区 - 实用经验教程分享!

    body>p6y办公区 - 实用经验教程分享!

    百度经验p6y办公区 - 实用经验教程分享!

    ul>p6y办公区 - 实用经验教程分享!

    li>时/li>p6y办公区 - 实用经验教程分享!

    li>钟/li>p6y办公区 - 实用经验教程分享!

    li>boo/li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    /body>p6y办公区 - 实用经验教程分享!

    /html>p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 4

    ul>type属性可定义列表情的标记付好,一般有disc(圆点)、circle(圆圈)、square(方块)、等!p6y办公区 - 实用经验教程分享!

    ①discp6y办公区 - 实用经验教程分享!

    输入内容:p6y办公区 - 实用经验教程分享!

    html>p6y办公区 - 实用经验教程分享!

    body>p6y办公区 - 实用经验教程分享!

    百度经验p6y办公区 - 实用经验教程分享!

    ul type="disc">p6y办公区 - 实用经验教程分享!

    li>时/li>p6y办公区 - 实用经验教程分享!

    li>钟/li>p6y办公区 - 实用经验教程分享!

    li>boo/li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    /body>p6y办公区 - 实用经验教程分享!

    /html>p6y办公区 - 实用经验教程分享!

    网页上显示内容跟上述是一样的,ul>的属性一般默认为圆点!p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 5

    ②circlep6y办公区 - 实用经验教程分享!

    html>p6y办公区 - 实用经验教程分享!

    body>p6y办公区 - 实用经验教程分享!

    百度经验p6y办公区 - 实用经验教程分享!

    ul type="circle">p6y办公区 - 实用经验教程分享!

    li>时/li>p6y办公区 - 实用经验教程分享!

    li>钟/li>p6y办公区 - 实用经验教程分享!

    li>boo/li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    /body>p6y办公区 - 实用经验教程分享!

    /html>p6y办公区 - 实用经验教程分享!

    网页上显示效果如下:p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 6

    ③squarep6y办公区 - 实用经验教程分享!

    html>p6y办公区 - 实用经验教程分享!

    body>p6y办公区 - 实用经验教程分享!

    百度经验p6y办公区 - 实用经验教程分享!

    ul type="square">p6y办公区 - 实用经验教程分享!

    li>时/li>p6y办公区 - 实用经验教程分享!

    li>钟/li>p6y办公区 - 实用经验教程分享!

    li>boo/li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    /body>p6y办公区 - 实用经验教程分享!

    /html>p6y办公区 - 实用经验教程分享!

    网页上显示效果如下:p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 7

    嵌套列表,第一个ul>下嵌套2个列表项,第二个ul>下嵌套1个列表项。p6y办公区 - 实用经验教程分享!

    html>p6y办公区 - 实用经验教程分享!

    body>p6y办公区 - 实用经验教程分享!

    百度经验p6y办公区 - 实用经验教程分享!

    ul>p6y办公区 - 实用经验教程分享!

    li>离人愁/li>p6y办公区 - 实用经验教程分享!

    li>伤别离p6y办公区 - 实用经验教程分享!

    ul>p6y办公区 - 实用经验教程分享!

    li>凋零落/li>p6y办公区 - 实用经验教程分享!

    li>吟空悲p6y办公区 - 实用经验教程分享!

    ul>p6y办公区 - 实用经验教程分享!

    li>续繁华/li>p6y办公区 - 实用经验教程分享!

    li>又何处/li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    /li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    li>时钟boo/li>p6y办公区 - 实用经验教程分享!

    /li>p6y办公区 - 实用经验教程分享!

    /ul>p6y办公区 - 实用经验教程分享!

    /body>p6y办公区 - 实用经验教程分享!

    /html>p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 7相关内容未经许可获取自百度经验
  • 8

    ul>是无序列表的 ,而ol>是有序无序列表,用法格式类似,如下说明:p6y办公区 - 实用经验教程分享!

    html>p6y办公区 - 实用经验教程分享!

    body>p6y办公区 - 实用经验教程分享!

    百度经验p6y办公区 - 实用经验教程分享!

    ol>p6y办公区 - 实用经验教程分享!

    li>离人愁/li>p6y办公区 - 实用经验教程分享!

    li>伤别离p6y办公区 - 实用经验教程分享!

    ol>p6y办公区 - 实用经验教程分享!

    li>凋零落/li>p6y办公区 - 实用经验教程分享!

    li>吟空悲p6y办公区 - 实用经验教程分享!

    ol>p6y办公区 - 实用经验教程分享!

    li>续繁华/li>p6y办公区 - 实用经验教程分享!

    li>又何处/li>p6y办公区 - 实用经验教程分享!

    /ol>p6y办公区 - 实用经验教程分享!

    /li>p6y办公区 - 实用经验教程分享!

    /ol>p6y办公区 - 实用经验教程分享!

    li>时钟boo/li>p6y办公区 - 实用经验教程分享!

    /li>p6y办公区 - 实用经验教程分享!

    /ol>p6y办公区 - 实用经验教程分享!

    /body>p6y办公区 - 实用经验教程分享!

    /html>p6y办公区 - 实用经验教程分享!

    HTML无序列表ul标签用法p6y办公区 - 实用经验教程分享!

  • 注意事项

    • 自学html,如有不对可私信或评论指出,如对你有帮助,可点击投票、点赞支持下!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!p6y办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码