XHTML学习笔记 Part4：列表

1. 空格

如果在两个单词中间放置几个连续的空格，默认情况下只会显示一个空格，这种情况成为空格折叠。同样，如果在源文档中开始一个新行，或者放置多个连续的空行，则这些新行将被忽略并被处理为一个空格。对制表符的处理也是如此。

在浏览器中显示文本时，如果到达某行的末尾，则会自动在新行中继续显示文本

<p>This   paragraph shows how   multiple spaces
     between     words are  treated as a single space. 
     This is known as white space collapsing, and  
     the big spaces between    some of the    words will not appear   
     in the  browser.   
     It also demonstrates how the browser will treat multiple carriage returns  
     (new lines) as a single space, too.</p>

 

2. 利用ul元素创建无序列表（在页面上放置项目符号列表）

 

 

3. 有序列表（列表中的每一项的前缀不是项目符号，而是数值（1、2、3），字母（A、B、C、）或罗马数字（ⅰ、ⅱ、ⅲ））

 

  • 使用start属性（逐渐淘汰）改变有序列表中的起始数值
  • 使用type属性（逐渐淘汰）选择有序列表中的数值、字母或罗马数字：
type属性的值　 描述 示例
1 阿拉伯数字（默认值） 1、2、3、4、5
A 大写字母

A、B、C、D、E
a 小写字母 a、b、c、d、e
I 大写罗马数字 Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ
i 小写罗马数字 ⅰ、ⅱ、ⅲ、ⅳ、ⅴ

 

 

 

 

 

 

 

4. 定义列表

定义列表提供术语，并且术语后面跟上简短的文本定义或描述。定义列表包含在<dl>元素中，<dl>元素中包含交替出现的<dt>和<dd>元素。

 5. 列表的嵌套

 

示例：

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5 
 6 <head>
 7 <title>Wrox Recipes-World's Best Scrambled Eggs</title>
 8 </head>
 9 
10 <body>
11 <h1>Wrox Recipes-World's Best Scrambled Eggs</h1>
12 <p>I adapted this recipe from a book called  
13 <cite cite=" http:/www.amazon.com/exec/obidos/tg/detail/-  /0864119917/">Sydney Food</cite> by Bill Grainger. Ever since tasting these eggs on my 1<sup>st</sup> visit to
14 Bill's restaurant in Kings Cross, Sydney, I have been after the recipe. I have since transformed  it into what I really believe are the<em>best</em> scrambled eggs  
15 I have ever tasted.</p> 
16 
17 <p>This recipe is what I call a <q>very special breakfast</q>; just look at the ingredients to see why. It has to be tasted to be believed.</p> 
18 
19 <h2>Ingredients</h2>
20 <p>The following ingredients make one serving:</p> 
21 <ul> 
22 <li>2 eggs</li> 
23 <li>1 tablespoon of butter (10g)</li> 
24 <li>1/3 cup of cream <i>(2 3/4 fl ounces)</i></li> 
25 <li>A pinch of salt</li> 
26 <li>Freshly milled black pepper</li> 
27 <li>3 fresh chives (chopped)</li> 
28 </ul> 
29 
30 <h3>Instructions</h3>
31 <ol> 
32 <li>Whisk eggs, cream, and salt in a bowl.</li> 
33 <li>Melt the butter in a non-stick pan over a high heat <i>(taking care not to burn the butter)</i>.</li> 
34 <li>Pour egg mixture into pan and wait until it starts setting around the edge of the pan (around 20 seconds).</li> 
35 <li>Using a wooden spatula, bring the mixture into the center as if it were an omelet, and let it cook for another 20 seconds.</li> 
36 <li>Fold contents in again, leave for 20 seconds, and repeat until the eggs are only just done.</li> 
37 <li>Grind a light sprinkling of freshly milled pepper over the eggs and blend in some chopped fresh chives.</li> 
38 </ol> 
39 <p>You should only make a <strong>maximum</strong> of two servings per frying pan.</p> 
40 
41 </body>
42 
43 </html>
View Code

结果：

 

posted on 2013-08-15 22:40  LilianChen  阅读(883)  评论(0)  编辑  收藏  举报

导航