html支持的列表标签:无序列表、有序列表和定义列表(介绍)

从某种意义上讲,不是描述性的文本的其他任何内容都可以认为是列表。例如:人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或列表里的列表。那么在html列表样式有哪些?本章给大家带来html支持的列表标签:无序列表、有序列表和自定义列表(介绍)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、html无序列表

无序列表是一个没有顺序的列表项目,在各条列前面使用●□◇◆等符号以示区隔。

html无序列表始于

标签。每个列表项始于 ;无序列表的type属性有三个数值可选,这三个选项分别为:disc实心园、circle空心园、square小方块。  默认属性是disc实心园。

基本语法:

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


登录后复制登录后复制     项目1     项目2     项目3

value值为项目符号的类型(type类型),无序列表的type类型有:

1.png

html无序列表代码实例:

nbsp;html>html---无序列表

登录后复制默认的无序列表默认的无序列表默认的无序列表添加circle属性添加circle属性添加circle属性添加square属性添加square属性添加square属性

效果图:

1.jpg

也可以使用css list-style-type属性定义上图的html无序列表样式。

二、html有序列表

有序列表是一列按照字母或数字等顺序排列的列表项目,注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项,编号会自动调整。

html有序列表始于

标签。每个列表项始于 标签。

基本语法:

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

        
  1. 项目1
  2.     
  3. 项目2
  4.     
  5. 项目3

登录后复制

value1表示有序列表项目符号的类型(type类型), value2表示项目开始的数值. start是编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在

标签中设定value=”n”改变列表行项目的特定编号,例如。type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。使用这些属性,把它们放在或的的初始标签中。

有序列表type类型有:

2.png

html有序列表代码实例:

nbsp;html>html---有序列表
            
  1. 默认的有序列表
  2.         
  3. 默认的有序列表
  4.         
  5. 默认的有序列表
  6.     
    
            
  1. 第1项
  2.         
  3. 第2项
  4.         
  5. 第3项
  6.         
  7. 第4项
  8.     
    
            
  1. 第1项
  2.         
  3. 第2项
  4.         
  5. 第3项
  6.     

登录后复制

效果图:

4.jpg

同样也可以使用css list-style-type属性定义上图的html有序列表样式。

三、html自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

html自定义列表以

标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。用于对术语或名词进行解释和描述,自定义列表的列表项前没有任何项目符号。

基本语法:

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


登录后复制登录后复制名词1名词1解释1名词1解释2名词2名词2解释1名词2解释2

html自定义列表代码实例:

nbsp;html>html---有序列表

登录后复制   计算机   用来计算的仪器 … …   显示器   以视觉方式显示信息的装置 … …

效果图:

5.jpg

四、简要介绍css list-style-type属性

list-style-type 属性设置列表项标记的类型。

可能值为:

6.jpg

以上就是html支持的列表标签:无序列表、有序列表和定义列表(介绍)的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2831130.html

(0)
上一篇 2025年3月9日 03:53:21
下一篇 2025年3月9日 03:53:33

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 分享查看页面源代码的四种方法

    前端开发人员在浏览网页时,遇到自己喜欢的网页,总想看看代码是怎么写的,也有些人需要对网页源代码进行修改,那你知道怎么查看一个网页的源代码吗?这篇文章就和大家讲讲如何查看源代码,以及不同浏览器的查看源代码的快捷键。有需要的朋友可以参考一下,希…

    2025年3月9日
    100
  • html之table和select操作(介绍)

    本章给大家带来html之table和select操作(介绍),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 table标签和其它标签不一样,他有属性和方法! table属性:   rows      可以得到table的r…

    编程技术 2025年3月9日
    200
  • html如何给table表单加边框

    本章给大家介绍html如何给table表单加边框。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 table,table tr th, tabl…

    2025年3月9日 编程技术
    200
  • 如何在HTML中引入外部页面(iframe标签法)

    在页面布局时,会将部分外部页面引入到html中,这篇文章就和大家讲讲如何在html中引入外部页面之iframe标签法。有需要的朋友可以参考一下,希望对你有用。 首先,最容易想到的应该是使用iframe,虽然html5废除了frame,但是依…

    编程技术 2025年3月9日
    200
  • 详解html中 position属性用法(四种)

    这篇文章主要介绍了html中 position用法,文中逐一给大家介绍了position的四个属性值,感兴趣的朋友跟随小编一起看看吧 position的四个属性值: 1.relative2.absolute3.fixed4.static 下…

    编程技术 2025年3月9日
    200
  • HTML中两个tabs导航冲突问题的解决方法

    这篇文章主要介绍了html中两个tabs导航冲突问题的解决方法,需要的朋友参考下吧 先来一个问题描述吧: 在同一个页面,两个tabs一个要float:left,一个要flaot:right,就产生了冲突; 原因:没有仔细定位到每个p里面的控…

    2025年3月9日 编程技术
    200
  • HTML如何在两个div标签中间画一条竖线

    最近项目经理交小编一个活儿,需要在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父p。在网上查了相关资料,最终搞定,下面小编给代价分享解决方法,需要的朋友参考下吧 近日在画一个界面的时候,遇到一个需求:在界面当中画一条竖线,且这条竖…

    2025年3月9日
    200
  • HTML实现页面点击下载文件的两种实现方法

    这篇文章主要介绍了html页面点击下载文件的两种实现方法,需要的朋友可以参考下 1.使用标签来完成 点击下载 登录后复制 这样当用户打开浏览器点击链接的时候就会直接下载文件。 但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开…

    编程技术 2025年3月9日
    200
  • html如何去掉超链接下划线?html超链接去掉下划线的方法介绍

    前端网页的开发中总是不可避免会使用到超链接,但是使用超链接时下面都会有一条下划线,这在网页中有时会显得很突兀,不合适也不美观,所以我们就需要将超链接下的这条下划线给去掉,接下来的这篇文章就来给大家介绍html下超链接去掉下划线的方法。有需要…

    2025年3月9日
    200
  • html如何给文本文字添加删除线?两种方法添加删除线(实例)

    相信大家在各大商场网站浏览时,总是会看到某个产品的原价标记是多少,再在原价上添加一个明显的删除线,表明现在做促销,现价又改成了多少,给用户一个直观的差距感,吸引用户购买!那么这样的删除线效果是如何添加到文本文字上的?本章就给大家介绍html…

    2025年3月9日
    200

发表回复

登录后才能评论