[html5/css3] html5页面增强元素 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5增强的页面元素</title>
</head>
<body>

  <article>
     <header>
       <h2>编程语言比较</h2>
       <p>主流编程语言比较</p>
     </header>
     
     <section>
         <article>
            <header>
            <h3>C#</h3>
            </header>
         <p>
         这种语言旨在减少代码，增加复用性，从而提高程序员的创造性。它是面对对象，具有静态类型，有大量的库函数。你能看出它是微软由控制的。但点我不会担心，它不是一个糟糕的语言。它不是很吸引人，也许微软真正想要的就是准确性吧。相比VB这是一个过于激进的改变吧。我能使用它来做的事：
windows编程
游戏开发（大多数是由于微软的强迫而使用它，我认为C/C++更好）
这种语言能做大量的事情：Unity3D, Xamarin, .NET, XNA。
         </p>
         </article>
     </section>
     
     <section>
      <article>
          <header>
             <h3>JAVA</h3>
          </header>
        <p>
        看起来很像是C#，但是他有虚拟机。它是第一个（C#仿照它）面向对象的语言。除了嵌入式设备不行和极其要求性能的地方不行，它几乎什么都能干，web app到游戏。它是许多其他语言的基础，尤其是虚拟机方面。看一个有趣的项目，它是为了教育、数学和艺术的而写的程序。我什么时候要用Java呢：
主要是当你想访问一个非常大的开发商,即你想要别人维护你的软件。
当你需要在尽可能多的硬件上跑你的程序。
        </p>
      </article>
     </section>
     
     <!-- figure 是网页中的一块独立的部分, -->
     <figure>
     <figcaption>
     Javascript
     </figcaption>
     
     <p>2010年代的通用网络的语言。有趣的是,虽然此前被视为一个有缺陷的和功能有限的语言,但现在大量的程序员对其进行了良好的改造,现在已经成为一种伟大的语言。特别是如果你看了它所有的库，你会发现这些库弥补Javascript的设计的缺陷(比如一个模块系统)。
     最后要感谢这一点,现在我们甚至把Javascript用在服务器端,这种前后端的对称式编程给我们带来了美好的生活。</p>
     </figure>
     
     <!-- 
     details 是可以替代javascript的将内容伸缩的方法.
     当点击summary标签时,内容自动伸缩.
     添加open属性，加载内容时自动展开
     
     chrome 支持，Firefox 不支持
      -->
     <details open="open">
       <summary>javascript详细信息</summary>
      <p>有很多研究和努力投入到了改善Javascript的性能、优化Javascript的编译器中。这实际上证明了社区是极其伟大的(如果不是最大的)语言来支持者。有趣的是,你会看到无数的库在做同样的事情,这使得库成为竞争最激烈的领域之一。看Grunt、Gulp等，真是太疯狂了。</p>
      <!-- 
      detail 可以插入其他标签,
      
       -->
       <!-- 插入视频文件 -->
       <video src="1117786.mp4" controls="controls"></video>
       
      <table>
       <tr>
       <td>23</td>
       <td>234</td>
       </tr>
       <tr>
       <td>2345</td>
       <td>345</td>
       </tr>
      </table>
     </details>
     <!-- mark高亮显示内容 -->
     <mark>
     好好学习....
     </mark>
  </article>
  
  <!-- progress 表示任务完成的进度 ,
  根据value值显示进度条..
  -->
  <progress id="p" max="100" value="69">
  </progress>
  
  <!-- meter 表示规定范围内的数量值 -->
  <meter value="500" max="1024" min="0"  optimum="900" low="1" high="1000">
  1000GB
  </meter>
  <!-- 
  网上说IE支持，用ie9测试不支持,可能其他版本支持.
  Firefox 支持,chrome不支持。
   -->
  <command onclick="javascript:alert('command');" >
   command
  </command>
  <!-- 
  start : 设置列表编号从指定的编号开始 ,
  reversed="reversed" :编号翻转 
   -->
  <ol start="1" reversed="reversed">
    <li>HTML</li>
    <li>css</li>
    <li>jQuery</li>
  </ol>
  
  <!-- 名词解释 -->
  <dl>
    <dt>javascript</dt>
    <!-- 
    cite :表示作品的标题
     -->
    <dd>有趣的是,你会看到无数的库在做同样的事情,这使得库成为竞争最激烈的领域之一。<cite>www.baidu.com</cite>看Grunt、Gulp等，真是太疯狂了。</dd>
  </dl>
  
  <small>small表示小字印刷体</small>
   
</body>
</html>

 

posted @ 2015-01-21 16:00  snow__wolf  阅读(318)  评论(0)    收藏  举报