HTML5的世界

一. HTML5的发展背景 

      HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。H5是HTML的第五次重大修改,在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。

      支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器搜狗浏览器QQ浏览器猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

二. HTML5的发展前景

      1.前端开发现在的技术发展十分迅速,浏览器厂商在为争夺市场纷纷大力支持W3C标准及最新技术(HTML5+CSS3等),为前端的飞速发展创造了良好的氛围。

      2.在国际统一标准的支持下。前端具有天生的跨平台开发优势。
      3.HTML5不属于任何一个软件商,而是多国科技巨头共同约定而成的跨平台开发技术,包括Google、苹果等许多厂家与软件商家已经公开支持HTML5。
      4.HTML5具有强劲的发展势头和生命力。连微软的IE9都放下架子,不得不支持国际标准,HTML5的发展势不可挡。
      5.HTML5新增的众多功能让前端开发工作上升了一个大台阶。
三. 应用中的HTML5 
     H5以功能来看一般分为以下几种
    1.活动运营型
           为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测试题等形式,一般需要更强的互动、更高质量、更具话题性的设计来促成用户分享传播。
           
      2.品牌宣传型
           不同于讲究时效性的活动运营页,品牌宣传型H5页面等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言,让用户对品牌留下         深刻印象。
           
      3.产品介绍型
           聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引客户买买买。
           
      4.总结报告型
           类似支付宝的十年账单,各大企业的年终总结现也热衷于用H5技术实现,优秀的互动体验令原本乏味的总结报告有趣生动了起来,就像京东的横屏报告。
             
四. HTML5的使用
    1.新增标签
          (1) <article><div>er rtetgret</div></article>
                定义独立的内容,如评论 文章 博客头目 ,支持全局属性和事件属性。
          (2)<aside></aside>
                定义两栏或者多烂页面的侧边栏,eg:联系我们 公告
                 <p>我的标签.</p>
                <aside>
                    你不知道的世界
                </aside>
          (3)<audio src="">< /audio>
                定义音频内容 
          (4)<canvas></canvas>
                定义图形,图表
               <canvas id="my"></canvas>
            <script type="text/javascript">
                var canvas=document.getElementById('my');
                var ctx=canvas.getContext('2d');
                ctx.fillStyle='#FF0000';
                ctx.fillRect(58,35,100,100);
            </script>
       (5)<command></command>
                 标记定义一个命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。
                 <menu>

                 <command type="command">Click Me!</command>

              </menu>

          (6)<datalist></datalist>
                 定义选项列表,需与 input 元素配合使用,通过input 元素的 list 属性来绑定,用来定义 input 可能的值,datdalist及其选项不会显示。仅仅是合法的输入值列表
                  <input id="Car" list="cars" />
              <datalist id="cars">
              <option value="tw">
              <option value="th">
              <option value="fo">
          (7)<details></details>
                <summary></summary>只能配合<details></details>使用
                 用于描述文档或者文本的一部分
                  <details>
                  <summary>点我啊</summary>
                  <p>该死的懦弱</p>
               </details>
          (8)<embed></embed>
                 定义外部的可交互的内容或插件
          (9)<figure></figure>
                 定义一组媒体内容(图像、图表、照片、代码等)以及它们的标题。如果被删除,则不应对文档流产生影响。
           (10> <footer></footer>
                 定义一个页面或者区域的页脚部分
          (11> <header></header>
                于上一个相反,表示头部区域
          (12)<hgroup></hgroup>
                 定义文件中一个区块的相关信息,使用 <hgroup> 标签对网页或区段(section)的标题进行组合。
          (13)<keygen></keygen>
                 定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
          (14)<nav></nav>
                 定义导航链接。
          (15)<mark></mark>
                  定义有标记的文本,凸显文本
          (16)<meter></meter>
                  定义度量衡,仅限已知最大和最小值得度量
          (17)<output></output>
                  定义不同的输出。eg脚本输出
          (18)<progress></progress>
                   定义任务过程。
          (19)<ruby></ruby>
                  定义注释
          (20)<section></section>
                  定义文档中的节。例如,章节
          (21)<source></source>
                  为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
          (22)<time></time>
                  定义一个日期/时间,该元素能够以机器可读的方式对日期和时间进行编码。
          (23)<video></video>
                   定义视频,比如电影片段或其他视频流。
     
      2.  表单        
          (1)input的常用类型
            
    
原文地址:https://www.cnblogs.com/jaded/p/5520436.html