HTML列表知识点
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML列表知识点，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3699字，纯文字阅读大概需要6分钟。
内容图文
HTML列表知识点
1.1列表类型与标记符号
| 列表类型 | 标记符号 | 备注 |
|---|---|---|
| 无序列表 | <ul>……</ul> | 常用 |
| 菜单列表 | <menu>……</menu> | 不常用 |
| 目录列表 | <dir>……</dir> | 不常用 |
| 有序列表 | <ol>……</ol> | 常用 |
| 定义列表 | <dl>……</dl> | 常用 |
1.2无序列表
1.基本语法
<ul type="">
<li type="">项目名称</li>
<li type="">项目名称</li>
…………
</ul>
2.语法说明
ul标记的type属性有三个值
| 属性值 | 说明 |
|---|---|
| disc | 实心圆行 ● |
| circle | 空心圆形○ |
| square | 实心正方形■ |
【例1-2-1】
<!-- 1-2-1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表练习</title>
</head>
<body>
<h4>Disc项目符号列表：</h4>
<ul type="disc">
<li >计算机科学与技术</li>
<li >软件工程</li>
<!-- 定义type属性值为“circle” -->
<li type="circle">移动互联</li>
</ul>
<h4>Circle 项目符号列表</h4>
<ul type="circle">
<li >计算机科学与技术</li>
<!-- 定义type属性值为“square” -->
<li type="square">软件工程</li>
<li >移动互联</li>
</ul>
<h4>Square 项目符号列表</h4>
<ul type="square">
<li >计算机科学与技术</li>
<li >软件工程</li>
<li >移动互联</li>
</ul>
</body>
</html>
3.页面效果
1.3有序列表
1.基本语法
<ol type="" start="">
<li type="" value="n">项目名称</li>
<li type="" value="n">项目名称</li>
……
</ol>
2.属性说明
| 属性 | 值 | 说明 | ||||
|---|---|---|---|---|---|---|
|
|
|
| ||||
|
|
| |||||
|
|
| |||||
|
|
| |||||
|
|
| |||||
|
|
|
| ||||
<!-- 1-3-1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<h4>1数字编号：</h4>
<ol >
<li>计算机科学与技术</li>
<li>软件工程术</li>
<li>移动互联</li>
<li>电子信息</li>
</ol>
<h4>A字母编号：</h4>
<ol type="A">
<li>计算机科学与技术</li>
<li>软件工程术</li>
<li>移动互联</li>
<li>电子信息</li>
</ol>
<h4>aI混合编号</h4>
<ol type="a">
<li>计算机科学与技术</li>
<li type="I" value="5">软件工程术</li>
<li>移动互联</li>
<li>电子信息</li>
<li>大数据</li>
<li>网络安全</li>
</ol>
</body>
</html>
3.页面效果
1.4列表嵌套
列表嵌套不能交叉嵌套！！！
【例1-4-1】
<!-- 1-4-1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表和无序列表嵌套</title>
</head>
<body>
<h4>小逯工作室出版社图书分类</h4>
<ol type="1">
<li><h4>计算机与电子信息</h4>
<ol type="A">
<li>数据库</li>
<li>电子信息</li>
<li>计算机组成原理</li>
<li>计算机基础
<ul type="disc">
<li>计算机文化基础</li>
<li>公共基础</li>
<li>软件技术基础</li>
<li>计算机导论</li>
<li>计算思维</li>
</ul>
</li>
</ol>
</li>
<li><h4>理工</h4></li>
<li><h4>经管与人文</h4></li>
</ol>
</body>
</html>
3.页面效果
1.5定义列表
1.基本语法
<dl>
<dt>项目1</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dt>项目2</dt>
<dd>描述1</dd>
<dd>描述2</dd>
……
<dt>项目n</dt>
</dl>
2.语法说明
在网页中每一个dt标记可由一个或多个得到标记组成。这两个标记只能在dl标记中使用。定义列表的每一列表项前面既没有符号，也没有编号。
【例1-5-1】
<!-- 1-5-1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>定义列表展示联系人信息</h4>
<dl>
<dt>联系人：</dt>
<dd>姓名：张三</dd>
<dd>电话：100861</dd>
<dd>E-mail:xyz@sina.com</dd>
<dt>联系地址：</dt>
<dd>泰安市小逯工作室</dd>
<dt>邮政编码：</dt>
<dd>27100</dd>
</dl>
</body>
</html>
3.页面效果
1.6综合实例
【例1-6-1】
<!-- 1-6-1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多种列表在网页中使用</title>
</head>
<body>
<h4>小逯商店-便宜实惠，品质保证，服务专业！</h4>
<ul>
<li>麻辣烫/冒菜</li>
<li>美食
<ul>
<li>中餐/家常菜</li>
<li>夏日饮品
<ul>
<li>米芝莲：24元</li>
<li>沪上阿姨：13.90元</li>
<li>哆哆鲜奶吧：30元</li>
<li>黄记玉米汁：80元</li>
</ul>
</li>
</ul>
</li>
<li>创意菜/私房菜</li>
</ul>
<dl>
<dt>联系客服人员：</dt>
<dd>邮箱：xiaolu@sina.com</dd>
<dd>周一至周日：8:00-22:00</dd>
<dt>客服电话 免长途费</dt>
<dd>100831</dd>
</dl>
</body>
</html>
页面效果
整理不易，希望大家来个赞，如有错误希望大家积极指出！
内容总结
以上是互联网集市为您收集整理的HTML列表知识点全部内容，希望文章能够帮你解决HTML列表知识点所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。