海口北京网站建设北京网站建设公司大全
000、前言
列表是网页常见的一种数据排列方式，在HTMl中列表一共有三种：有序列表、无序列表、定义列表（另外“目录列表dir”和“菜单列表menu”已经在HTML5中被废除了，现在都是使用无序列表ul来替代）
001、有序列表：ol、li
（1）一般使用
- 有序列表有先后之分
- 用ol、li标签配合使用就可以显示有序列表，而且ol标签内部子标签也只能是li，另外也不要直接把文本放在ol里面
- ol即ordered list（有序列表），li即list（列表项）
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><h1>文本标题3</h1></body>
</html>
（2）利用type属性
- 利用type属性可以改变列表项符号
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol type="A"><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><h1>文本标题3</h1></body>
</html>
002、无序列表：ul、li
（1）一般使用
- 无序列表无先后之分
- 用ul、li标签配合使用就可以显示无序列表，而且ul标签内部子标签也只能是li，另外也不要直接把文本放在ul里面
- ul即unordered list（有序列表），li即list（列表项）
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol type="A"><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><ul><li>列表01</li><li>列表02</li><li>列表03</li></ul><h1>文本标题3</h1></body>
</html>
（2）利用type属性
- 利用type属性可以改变列表项符号
（3）深入了解无序列表
实际上的开发工作中无序列表是用的最多的，只要涉及到数据表示，无序列表就几乎无处不在003、定义列表：dl、dt
- 定义列表是一组带有特殊含义的列表，一个列表项中含有“条件”和“列表”两部分
- dl，即definition（定义列表）
- dt，即definition term（定义名词）
- dd，即definition description（定义描述）
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol type="A"><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><ul><li>列表01</li><li>列表02</li><li>列表03</li></ul><h1>文本标题3</h1><dl><dt>HTML</dt><dd>制作网页的标准语言，控制网页的结构</dd><dt>CSS</dt><dd>层叠样式表，控制网页的样式</dd><dt>Javascript</dt><dd>脚本语言，控制网页的行为</dd></dl></body>
</html>
004、HTNL语义化
（1）误区
学习HTML的时候，认为一些标签可以被其他的标签轻易实现而认为这个标签没有用。这是一个很大的误区。HTML不同的标签从显示的角度来看确实可以达到互换的效果，比如使用下面的标签代码代替有序列表：
<div>1、HTML</div>
<div>2、CSS</div>
<div>3、Javascript</div>
（2）语义
但是这违背了HTML的初衷，在HTML中，标签都有自己的语义，一般都是优先使用有语义的标签。比如h1标签，表示的是header1，标记的是一个最高级标题，而div和span是无语义的标签。（span标签是一个行内标签，也叫内嵌标签）
（3）调试
①HTML的标签具有语义的标签，可以方便调试，快速找到有错误的代码，具有可读性
②另外语义还对搜索引擎优化（SEO）有极其重要的作用