html 有序列表、无序列表、自定义列表
2019-01-20 本文已影响28人
Devops海洋的渔夫
仅供学习，转载请注明出处
有序列表
HTML有一个特殊元素，用于创建ordered lists（有序列表）, 或数字编号列表。
有序列表以<ol>元素开始，并包含一个或多个<li>元素。
例如：
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
将创建一个包含"Garfield"和"Sylvester"的数字编号列表。
下来定义一个胖子老板售卖货品的有序列表
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>胖子老板店铺：</h3>
<ol>
<li>槟榔10元/包</li>
<li>肥仔可乐水3元/瓶</li>
<li>蓝利群17元/包</li>
<li>芙蓉王26元/包</li>
</ol>
</body>
</html>
浏览器展示如下：
无序列表
HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。
无序列表以<ul>元素开始，并包含一个或多个<li>元素。
例如：
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
将会创建一个带项目符号的"milk"和"cheese"列表。
将上面胖子老板的示例改为无序列表
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>胖子老板店铺：</h3>
<ul>
<li>槟榔10元/包</li>
<li>肥仔可乐水3元/瓶</li>
<li>蓝利群17元/包</li>
<li>芙蓉王26元/包</li>
</ul>
</body>
</html>
浏览器展示如下：
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
实际应用实例：
定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
</body>
</html>
浏览器展示如下：
关注微信公众号，回复【资料】、Python、PHP、JAVA、web，则可获得Python、PHP、JAVA、前端等视频资料。
