网页HTML 有序列表ol 和无序列表 ul

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1759
收藏 0 赞 0 分享

 用于组织数据的列表

学习了这么多控制网页显示的HTML标签,读者可以初步制作纯文章页面了。本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。

文本框:
图4.17  列表元素的结构

 4.4.1  列表的结构组成

HTML的列表元素是一个由列表标签封闭的结构,包含的列表项由<li></li>组成。具体结构如图4.17所示。

 4.4.2  制作无序列表

顾名思义,无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表,其列表标签采用<ul></ul>,编写方法如下:

<ul>

  <li>列表项一</li>

  <li>列表项二</li>

  <li>列表项三</li>

  <li>列表项四</li>

  <li>列表项五</li>

</ul>

 4.4.3  制作有序列表

顾名思义,有序列表就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的序列编号,如1、2、3或a、b、c等。在D:\web\目录下创建网页文件,命名为ul_ol.htm,编写代码如代码4.17所示。

代码4.17  列表的设置:ul_ol.htm

<html>

<head>

  <title>列表的设置</title>

</head>

<body>

<font size="5">

网页前台技术

<ul>

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

  <li>FLASH</li>

</ul>

网页后台的学习

<ol>

  <li>ASP</li>

  <li>ASP.net</li>

  <li>PHP</li>

  <li>CGI</li>

  <li>Ruby</li>

  <li>Python</li>

</ol>

</font>

</body>

</html>

在浏览器地址栏输入http://localhost/ul_ol.htm,浏览效果如图4.18所示。

图4.18  列表的设置

更多精彩内容其他人还在看

超链接的宽度和高度直接设置不起作用的解决方法

这篇文章主要介绍了超链接的宽度和高度直接设置不起作用的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

html下拉菜单提交后保留选中值而不返回默认值

这篇文章主要介绍了html下拉菜单提交后如何保留选中值而不返回默认值,方法虽简单,但比较实用,需要的朋友可以参考下
收藏 0 赞 0 分享

html用style添加属性示例

这篇文章主要介绍了html用style添加属性的写法,比较实用,有需要的朋友可以参考下
收藏 0 赞 0 分享

HTML元素设置焦点的方法

HTML元素设置焦点,大都是采用js的focus方法来进行设置,下面有个示例,大家可以参考下
收藏 0 赞 0 分享

html用title属性实现鼠标悬停显示文字

实现鼠标悬停显示文字,html中使用title属性就可实现显示文字的效果,这个属性还是比较实用的,需要的朋友可以参考下
收藏 0 赞 0 分享

html 用超链接打开新窗口其可控制窗口属性

这篇文章主要介绍了html如何用超链接打开新窗口其可控制窗口属性,主要使用到js的window.open方法,感兴趣的朋友可以看看哦
收藏 0 赞 0 分享

html 可输入下拉菜单的实现方法

可输入下拉菜单,不可思议是不是, 本例通过一些方法实现这个不可能的事情,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

a标签href属性与onclick事件使用实例

a标签主要用来实现页面跳转,可以通过href属性实现,也可以在onclick事件里实现,下面为大家简要介绍下其具体的使用
收藏 0 赞 0 分享

HTML cellpadding与cellspacing属性图文详解

这篇文章主要介绍了HTML cellpadding与cellspacing属性,有个演示图,相信大家看过之后就知道了,需要的朋友可以参考下
收藏 0 赞 0 分享

input输入框中的光标大小显示不一致的解决方法

chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部
收藏 0 赞 0 分享
查看更多