前端 - 基础 列表标签 - 无序列表 有序列表 详解

这篇具有很好参考价值的文章主要介绍了前端 - 基础 列表标签 - 无序列表 有序列表 详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用场景  :   如果说 表格是用来展示数据的,那列表就是用来 布局的 

                       列表最大的特点就是  整齐,整洁,有序,拿它作为布局会更加自由和方便 

分类  :  那根据使用场景不同 又可以 将列表 分成 三大类 

               无序列表,有序列表,和自定义列表

        

              无序就是 没有顺序的列表, 有序列表就是 有着顺序的列表 

              自定义列表 就是 下面是对上面的说明~!!

              无序列表是重点中的重点, 好多都会使用到~!!!

无序列表  : 

<ul>    标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,

           而列表项使用  <li>  标签定义 

基本语法格式  : 

<ul>
    <li> 列表项1 </li>
    <li> 列表项2 </li>
    <li> 列表项3 </li>
    ........
</ul> 

         前端 - 基础 列表标签 - 无序列表 有序列表 详解,WEB-前端,前端,html

            

          那实例就是  : 

       前端 - 基础 列表标签 - 无序列表 有序列表 详解,WEB-前端,前端,html

          如上示标记, 外面大圈儿就是  <ul>   里面 小圈儿 就是  <li> 

示例  : 

              前端 - 基础 列表标签 - 无序列表 有序列表 详解,WEB-前端,前端,html

              ===>>>

              前端 - 基础 列表标签 - 无序列表 有序列表 详解,WEB-前端,前端,html

               这就是无序列表的展现方式, 显示的是 前面有一个小黑点儿; 

               他们之间也不讲究顺序 。

               强调  : 

                             #  无序列表的各个列表之间没有顺序级别之分,是并列的。 

                              <ul> </ul> 中只能嵌套 <li> </li>  ,直接在 <ul> </ul> 标签中输入其他标签或

                                 者文字的做法是不被允许的~!!

                                 就是说在  <ul> 标签里 只能是  <li> 标签 ~~!

                             #   而 <li>  标签里面是可以容纳任何元素的~!!

                             #   无序列表会带有自己的样式属性,就是上示 无序列表里 <li> 标签前面的小黑

                                  点儿,它是可以改的,我们先不操心修改 ;     

                                  但是在实际使用时,我们会使用 CSS 来进行样式设置 ~!!

有序列表   :

        有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序来定义。 

        由于有序列表在开发中牵扯不多,所以我们也只是了解性学习下即可 。 

         使用场景  : 就是说如果各个列表之间有一定的顺序,谁在前面,谁在后面有讲究,那就使

                              用有序列表。

         在 HTML 标签中, <ol> 标签用于定义 有序列表,列表排序以数字进行显示,并且使用 <li> 

         标签来定义列表项。 

         基本语法格式   : 

<ol>
    <li> 列表项1 </li>
    <li> 列表项1 </li>
    <li> 列表项1 </li>
    <li> 列表项1 </li>
    .....
</ol> 

          

       示例  : 

       

               前端 - 基础 列表标签 - 无序列表 有序列表 详解,WEB-前端,前端,html

               前端 - 基础 列表标签 - 无序列表 有序列表 详解,WEB-前端,前端,html

               它会自动给 小列表 前面加上 数字,来彰显有序列表的有序~!! 

               这个顺序也不能 随意颠倒 ~!! 

               强调

                          <ol> 标签中只能嵌套 <li> , 直接在 <ol> 标签中输入其他标签或者文字的做法

                             也是不被允许的 ~!! 

                         <li> 内部也是可以容纳任何元素 

                        #    有序列表会带有自己的 样式属性( 就是前面的 数字序号 )  ,而我们在实际使

                              用的时候会采用 CSS 来进行设置~!!!文章来源地址https://www.toymoban.com/news/detail-821045.html

到了这里,关于前端 - 基础 列表标签 - 无序列表 有序列表 详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 全栈之前端 | 5.HTML表格列表标签元素学习篇

    [ 点击 👉 关注「 全栈工程师修炼指南」公众号 ] 设为「⭐️ 星标 」带你从 基础入门 到 全栈实践 再到 放弃学习 ! 涉及 网络安全运维、应用开发、物联网IOT、学习路径 、个人感悟 等知识分享。 希望各位看友多多支持【关注、点赞、评论、收藏、投币】,助力每一个梦想

    2023年04月11日
    浏览(41)
  • python入门基础-数据类型&有序序列和无序序列;

    python语言:定义成能快速完成工作的小工具 • 简洁、优雅、灵活 • 入门非常简单,但真正精通较为困难 • python可以编写服务器脚本,也可以编写常规网站 • 运行效率慢(相对于c,java) • 编译型语言(C、C++) • 执行前必须先进行编译,编译成底层机器码 • python不适合

    2024年02月08日
    浏览(35)
  • 【前端web入门第一天】02 HTML图片标签 超链接标签

    文章目录: 1.HTML图片标签 1.1 图像标签-基本使用 1.2 图像标签-属性 1.3 路径 1.3.1 相对路径 1.3.2 绝对路径 2.超链接标签 3.音频标签 4.视频标签 作用:在网页中插入图片。 src用于指定图像的位置和名称,是的必须属性。 本地图片的使用 图片拖拽到文件夹里 前两个属性是重点,后两

    2024年01月25日
    浏览(48)
  • 前端基础(HTML)——html介绍 & 常用标签 & 几个案例

    html是啥,常见的标签,几个例子 Hyper Text Markup Language (超 文本 标记语言) 简写:HTML,HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片

    2024年02月07日
    浏览(48)
  • 【前端web入门第一天】01 开发环境、HTML基本语法文本标签

    文章目录: 1. 准备开发环境 1.1 vs Code基本使用 2.HTML文本标签 2.1 标签语法 2.2 HTML基本骨架 2.3 标签的关系 2.4 注释 2.5 标题标签 2.6 段落标签 2.7 换行与水平线标签 2.8 文本格式化标签 VSCode与谷歌浏览器离线版,安装包评论区自提. VSCode默认安装位置:C:UsershpAppDataLocalProgramsMic

    2024年01月25日
    浏览(50)
  • Web基础 HTML标签 六种超链接标签的使用方式

    1、链接的语法格式: a标签里的a是单词anchor的的缩写,意为:锚。 两个属性的作用如下: 属性 作用 href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 target 用于指定链接页面的打开方式和,其中_self(当前页面打开)为默认值,

    2023年04月09日
    浏览(39)
  • 【前端|HTML系列第2篇】HTML零基础入门之标签元素

    大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入门。 掌握html常用表情的使用、基础特性以及用途。

    2024年02月11日
    浏览(69)
  • 前端HTML基础:表单标签看这一篇就行了。

    表单标签:     在网页中为了收集用户资料,此时你就会用到表单。 在HTML中,一个完整的表单由表单域、表单控件和提示信息3个部分组成 1.表单域 表单域就是一个包含表单元素的区域。 在HTML标签中,form标签用于定义表单域,以实现用户信息的收集和传递。 form会把它范

    2024年02月21日
    浏览(60)
  • 1-web前端 基础标签 、图片、超链接

    vscode 编译器下载地址: https://code.visualstudio.com/ 1、下载完vscode后安装的三个小插件:chinese(中文)、live serve、会了吧(翻译) 2、每个打开的网络页面都有html编码,可以进行编码查询和编码检查 3、vscode的三种创建编码文件的方式 4、html网页结构 5、注释:ctrl+/ 6、标题标签只

    2024年02月08日
    浏览(72)
  • 前端 | (二)各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包