html5 分组元素

效果

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <Meta charset="utf-8">
   <title>分组元素</title>
<head>
<body>
   <p>这是一个段落</p>///换行
   <p>这是另一个段落</p>

   <div>这是一个段落</div>//比p行间距小,与br间距相同,但是可以设置
   <div>这是一个段落</div>
   <blockquote>这是一个段落</blockquote>///blockquote和p一样具有换行,特点是包含了首尾缩进
   <hr>///添加分行线
   <blockquote>这是另一个段落</blockquote>
   ###
      ###
        ###
      ###
   ###
   <pre>///pre按照排版样式原封不动的展现出来
   ###
      ###
        ###
      ###
   ###
   </pre>

   <ul>///<ul><li>添加无序列表
       <li>张三</li>
       <li>李四</li>
       <li>王五</li>
   </ul>
   <ol>///<ol><li>添加有序列表
       <li>张三</li>
       <li>李四</li>
       <li>王五</li>
   </ol>
   <ol start="5">
       <li>张三</li>
       <li>李四</li>
       <li>王五</li>
   </ol>
   <ol type="a">
       <li>张三</li>
       <li>李四</li>
       <li>王五</li>
   </ol>
   <ol type="a">
       <li>张三</li>
       <li value="5">李四</li>
       <li>王五</li>
   </ol>
   <dl>
      <dt>这是第一份文件</dt>
      <dd>这是第一份文件的详细内容1</dd>
      <dd>这是第一份文件的详细内容2</dd>
      <dt>这是第二份文件</dt>
      <dd>这是第二份文件的详细内容1</dd>
      <dd>这是第二份文件的详细内容2</dd>
   </dl>
   <figsure>
       <figcaption>这是一张图片</figcaption>
       <img src="img.png">
   </figsure>
</body>
<html>

ppt:

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码