html的有序列表和无序列表简单介绍

html的有序列表和无序列表简单介绍:

本章节将会简单一下有序列表和无序列表的一些简单用法,希望能够给需要的朋友带来一定的帮助。

一.有序列表:

使用<ol>标签就可以定义一个有序列表,之所以称其为有序列表,就是因为可以使列表具有排序功能。

利用<ol>的type属性就可以实现有序排序功能。

type属性值:

1表示以 1,2,3,4 来表示。

a 表示以 a,b,c,d 来表示。

A 表示以 A,B,C,D 来表示。

i 表示以 i,ii ,iii 来表示。

I 表示以 I,II,III来表示。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
</head>
<body>
<ol type="1" start="5">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="a">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="A">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="i">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="I">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
</body>
</html>

二.无序列表:

无序列表恰好和有序列表相对应,在列表的前面没有表示顺序的序号。

使用<ul> 标签既可以定义一个无序列表。

使用type属性可以定义列表前面的符号,属性值如下:

dise:实心圆(默认值)。

circle:空心圆。

square:实心方块。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
</head>
<body>
<ul type="dise">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
<ul type="circle">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
<ul type="square">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
</body>
</html>

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4143.html

最原始地址是:http://www.softwhy.com/

时间: 2024-10-09 17:13:45

html的有序列表和无序列表简单介绍的相关文章

前端学习 -- Css -- 有序列表和无序列表

列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项 通过type属性可以修改无序列表的项目符号 可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号我们一般都不使用!! 如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置 ul和li

有序列表与无序列表应用示例

<!--程序 ch02_3.html --> <html> <head> <title>有序列表与无序列表</title></head> <body> <b>班级新闻</b> <ul type="disc"> <li>最新课程表</li> <li>关于普通话考试的通知</li> <li>div+css 高级应

HTML学习之有序列表、无序列表和自定义列表

列表分成三种类型:有序列表.无序列表和自定义列表. 有序列表使用编号来记录项目的顺序 无序列表使用项目符号来记录无序的项目 自定义列表它由两个部分组成:定义条件和定义描述. 有序列表: <OL  type="编号样式" start="编号起始值"> <LI>项目一</LI> <LI>项目二</LI> .... </OL> type 1 阿拉伯数字 a英文小写 A英文大写 i罗马小写数字 I罗马大

html有序列表与无序列表自定义列表

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title>列表标签</title> </head> <!--有序列表与无序列表自定义列表--> <body

有序列表和无序列表

无序列表 由<ul>和<li>组成 <ul type=""> <li>XX</li> </ul> disc=实体圆心 ● square=实体方心 ■ circlc=空心圆 ○ 有序列表 由<ol>和<li>组成 <ol type=""> <li>XXXX</li> </ol> 1为默认值也可输入1 A i I

列表标签-无序列表

无序列表: <ul> <li>列表项</li> <li>列表项</li> ...... </ul> type属性值: disc 圆点 square 正方形 circle 空心圆 原文地址:https://www.cnblogs.com/hugegege/p/9438903.html

python 基础-----数字,字符串,列表,字典类型简单介绍

一.第一个python小程序 首先我们要知道python创立的初衷是:Python崇尚优美.清晰.简单. 所以python比起其他的语言需要的工作量少了一半都不止,比如和现在一直霸占语言排行榜  榜首的Java老大哥相比: public class HelloWorld:{ public static void main(String [] args) { system.out.print("hello world") } } 而伟大的python 只需要那么神奇的一行: print(

浏览器兼容性之无序列表dl

浏览器兼容性之无序列表dl 无序列表的一些特定的css属性有list-style-type,list-style-position,和list-style-image.这些属性设置了列表项目符号的类型,标记的位置,以及使用图片代替标记.这三个属性可以使用list-style进行合并缩写. 标记list-style-type,在不同的浏览器中大小不和位置的渲染也是有差异的,故很少使用.list-style-image属性可以给无序列表一个自定义的独一无二的表现,不幸的是,在IE下使用此方法添加项目

HTML简单介绍及举例

超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也可用来在一定程度上描写叙述文档的外观和语义.它是通向WEB技术世界的钥匙. 1.HTML简单介绍:HTML是用来描写叙述网页的一种语言.它不是一种编程语言,而是一种标记语言(markup language),标记语言是一套标记标签(markup tag),它使用标记标签来描写叙述网页. HTML标记标签通常被