HTML 有序列表 字母,HTML之有序列表教程

HTML 有序列表 字母,HTML之有序列表教程HTML之有序列表教程信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值,或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了…

大家好,又见面了,我是你们的朋友全栈君。

HTML之有序列表教程

信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值,或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了。那么还是先来了解一下有序列表的代码形式:

这就是列表的.内容了,这是第一句

这就是列表的内容了,这是第二句

这就是列表的内容了,这是第三句

这就是列表的内容了,这是第四句

这就是列表的内容了,这是第五句

大家看到了其本形式与无序列表的一样,只是在外围标签上名称不同。无序是UL,有序就变成OL了。所不同的是有序列表将会有比无序更多的标签属性。因为是有序的就会涉及顺序的方方面面。

改变开始值

通常情况下浏览器会从阿拉伯数字“1”开始自动有序编号。而事有特殊,当有序列表需要变成两个部分,那么下一部人从头开始编号自然就是不对的了。那么下一部分的编号自然是要根据上一段最后一个编号加1为开始号。这就是说我们需要改变列表的开始值。改变开始值的属性是:”start”,正式的写法是:

这就是列表的内容了,这是第一句

这就是列表的内容了,这是第二句

这就是列表的内容了,这是第三句

这就是列表的内容了,这是第四句

这就是列表的内容了,这是第五句

大家注意到了,上面这段代码是说列表的开始值是从6开始的,那么现在可以试着在一段有序列表中加入这一属性看看是否发生了变化?

改变编号类型

浏览器中默认一般都是阿拉伯数字为列表编号,那么是否可以有别的类型呢?有,属性为“type”,不过提供的类型不多,只有五种:

类型值 生成样式 序列举例 A 大写字母 A、B、C、D、E a 小写字母 a、b、c、c、e I 大写罗马数字 I、II、III、IV、V i 小写罗马数字 i、ii、iii、iv、v 1 阿拉伯数字 1、2、3、4、5

在代码中的写法应该是:

这就是列表的内容了,这是第一句

这就是列表的内容了,这是第二句

这就是列表的内容了,这是第三句

这就是列表的内容了,这是第四句

这就是列表的内容了,这是第五句

我认为这个类型值大家还是少用为好,因为用CSS一样可以设置这个类型。我一向主张样式方面的事应由样式语言来做。那么除非特殊原因,这个属性还是不用为好。当然无论是CSS1还是CSS2基本上都没考虑中国,在CSS2中已经为提供了日文编号字符,可是还没有中文。我认为在这点上CSS2还是有着缺陷的,至少他没有提供更好的扩展形式。虽然他没提供,但是我们一样可以用我们自己的形式去完成多样化。怎么做呢?请大家先思考,后面有关于列表的样式内容将会讲述我是如何处理的。

【HTML之有序列表教程】相关文章:

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148925.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • UML时序图总结

    UML时序图总结序列图主要用于展示对象之间交互的顺序。  序列图将交互关系表示为一个二维图。纵向是时间轴,时间沿竖线向下延伸。横向轴代表了在协作中各独立对象的类元角色。类元角色用生命线表示。当对象存在时,角色用一条虚线表示,当对象的过程处于激活状态时,生命线是一个双道线。  消息用从一个对象的生命线到另一个对象生命线的箭头表示。箭头以时间顺序在图中从上到下排列。   序列图中涉及的元素:  1. 生命线:

  • Pytest(1)安装与入门[通俗易懂]

    Pytest(1)安装与入门[通俗易懂]pytest介绍pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高。根据pytest的官方网站介绍,它

  • pycharm不显示结果_pycharm界面

    pycharm不显示结果_pycharm界面网上说是什么包问题的就说了。我遇到一个非常奇葩的问题因为你的设置可能是这样每次都在窗口右侧的工具栏那边显示。可能突然心情不佳就不显示了。然后你再把勾去掉即可。你要喜欢再点上也行。转载于:https://www.cnblogs.com/theWinter/p/8320343.html…

  • .ziw文件是什么?如何打开.ziw文件?[通俗易懂]

    .ziw文件是什么?如何打开.ziw文件?[通俗易懂].ziw文件是为知笔记的一种文档格式打开方式:找到为知笔记的官网,下载它的windows安装包即可[缺点:该软件会有一个使用的有效期]打开.ziw文件时,右击选择发送到“为知笔记”,选择相应的文件夹保存即可…

    2022年10月12日
  • Algorithms 普林斯顿算法课程笔记(一)

    Algorithms 普林斯顿算法课程笔记(一)本节将从动态连接性算法(并查集问题的模型)入手,引入算法分析和设计的整体思路和优化方法,为整个课程的引子部分。主要内容包括QuickFind和Quickunion算法,以及这些算法的改进。动态连接性对于连接做如下定义:自反:p连接于自身 对称:若p连接于q,则q连接于p 传递:若p连接q,q连接r那么p连接r我们的算法需要满足上述关于连接的定义。另外,引出了另一个概念…

  • JavaScript 添加一个元素标签[通俗易懂]

    JavaScript 添加一个元素标签[通俗易懂]JavaScript添加一个元素标签文章目录JavaScript添加一个元素标签代码效果代码<!DOCTYPEhtml><html><head><metacharset=”UTF-8″><title>test</title></head><body><divid=”div1″><pid=”p1″>这是一个段落。</p&gt

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号