用以机构数据信息的列表

学了这么多操纵网页页面显示信息的HTML标识,阅读者能够基本制做纯文章内容网页页面了 。这节学习培训HTML中的列表元素 ,列表方式在网站制作中占据较为大的比例,显示十分齐整形象化,有利于客户了解。在后面的CSS款式学习培训里将很多应用到列表元素的高級功效。

网页HTML 有序列表ol 和无序列表 ul ul 无序列表 ol 有序列表 HTML HTML/Xhtml  第1张

 4.4.1  列表的结构构成

HTML的列表元素是一个由列表标识封闭式的结构 ,包括的列表项由<li></li>构成 。实际结构如图16.17所显示 。

 4.4.2  制做混乱列表

说白了 ,混乱列表便是列表结构中的列表项沒有顺序的列表方式。绝大多数网页页面运用中的列表均选用混乱列表,其列表标识选用<ul></ul>,撰写方式以下:

<ul>

  <li>列表项一</li>

  <li>列表项二</li>

  <li>列表项三</li>

  <li>列表项四</li>

  <li>列表项五</li>

</ul>

网页HTML 有序列表ol 和无序列表 ul ul 无序列表 ol 有序列表 HTML HTML/Xhtml  第2张  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,访问实际效果如图16.18所显示。

网页HTML 有序列表ol 和无序列表 ul ul 无序列表 ol 有序列表 HTML HTML/Xhtml  第3张

图16.18  列表的设定