HTML5深入浅出教学篇之三

介绍

10年积累的网站建设、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有临猗免费网站建设让你可以放心的选择与我们合作。

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>

#p#

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>

[源码下载]

原文链接：http://www.cnblogs.com/webabcd/archive/2011/09/22/2184684.html

上一篇：Linux中符号的含义探究（linux是什么意思）

下一篇：高手们都用什么牌子的VPS？（香港VPS广受好评的原因有哪些）