欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html中的ol标签如何去掉标号呢?ol标签的使用方法总结

发布时间:2019-05-28  编辑:杨雨个人博客网站   点击:   

本篇文章介绍了Htmlol标签是怎么去掉序号标号的,这里还有代码的详细解释,还有介绍了关于Html ol有序列表标签如何更改序号,下文介绍了三种序号,大家也可以自己去想填写怎样的序号。现在来看这篇文章吧

 

一、我们先看看Html中的ol标签是如何去掉标号的呢:

我们都知道Html的ol标签是个有序列表的标签,通常都是以1、2、3、4这样一直持续下去的,有时候你又不想它就这样一直下去,想把这些数字换成别的,比如换成你自己序号啊A、I、i之类的,还比如你不要这些符号了,想把前面的序号给去掉,前面我们先说说如何去掉序号。

让我们先看个完整的代码实例吧

<!doctype Html>
<Html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<ol>
  <li>杨雨个人博客</li>
  <li>百度</li>
  <li>腾讯</li>
</ol>
</body>
</Html>

这是一个基本的ol标签的代码,效果如下图显示:

tuer.png

我们很明显的能看到,这ol标签的序号默认都是123开始的,都是以小写数字做为默认的序号的,那么我们要做的就是要把序号给去掉。

现在给大家看一个已经去掉ol标签序号的代码实例:

<!doctype Html>
<Html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/Css">
ol{
list-style:none;
}
</style>
</head>
<body>
<ol>
  <li>杨雨个人博客</li>
  <li>百度</li>
  <li>腾讯</li>
</ol>
</body>
</Html>
跟上面也差

不多,这里比上面多加了一点层叠样式表Css样式,这个样式,你现在还不需要去理解,这个以后会讲到,现在要做的就是把这个Css样式的代码记住了,这个样式作用就是把当前网页内的所有ol标签内的序号都给取消了,效果如图:

tuyi.png

上面已经没有序号了,很显然我们的实验成功了,虽然用了Css样式,但这只是最简单的样式实例。用这个方法去掉标签是最简单也是最常用的一种方法。

二、现在我们来看看如何更改ol标签中的序号:

这里我们不需要Css样式了,只是最基本的Html的标签中的属性而已。

现在我们介绍这个ol标签中的type属性:type属性定义了ol列表中的序号类型。

接下来我们以“A”、“I”、“i”三种来实验一下:

下面是这个的代码:

<body>
<ol type="A">
  <li>杨雨个人博客</li>
  <li>百度</li>
  <li>腾讯</li>
</ol>
</body>

效果如下图所示:

tusan.png

这个属性规定了ol标签的序号改为以“A”开头的列表形式了,所以显示出来就是这样的。

当这个type属性值等于"a"时也一样,从小写的a开始,abc之类的。

当这个type属性值等于“I”时也一样,来看看效果:

tusi.png

当这个type属性值等于“i”时和等于“I”也差不多。

关于Html ol标签用法的个人总结:

现在我们基本能想到用ol标签去做各种列表了,想要什么序号就改成什么序号,你的列表你说了算。ol有序列表定义的是它能把任何能无限延长的序号都能用上,如果序号都一样的话就和无序列表没区别了。所以还是好好使用有序列表吧。

 

本文地址:http://itbyc.com/web/html5/20787.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1