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)有极其重要的作用