1.常见的列表元素:
有序列表,无序列表,定义列表
2.有序列表是指为其中的每个项目编号的列表。例如,有序列表可能是菜谱的一系列步骤,而这些步骤必须按照顺讯完成,也可能是一则法律合同,合同中的每项条文都需要指定一个序号。
3.无序列表是指以点状项目符号(不同于表明顺序的字符)作为开头的列表。
4.定义列表是由一系列术语及其定义组成的列表。
5.使用由<ol>元素来创建有序列表,列表中的每个项目都被置于起始标签<li>和结束标签</li>之间(li代表列表项目)。
6.使用<ul>元素来创建无序列表,列表中的每个项目都被置于起始标签<li >和结束标签</li>之间。
7.定义标签由<dl>元素创建,并且通常包含一系列术语及其定义,在<dl>元素内部,经常会看到成对的<dt>和<dd>元素,<dt>元素用来包含被定义的术语,<dd>元素用来包含定义。
8.嵌套列表可在<li>元素中放入另一个列表来创建子列表,或者叫嵌套列表。浏览器对嵌套列表的缩进比它的父级列表更深。在嵌套的无序列表中,浏览器通常也会改变项目符号的样式。
示例
<html lang="en"> <head> <meta charset="UTF-8"> <title>定义列表</title> </head> <body> <dl> <dt>Sashimi</dt> <dd>Sliced raw fish that is served with condiment such as shredded daikon radish or ginger root,wasabi and soy sauce </dd> <dt>Scale</dt> <dd>A device used to accurately measure the weight of ingredients</dd> <dd>A technique by which the acales are remove from the skin of a fish</dd> <dt>Scamorze</dt> <dt>Scamorzo</dt> <dd>An Italian cheese usually made from whole cow's milk(although it was traditionally made from buffalo milk)</dd> </dl> </body> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> <ul> <li>1kg King Edward potatoes </li> <li>100ml milk </li> <li>50g salted butter </li> <li>Freshly grated nutmeg </li> <li>Salt and pepper to taste</li> </ul> </body> </html> !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义列表</title> </head> <body> <dl> <dt>Sashimi</dt> <dd>Sliced raw fish that is served with condiment such as shredded daikon radish or ginger root,wasabi and soy sauce </dd> <dt>Scale</dt> <dd>A device used to accurately measure the weight of ingredients</dd> <dd>A technique by which the acales are remove from the skin of a fish</dd> <dt>Scamorze</dt> <dt>Scamorzo</dt> <dd>An Italian cheese usually made from whole cow's milk(although it was traditionally made from buffalo milk)</dd> </dl> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套列表</title> </head> <body> <ul> <li>Mousees</li> <li>Pastries <ul> <li>Croissant</li> <li>Mille-feuille</li> <li>Palmier</li> <li>Profiterole</li> </ul> </li> <li>Tarts</li> </ul> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lists</title> </head> <body> <h1>Scrambled Eggs</h1> <p>Eggs are one of my favourite foods.Here is a recipe for deliciously rich scranbled eggs.</p> <h2>Ingredients</h2> <ul> <li>2 eggs</li> <li>1bts butter</li> <li>2bts cream</li> </ul> <h2>Method</h2> <ol> <li>Melt butter in frying pan over a medium heat</li> <li>Gently mix the eggs and cream in a bowl</li> <li>Once butter has method add cream and eggs</li> <li>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds(as if you are making an omelette) </li> <li>When the eggs are still moist remove from the heat(it will continue to cook on the plate until served)</li> </ol> </body> </html>