整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML简单的 <ol> 标签

2 个不同的有序列表实例:

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<ol start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>


浏览器支持

目前大多数浏览器支持 <ol> 标签。


标签定义及使用说明

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。


提示和注释

提示: 如果需要无序列表,请使用 <ul> 标签。

提示:使用 CSS 来定义列表样式。


HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中"start" 和 "type" 属性已经废弃,HTML5不支持该属性。

"reversed" 属性是 HTML5 中的新属性。

在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。


属性

New:HTML5 新属性。

属性描述
compactcompactHTML5中不支持,不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。
reversedNewreversed指定列表倒序(9,8,7...)
startnumberHTML5不支持,不赞成使用。请使用样式取代它。 规定列表中的起始点。
type1AaIi规定列表的类型。不赞成使用。请使用样式代替。

全局属性

<ol> 标签支持全局属性,查看完整属性表 HTML全局属性。


事件属性

<ol> 标签支持所有 HTML事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

.br 强制换行标签

让后面的文字、图片、表格等等,显示在下一行




码海无际<br>码海无际

2.p 换段落标签

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是



<p>码海无际</p><p>码海无际</p>

3.hr 水平分割线标签

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,hr 就是创建横跨网页水平线的标签。




码海无际<hr>码海无际

4.div 分区显示标签

分区显示标签,也称之为层标签,常用来编排一大段的HTML段落,也可以用于格式化表,和 p 很相似,是块状元素,经常嵌套使用。







<div>码海无际</div><div>码海无际</div><div>  <div>码海无际</div>  <div>码海无际</div></div>

5.span 行内标签

用来组合文档中的行内元素,没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。



<span>码海无际</span><span>码海无际</span>

6.pre 预格式化标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。





<pre>  码海无际  码海无际</pre>

7.ul 无序列表标签

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






<ul>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ul>

注意:




 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。 3. 无序列表会带有自己样式属性,但是不推荐使用,一般会用CSS设置。

8.ol 有序列表标签

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

1.格式:





<ol type="符号类型">    <li type="符号类型"></li>    <li type="符号类型"></li></ol>

2.有序列表的type属性值:

  • 1:阿拉伯数字1.2.3等等,默认type属性值
  • A:大小字母A、B、C等等
  • a:小写字母a、b、c等等
  • Ⅰ:大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
  • ⅰ:小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value属性值:

  • 指定一个新的序列数字起始值

4.列表可以进行嵌套







































<ol>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol type="A">  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li type="A">码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li value="6" type="A">码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li>    <ol type="A">      <li>志存高远</li>      <li>志存高远</li>    </ol>  </li>  <li>码海无际</li>  <li>码海无际</li></ol>

9.dl 自定义型列表标签

对列表条目进行简短的说明







<dl>  <dt>软件说明:</dt>  <dd>这是软件说明</dd>  <dt>软件界面:</dt>  <dd>这是软软件界面</dd></dl>

10.center 居中对齐标签

居中对齐


<center>码海无际</center>

无序 HTML 列表:

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>


浏览器支持

所有主流浏览器都支持 <ul> 标签。


标签定义及使用说明

<ul> 标签定义无序列表。

将 <ul> 标签与 <li> 标签一起使用,创建无序列表。


提示和注释

提示:使用 CSS 为列表定义样式。

提示:使用<ol> 标签创建有序列表。


HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,"compact" 和 "type" 属性 已废弃。HTML5 则不支持着两个属性。


属性

属性描述
compactcompactHTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧。
typediscsquarecircleHTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型。

全局属性

<ul> 标签支持 HTML 的全局属性。


事件属性

<ul> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!