如何在HTML中制作列表标记,以及实现列表嵌套

如何在HTML中制作列表标记,以及实现列表嵌套,第1张

方法/步骤

1

无序列表

无序列表中每一个表项的前面是项目符号(如■ 、 ● 等)。

建立无序列表使用<UL>标记和<LI>表项标记。格式为:

<UL type=符号类型>

<LI type=符号类型>第一个列表项

<LI type=符号类型>第二个列表项

……

……

</UL>

2

<LI>标记:是单标记,即一个表项的开始,就是前一个表

项的结束。

Type: 指定每个表项左端的符号类型,可为

disc(实心圆点●)、

circle(空心圆点○)、

square(方块□),

还可以自己设置图片,

如<LI img src=mygraph.gif>默认为实心圆点。

3

例 无序列表标记的使用

<HTML>

<HEAD>

<TITLE>无序列表标记的使用</TITLE>

</HEAD>

<BODY>

<FONT size=4>网络的拓扑结构</FONT>

<UL>

<LI>总线结构

<LI type="circle">星型结构

<LI type="square">环型结构

</UL>

</BODY>

</HTML>

4

有序列表

使用<OL>标记可以建立有序列表,表项的标记仍为LI,格式为:

<OL type=符号类型>

<LI type=符号类型>第一个表项

<LI type=符号类型>第二个表项

……

……

</OL>

5

type属性可设定5种序号:

数字(type=1)、

大写英文字母(type=A)、

小写英文字母(type=a)、

大写罗马字母(type=I)、

小写罗马字母(type=i),

缺省的序号标记是数字。

6

例 有序列表标记的使用

<HTML>

<HEAD>

<TITLE>有序列表标记的使用</TITLE>

</HEAD>

<BODY>

通过拨号网络连接Internet的步骤

<OL>

<LI>安装调制解调器

<LI>创建拨号连接

<LI type="A">设置拨号网络

<LI type="i">设置拨号网络

</OL>

</BODY>

</HTML>

7

列表的嵌套

列表嵌套能将制作的网页页面分割为多层次,比如图书的目录,让人觉得有很强的层次感。有序列表和无序列表不仅能自身嵌套,而且也能互相嵌套。

8

无序列表中套无序列表

9

有序列表中套无序列表

END

注意事项

注意一般不采用无序列表嵌套有序列表

采用无序列表还是有序列表取决于目录的性质与数量

HTML中下拉列表框是一个可选列表。该列表的组成需要有select 以及其中的选项option组成。一个select中可以包含多个选项(option),每个option有一个value属性表示这个option的值,<option>展示文本</option>这对标签中间的“展示文本”是用于在下拉的时候展示的选项,其中的某一个option在选中以后,这个option的value就可以用于和后台交互进行逻辑处理。

以下是一个最简单的DEMO:

<HTML>

<HEAD>

<title>列表框演示</title>

</HEAD>

<BODY>

<form>

<select>

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

</BODY>

</HTML>

var container = document.getElementById('sele')

for (var i = 0i <808i++) {

var opt = document.createElement('option')

opt.value = i + ".gif"

opt.text = i

container.appendChild(opt)

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11764570.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存