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

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

一、html无序列表

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

html无序列表始于

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

基本语法:

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

  • 项目1
  • 项目2
  • 项目3

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

1.png

html无序列表代码实例:

html---无序列表
  • 默认的无序列表
  • 默认的无序列表
  • 默认的无序列表
  • 添加circle属性
  • 添加circle属性
  • 添加circle属性
  • 添加square属性
  • 添加square属性
  • 添加square属性

效果图:

1.jpg

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

二、html有序列表

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

html有序列表始于

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

基本语法:

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

  1. 项目1
  2. 项目2
  3. 项目3

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

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

有序列表type类型有:

2.png

html有序列表代码实例:

html---有序列表
  1. 默认的有序列表
  2. 默认的有序列表
  3. 默认的有序列表
  1. 第1项
  2. 第2项
  3. 第3项
  4. 第4项
  1. 第1项
  2. 第2项
  3. 第3项

效果图:

4.jpg

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

三、html自定义列表

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

html自定义列表以

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

基本语法:

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

名词1
名词1解释1
名词1解释2
名词2
名词2解释1
名词2解释2

html自定义列表代码实例:

html---有序列表
计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

效果图:

5.jpg

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

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

可能值为:

6.jpg

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:47:59
下一篇 2025年12月21日 18:48:04

