[HTML/HTML5]7 使用列表
7.1 在Web页面中使用有序、无序、定义列表
（1）有序列表
有序列表中的每一个列表项之前，都以一个数字或字母作为编号。
<ol>
<li>树莓</li>
<li>草莓</li>
<li>苹果</li>
</ol>
在列表项中并没有包含任何数字编号，这是因为我们已经使用ol元素告诉浏览器这是一个有序列表。当浏览器看到这个有序列表时，就知道在每一个列表项之前放置一个数字作为编号。
有序列表编号的默认类型是阿拉伯数字，但可以使用type属性改变它。type属性可能的取值：
- 1：阿拉伯数字（1,2,3...）
- a：小写字母（a，b，c...）
- A：大写字母（A，B，C...）
- i：小写罗马字母（i，ii，iii...）
- I：大写罗马字母（I，II，III...）
还可以使用start属性来定义有序列表编号的起始数字或字母。默认的起始编号是数字1。要修改起始编号，只需在ol标记中添加start属性。即使type属性可能是其它值，而不是阿拉伯数字，但start属性的值总是一个整数。
<ol type="a" start="3">
<li>树莓</li>
<li>草莓</li>
<li>苹果</li>
</ol>
如果想单独改变某个列表项的编号值——比如，在列表中想使用字母g对第三个列表项进行编号，只需在该列表项的li标记中调价value属性即可。与start属性一样，value属性的值也总是一个整数。
<ol type="a" start="3">
<li>树莓</li>
<li>草莓</li>
<li value="8">苹果</li>
</ol>
通过在<ol>中添加reversed属性，还可以完全反转列表项编号的顺序。在这种情况下，列表项的编号将是3,2,1，而不是默认的1,2,3。
<ol reversed>
<li>树莓</li>
<li>草莓</li>
<li>苹果</li>
</ol>
（2）无序列表
除了在无序列表中不使用数字或字母作列表项的编号之外，无序列表与有序列表非常类似。无序列表中并不依赖列表项的顺序来表示重要性，无序列表在每一个列表项之前放置一个项目符号。
<ul>
<li>树莓</li>
<li>草莓</li>
<li>苹果</li>
</ul>
在无序列表中，依然使用li元素来标识列表中的每一个列表项，无序列表使用ul元素进行标识，而不是ol元素。除此之外，用于创建无序列表和有序列表的代码相同。
（3）定义列表
在HTML中还可以创建第三种表，称为定义列表。顾名思义，定义列表用于显示术语及其定义。使用dl元素来创建定义列表，使用dt元素来包含定义术语，使用dd元素来包含实际的定义数据。
<dl>
<dt>W3C</dt>
<dd>The World Wide Web Consortium was created in 1994 to develop standards and protocols for the World Wide Web.</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language is the authoring language used to create documents for the World Wide Web.</dd>
</dl>
7.2 在Web页面中组合并嵌套多种类型的列表
在一个列表中还可以嵌套另一个列表，甚至在一种类型的列表中也可以嵌套另一种类型的列表。在一个列表中包含另一个列表，就是嵌套（nesting）的列表。
<ol type="I">
<li>Introduction</li>
<li>Part I
<ol type="A">
<li>Dexcription</li>
<li>Example</li>
<ol type="1">
<li>Reference One</li>
<li>Reference Two</li>
</ol>
</ol>
</li>
<li>Part 2</li>
<li>Summary</li>
</ol>
7.3 定义列表样式
7.3.1 定制项目符号
格式化列表时，有三个属性特别有用，这三个属性只能用于格式化列表，而不能用于其它HTML元素：
- list-style-img：将列表项之前的项目符号修改为指定的图片（可能的取值：url）
- list-style-position：标识列表项中文本行的缩进方式（可能的取值：inside、outside）
- list-style-type：改变每一个列表项之前的项目编号或所使用的字符（可能的取值：none、disc、circle、square、decimal...）
<ol type="1">
<li style="list-style-position: inside;">Reference One</li>
<li style="list-style-type: square;">Reference Two</li>
</ol>
7.3.2 定制间距
对于列表，margin属性和padding属性尤为重要，margin属性将影响整个列表项四周的间距，而padding属性将影响该列表四周的间距。
当在ul或ol标记中添加margin属性时，margin属性将影响整个列表四围的间距。但是当将其用于li标记时，margin属性将影响每一个列表项四围的间距。
padding属性用于控制列表项中文本四围与列表项边界之间的缓冲间距。
7.3.3 定制整个列表的布局
（1）垂直导航
改变列表的布局，最常见的原因就是将列表作为一个导航栏（navigation bar）使用。
<!DOCTYPE html>
<html>
<head>
<title>Vertical Nav</title>
<meta charset="utf-8">
<style type="text/css">
body{
font-family: '微软雅黑';
font-size: 20px;
}
#navlist{
border-bottom: 3px solid #ccc;
width: 350px;
padding-left: 0px;
margin-left: 0px;
}
#navlist li{
border-top: 2px solid #666;
margin: 0;
line-height: 200%;
}
#navlist li a{
color: #900;
padding-left: 15px;
text-decoration: none;
display: block;
}
#navlist li a:hover{
color: #fff;
background-color: #333;
}
.active{
background-color: #900;
color: #fff;
padding-left: 15px;
}
</style>
</head>
<body>
<ul id="navlist">
<li class="active">Home</li>
<li><a href="">School Calendar</a></li>
<li><a href="">School Day Weather</a></li>
<li><a href="">Class Notes and Supply Lists</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">School Profile</a></li>
<li><a href="">Bus Schedules</a></li>
</ul>
</body>
</html>
（2）水平导航
默认情况下列表在页面上以垂直方式显示，其原因在于在HTML中列表是一个块级元素，块级元素将自动填充可用空间。只需使用display：inline样式属性设置，将列表定义为一个内联元素，而不是一个块级元素，就可以让列表以水平方式显示。
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Nav</title>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: '微软雅黑';
font-size: 20px;
}
#navlist li {
list-style-type: none;
display: inline;
width: 200px;
}
#navlist li a {
color: #fff;
background-color: #900;
padding: .2em .4em;
text-decoration: none; }
#navlist li a:hover {
color: #fff;
background-color: #333;
}
.active {
border: 1px solid #900;
color: #000;
padding: .2em 1em;
}
</style>
</head>
<body>
<ul id="navlist">
<li class="active">Home</li>
<li><a href="">About Usss</a></li>
<li><a href="">Services</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</body>
</html>
[HTML/HTML5]7 使用列表的更多相关文章
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- Mozilla对HTML5规范支持列表
翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定 ...
- HTML5中 HTML列表／块／布局 韩俊强的博客
从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 1.HTML列表 1.有序 2.无序 3.有序star属性 4.有序无序列表 代码: ...
- HTML5 第二章 列表和表格和媒体元素
列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...
- 50个最受网友欢迎的HTML5资源下载列表
完整附件下载地址:http://down.51cto.com/data/413867 附件预览: HTML 5游戏源码精选(共含9个游戏源码) http://down.51cto.com/zt/227 ...
- HTML5自学之列表
第5章. 网页列表与段落设计网页列表与段落是网页中的主要也是最常用的元素,其中,网页列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷的获得相应信息.网页 ...
- css3 html5 手机设备 列表的弹回和加速移动
<style type="text/css"> * { margin: 0; padding: 0; } .min { width: 350px; height: 40 ...
- 【转】39个让你受益的HTML5教程
闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...
- 39个让你受益的HTML5教程
1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...
随机推荐
- python学习笔记之基础二（第二天）
1.编码转换介绍 unicode是最底层.最纯的,会根据终端的编码进行转化展示 一般硬盘存储或传输为utf-8(因为省空间.省带宽),读入内存中为unicode,二者如何转换 a = ' ...
- 技术之余。。。电吉他自弹 魂斗罗 solo
测试一下 ---恢复内容开始--- ---恢复内容结束---
- ubuntu安装cpu版caffe
最近在笔记本上配置了ubuntu14.04,并配置了caffe,整个过程大概花了2个小时. 希望在安装时能给大家一个启发,这里配置的是无gpu版的,因为我的笔记本时核心显卡,配置gpu版的要编译cud ...
- JBOSS服务器的安装及配置
1 安装jdk(jdk-1_5_0_05-windows-i586-p.exe)2 配置jdk环境 安装完成后还需要配置运行时环境:右键点击"我的电脑"->"属性& ...
- Django基础
一.路由系统 1.静态路由 from app01 import views urlpatterns = [ #url(r'^admin/', admin.site.urls), url(r'^home ...
- solr 4.6的安装配置
从网上看了很多资料,很多都是老的.自己也算是结合着弄出来了. 1.下载的准备工作 tomcat8.solr4.6 具体的下载自己去找去吧.或者后期我在提供. 2.开始配置 tomcat路径:E:\ ...
- EF的性能改善和思考
EF是个工具,用的好了性能就会很好,用的不好性能就会有很大损失. 先从EF的设计思想来讲解 EF的初衷是根据缓存中的实体对象,以及实体对象的状态(删除.更新.添加)来对数据库进行操作,这些实体对象.以 ...
- QQ模拟自动登录实现
QQ模拟自动登录实现 本篇文章主要介绍"QQ模拟自动登录实现(带验证码)",主要涉及到java 实现QQ自动登录(带验证码)方面的内容,对于java 实现QQ自动登录(带验证码)感 ...
- 【Normal Form】数据库表结构设计所遵从的范式
参考的优秀文章 数据库(第一范式,第二范式,第三范式) 数据库设计是件严肃.关键的事儿,一毕业,加入一个大型的行业项目,那儿的前辈资深工程师,就给我灌输数据库如何关键.神圣.深不可测的观念,所以,我一 ...
- Python,Jupyter Notebook，IPython快速安装教程
0.安装环境 Windows10,Python3.5.1,IPython,jupyter notebook,and other functionality 官方安装文档Linux版3.x 官方安装文档 ...