千呼万唤 HTML 5 (3) - 内容分组元素
作者：webabcd
介绍
HTML 5: 内容分组元素
- 内容分组元素 - p, hr, pre, blockquote, ul, ol, li, dl, dt, dd, figure, figcaption, div
示例
1、p - 用于定义段落（p 是 paragraph 的缩写）
element/group/p.html
<!doctype html>
<html>
<head>
<title>p</title>
</head>
<body>
<!--
p - 用于定义段落（p 是 paragraph 的缩写）
-->
<p>
段落1
</p>
<p>
段落2
</p>
<p>
段落3
</p>
</body>
</html>
2、hr - 水平线，用于分隔文档的不同部分
element/group/hr.html
<!doctype html>
<html>
<head>
<title>hr</title>
</head>
<body>
<article>
我是一段完整且独立的内容1
</article>
<!--
hr - 水平线，用于分隔文档的不同部分
-->
<hr />
<article>
我是一段完整且独立的内容2
</article>
</body>
</html>
3、pre - 用于定义预定义格式文本（空格和换行都会被保留）
element/group/pre.html
<!doctype html>
<html>
<head>
<title>pre</title>
</head>
<body>
<!--
pre - 用于定义预定义格式文本（空格和换行都会被保留）
-->
<pre>
我是一段预定义格式文本
我的换行和 空格都会被保留
if (true)
write("true");
</pre>
</body>
</html>
4、blockquote - 用于定义一段引用的内容（长内容）
element/group/blockquote.html
<!doctype html>
<html>
<head>
<title>blockquote</title>
</head>
<body>
<!--
blockquote - 用于定义一段引用的内容（长内容）
cite - 引用的内容的来源 url
-->
<blockquote cite="http://webabcd.cnblogs.com/">从 http://webabcd.cnblogs.com 里引用的一段长内容</blockquote>
<!--
区别：
cite 标签用于定义引用内容的标题；blockquote 标签用来定义较长的引用；q 标签用来定义较短的内容
-->
</body>
</html>
5、ul - 用于定义无序列表（ul 是 unorder list 的缩写），li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
element/group/ul_li.html
<!doctype html>
<html>
<head>
<title>ul li</title>
</head>
<body>
<!--
ul - 用于定义无序列表（ul 是 unorder list 的缩写）
li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
-->
<ul>
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ul>
</body>
</html>
6、ol - 用于定义有序列表（ol 是 order list 的缩写），li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
element/group/ol_li.html
<!doctype html>
<html>
<head>
<title>ol li</title>
</head>
<body>
<!--
ol - 用于定义有序列表（ol 是 order list 的缩写）
start - 设置起始数字
reversed - bool 类型。如果为 true，则列表倒序排列，目前还没看到哪款浏览器支持这个属性
type - 设置列表样式类型，比如用想用 “A, B, C, ...” 做排序标识的话则设置 typ="A"。如果用样式表则设置：list-style-type: upper-alpha
li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
-->
<ol>
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ol>
<ol start="10">
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ol>
<ol reversed>
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ol>
<ol type="A">
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ol>
<ol style="list-style-type: upper-alpha">
<li>item01</li>
<li>item02</li>
<li>item03</li>
</ol>
</body>
</html>
7、dl - 定义列表（definition list），dt - 定义列表中的标题（definition title），dd - 对定义列表中的标题的描述（definition description）
element/group/dl_dt_dd.html
<!doctype html>
<html>
<head>
<title>dl dt dd</title>
</head>
<body>
<!--
dl - 定义列表（definition list）
dt - 定义列表中的标题（definition title）
dd - 对定义列表中的标题的描述（definition description）
-->
<dl>
<dt>饮料</dt>
<dd>很甜，很甜，喝了会发胖</dd>
<dt>牛奶</dt>
<dd>好喝，好喝，但是太贵了</dd>
<dt>咖啡</dt>
<dd>太苦，太苦，像感冒冲剂</dd>
</dl>
</body>
</html>
8、figure - 整合相关元素
element/group/figure.html
<!doctype html>
<html>
<head>
<title>figure</title>
</head>
<body>
<!--
figure - 整合相关元素
-->
<figure>
<p>学 html 5 有用吗？</p>
<p>我正在学习 html 5，对它的未来充满信心</p>
</figure>
</body>
</html>
9、figcaption - figure 元素的标题，它应该是 figure 的第一个子元素或最后一个子元素
element/group/figcaption.html
<!doctype html>
<html>
<head>
<title>figcaption</title>
</head>
<body>
<!--
figcaption - figure 元素的标题，它应该是 figure 的第一个子元素或最后一个子元素
-->
<figure>
<figcaption>html 5</figcaption>
<p>学 html 5 有用吗？</p>
<p>我正在学习 html 5，对它的未来充满信心</p>
</figure>
</body>
</html>
10、div - 没有任何语义（div 是 division 的缩写）
element/group/div.html
<!doctype html>
<html>
<head>
<title>div</title>
</head>
<body>
<!--
div - 没有任何语义（div 是 division 的缩写）
div 与 span 的区别：div 是块级（block-level）元素，span 是内联（inline）元素
-->
<div>
我没有任何语义
</div>
</body>
</html>
OK
[源码下载]