相关推荐

  • html之table和select操作(介绍)

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

    好文分享 2025年12月21日
    000
  • 图文详解标签中alt属性和title属性的区别

    在页面布局时,必然会用到图片,说到图片,大家对于img标签的alt属性和title属性应该不陌生,那你知道两者在什么情况下使用吗?这篇文章就和大家讲讲img标签中alt属性和title属性的区别。感兴趣的朋友继续往下看吧。 alt属性和title属性的相同点和区别 相同之处:它们都会出现一个小浮层,…

    2025年12月21日
    000
  • html中的meta标签是什么?meta标签的属性介绍

    本章给大家介绍html中的meta标签是什么?meta标签的属性介绍。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 什么是meta标签?        meta标签是html标记head区的一个关键标签,它位于HTML文档的 和之间(有些也不是在和之间)。它提供的信息虽然用户不可见…

    2025年12月21日
    000
  • html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)

    在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意。本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例)。通过单选框代码和复选框代码实例,实现单选框样式和多选框样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、选择框种类与语法…

    2025年12月21日
    000
  • 如何实现网页版别踩白块的游戏 (代码示例)

    本篇文章给大家带来的内容是如何使用如何实现网页版别踩白块的游戏 (代码示例) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 自己最近一直想做个小项目,但是自己代码水平太烂了,做不了大系统,索性利用毕生所学写个小游戏,哈哈哈别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一…

    2025年12月21日
    000
  • html中图片显示方式—–img与background的区别

    本章给大家介绍html中图片显示方式—–img与background的区别,让大家可以了解在html中让图片显示的两种方法的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、从解析机制看 img属于html标签,background是css方法。一个页…

    好文分享 2025年12月21日
    000
  • 如何区分HTML和XHTML?HTML和XHTML的区别在哪?

    本章给大家介绍如何区分html和xhtml?html和xhtml的区别在哪?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 什么是XHTML? XHTML是用XML语言重写了HTML,也可以理解为XHTML是HTML的过渡语言,它比HTML语言更严谨,基本语言都还是沿用HTML的标签…

    好文分享 2025年12月21日
    000
  • canvas 学习 3—画坐标系

    无论您是新手,还是老手,本教程都值得一读。 网格#c1{border:1px solid black;}window.onload = function(){var oCanvas = document.getElementById(‘c1’)var gd = oCanvas.getContext(…

    2025年12月21日
    000
  • Go元素的关键字所在–chan通道

    html validate是指html验证。它是通过与标准html规则进行比较的方式,分析html文档、标记出错误和非标准代码的处理过程。web页面使用html进行渲染,而html本身采用了html规范作为其规则和标准。通过验证html代码穿越多重浏览器标准! chan chan又称之为通道,形式类…

    好文分享 2025年12月21日
    000
  • 前端开发中要如何注释语句?注释的三种方法(介绍)

    在前端开发中,往往为了一些原因(比如:代码说明,标注等等),需要用到注释语句。那么到底要怎样注释注释语句,注释语句的一些注意事项是什么?本章给大家带来前端开发中要如何注释语句?注释的三种方法(介绍)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、HTML 标签  1.定义: 注…

    2025年12月21日
    000
  • html5与传统html的区别,有哪些新增的和废除的元素?

    这篇文章围绕html展开,主要讲了html5与传统html的区别,以及一些html5新增的元素和废除的元素,有需要的小伙伴可以参考一下,希望对你有帮助。 一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: 1、HTML5的文件扩展符(.html或.htm…

    好文分享 2025年12月21日
    000
  • html中big标签如何使用?html big标签的使用实例

    html中的big标签的使用情况,big标签都知道是一个基础的放大标签,但是我们都在什么元素中加过big标签呢,今天这篇文章讲述了在几个元素中加big标签的详情,现在就开始阅读本篇文章吧 首先我们需要知道html big标签的使用说明: HTML big标签是定义比普通文本大一点的标签,我们在很多时…

    2025年12月21日
    000
  • HTML段落元素中怎么设置空格?HTML空格的设置总结

    html汇总的段落元素想要留点空格,但是直接打空格符号肯定是行不通的,因为浏览器只会显示一个空格,不管你点多少空格都是一样,但是今天的这个空格符 能或许能帮你这些忙,最后还有三个空格符的排名情况。让我们一起来看这篇文章吧 首先我们先看看html段落元素中是怎么设置空格的: 大家都知道在HTML一个段…

    2025年12月21日
    000
  • html中的锚点和页面跳转

    一、页面内跳转的锚点设置页面内的跳转需要两步:方法一:①:设置一个锚点链接去找喵星人;(注意:href属性的属性值最前面要加#)②:在页面中需要的位置设置锚点;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容方法二:①:同方法…

    2025年12月21日
    000
  • 图片懒加载是什么意思?图片懒加载的实现方法

    本篇文章给大家带来的内容是关于图片懒加载是什么意思?图片懒加载的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。其选择的重要的部分先加载,次要的部分需要的时候再加载。比如一个电商网站,首屏通常有很多的数据,…

    2025年12月21日
    000
  • 浏览器中5种常用的事件解析

    本篇文章给大家带来的内容是关于浏览器中常用的事件解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件。input 事件的一个特点,就是会…

    好文分享 2025年12月21日
    000
  • 深入理解HTML中label的作用和使用方法(附代码)

    在工作中经常会用到表单布局,在表单布局中会遇到label标签,有很多新手在学习中可能会忽视了label标签,也有些人对label标签一知半解,那接下来就和大家聊聊label标签是什么意思?label标签什么用处? 在表单布局中会遇到label标签的使用,其实label没有任何样式效果,有触发对应表单…

    2025年12月21日
    000
  • html small标签的如何使用?HTML small标签的用法总结

    html中不使用css样式来使文本变小,很多人都忘了这一种元素,small标签它的功能就是能在大部分元素中使用,并让被small标签选中的文本比正常的文本小一个字号,这就是small标签,接下来我们看看下面这篇关于small标签使用实例的文章吧 首先我们来看一个HTML small标签使用的实例: …

    2025年12月21日
    000
  • html怎样设置背景颜色?HTML背景颜色代码详细分析

    本篇文章使用了html的代码和css样式的代码为大家展示了如何设置html的背景颜色,后面还有如何设置背景图片的介绍。希望对大家有所帮助,现在我们一起来看这篇文章吧 首先我们先来看看关于HTML设置背景颜色: 我们首先设置一个背景颜色,把背景颜色设在body标签中我们来看看效果: PHP中文网这是P…

    2025年12月21日 好文分享
    000
  • 一篇文章让你看懂HTML基本规则和网页结构

    如果你不致力于成为美工的话,那么作为开发人员,可以读懂html、必要时能进行简单修改即可。下面跟着我的思路,保证一篇文让你看懂html,当然,再看的过程中,最好自己动手试试,这样理解就更深了。 1、html基本规则 我的网页………………………..…………………. 几乎所有的网页都是按照这个格式来的,…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信