前面
网页中漂亮的导航, 整齐规范的文章标题列表和图片列表等等. 这些都是离不开 html 里一个重要的元素 ---- 列表, 在 HTML 中有无序列表, 有序列表和定义列表三种类型. 其中, 无序列表应用最为广泛, 下面, 我们一块认识一下 HTML 列表.
列表在文档编辑中也是十分常见的, 我们可以结合 Word 里的列表来对比学习 HTML 的列表元素. 在 Word 中有符号列表, 编号列表, 多级列表. 在 HTML 中也提供了三种类型的列表, 分别是无序列表, 有序列表和定义列表. 无序列表没有先后顺序之分, 类似 Word 中的符号列表, 有序列表用数字或字母作为顺序, 类似 Word 中的编号列表, 注意: 定义列表是不同于 Word 中的多级列表. 简单说来, 定义列表项可分为上下两部分, 上面列出一个项目, 下面是该项目的详细内容.
来个图看下列表是个啥样子!
image
列表标签及样式
无序列表
无序列表以 < ul > 标签开始,</ul > 标签结束, 中间插入若干列表项, 列表项以 < li > 标签开始,</li > 标签结束. 语法格式如下:
- <ul>
- <li > 项目 1</li>
- <li > 项目 2</li>
- <li > 项目 3</li> ......
- </ul>
有序列表
有序列表以 < ol > 标签开始,</ol > 标签结束, 中间插入若干列表项, 列表项以 < li > 标签开始,</li > 标签结束. 语法格式如下:
- <ol>
- <li > 项目 1</li>
- <li > 项目 2</li>
- <li > 项目 3</li> ......
- </ol>
定义列表
定义列表以 < dl > 标签开始,</dl > 标签结束, 中间插入的每个列表项都分为两个部分,<dt> </dt > 里面添加项目名称,<dd> </dd > 里面添加项目内容或描述. 定义列表语法格式如下:
- <dl>
- <dt > 项目名称 </dt>
- <dd > 项目内容 </dd> ......
- </dl>
无序列表和有序列表的列表项前面都有标记, 无序列表的项目前是符号 (实心圆, 空心圆或实心正方形), 有序列表的项目前是编号 (可以是数字, 字母或罗马数字). 我们有两种方式来设置列表项前的符号类型, 一种是直接在 HTML 的列表标签中设置 type 属性, 另一种是用 CSS 的方式, 设置 CSS 属性 list-style-type. 有了 CSS, 在 HTML 中设置 type 属性已经被抛弃了, 推荐使用 CSS 属性 list-style-type 来设置列表项的标记类型.
image
示例代码
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- p{
font-family: 微软雅黑;
- font-size:14pt;
- color:red;
- background-color:gray;
- }
- ol{ /* 设置有序列表的编号为小写罗马数字 */
- list-style-type:lower-roman;
- }
- </style>
- </head>
- <body>
- <p>web 开发教程 (无序列表)</p>
- <!-- 利用 type 属性设置无序列表项目符号为实心正方形 -->
- <ul type="square"><!-- 这种方式已抛弃, 建议使用 CSS 属性 list-style-type-->
- <li>HTML&CSS</li>
- <li>JavaScript</li>
- <li>ASP.NET</li>
- </ul>
- <p>B/S 三层结构 (有序列表)</p>
- <ol><!-- 已在 CSS 中用 list-style-type 属性设置列表项编号为小写罗马数字 -->
- <li > 界面展示层 </li>
- <li > 业务逻辑层 </li>
- <li > 数据操纵层 </li>
- </ol>
- <p>B/S 与 C/S(定义列表)</p>
- <dl>
- <dt>B/S 模式 </dt>
- <dd > 浏览器 / 服务器模式, 只要安装一个浏览器.</dd>
- <dt>C/S 模式 </dt>
- <dd > 客户端 / 服务器模式, 需要安装客户端软件.</dd>
- </dl>
- </body>
- </HTML>
效果如下图所示:
image
注: 这三类列表中, 无序列表使用最为广泛, 常用于导航, 文章标题列表, 图片列表等有规律列表类内容的排版布局. 在 CSS 属性 list-style-type 中, 还可以设置值为 none, 表示去除列表项前的符号.
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <style type="text/css">
- ul{ list-style-type:none; /* 取消项目符号 */ }
- </style>
- </head>
- <body>
- <p>
- 电子产品
- </p>
- <ul>
- <li>
- 显示器
- </li>
- <li>
- 打印机
- </li>
- <li>
- 投影仪
- </li>
- <li>
- 扫描仪
- </li>
- </ul>
- </body>
- </HTML>
自己整理了一份最全前端学习资料, 从最基础的 HTML+CSS+JS [炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有, 送给每一位前端小伙伴. 企鹅裙: 685910553(前端资料分享). 有想学习 Web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入学习.
来源: http://www.jianshu.com/p/ca746353c904