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

结果:

 

转载于:https://www.cnblogs.com/LilianChen/p/3242722.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值