最新のHTML標準規格HTML5の概要

HTML5 は登場してからかなり経ちますが、私はフロントエンドの人間ではないので、このことしか知りません。そのため、具体的な概念は少し曖昧です (実際には一連の規格と仕様です)。去年、HTML5 についての簡単なまとめを作成したので、忘れないように整理してブログに載せておきます。間違いがあれば修正してください。私はフロントエンドの初心者です。

次のような目次から始めましょう:

•HTML5 とは

•HTML5 開発の歴史

•HTML5 の詳細な紹介

•ビデオ/オーディオ、キャンバスと SVG、編集可能なコンテンツとドラッグ アンド ドロップ、Web ストレージ、Web ワーカー、サーバー送信イベント、フォームの機能強化、セマンティック マークアップ、その他の HTML5 標準

•HTML5 のサンプル分析

•フライングバード

•ヒストグラム

•HTML5 開発の見通し

•参考リソース

HTML5 とは何ですか

簡単に言えば、HTML5 は、最新のリッチ Web コンテンツを開発するために使用される一連の関連テクノロジーの総称です。

HTML5 ≈ HTML5 コア仕様 + CSS 3 + JavaScript; HTML5 と CSS は主にインターフェイスを担当し、JavaScript はロジック処理を担当します




目的: リッチ インターネット アプリケーション (RIA) の影響を軽減するため。 Flash、Silverpght、Java Applet などに依存し、ネットワーク アプリケーションを効果的に強化できる API をさらに提供します。

下の図は、いくつかのグラフ、ビデオ、ゲームなどを含む典型的な RIA (リッチ インターネット アプリケーション) Web ページを示しています。グループ) は、HTML5 の前身であるドラフト Web アプリケーション 1.0 を提案しました

2007 年、W3C は HTML5 を標準として採用することに同意し、新しい HTML 作業チームを設立しました
2014 年 10 月 28 日、W3C は HTML5.0 推奨を正式にリリースしました。標準;

2016 年末までに HTML 5.1 をリリースする予定です 将来、HTML5.1 の発表後、ワーキング グループは HTML5.1 の手順を繰り返し、新しい HTML5.2 を作成します。機能の改善と充実を続けます。

次の表は、HTML 5 標準の進化を示しています:






2012 計画



2012

ヒント:

Q: WHATWG とは何ですか?

A: Mozilla Foundation と Opera Software は 2004 年 6 月に W3C に意見書を提出しましたが、拒否されました。Mozilla、Opera、Apple は独自の WHATWG (Web Hypertext Technology Working Group) を設立し、Web Apps 1.0 も提案しました。

Q: HTML5.0 と HTML5.1 の違いは何ですか?

A: 5.1 は 5.0 のスーパーセットです。5.0 には、安定した機能と、5.0 で省略されたその他の新機能が含まれています。目的: HTML5 をできるだけ早く完成させるために、W3C はいくつかの不安定な機能を放棄します。物議を醸す要素は、後続のバージョン 5.1 で検討されます。

HTML5 は HTML5 のビデオとオーディオを詳しく紹介します

これまで、Web ページ上でビデオとオーディオを表示するための標準はまだ存在せず、ほとんどはプラグイン (Flash など) を介して表示されます

; HTML5 では、次のコードに示すように、ビデオ タグとオーディオ タグを使用して、プラグインに依存せずにオーディオとビデオを再生できます。

XML/HTML コード コンテンツをクリップボードにコピーします

<video width="320" height="240" controls="controls">  
  <source src="/i/movie.ogg" type="video/ogg">  
  <source src="/i/movie.mp4" type="video/mp4">  
  Your browser does not support the video tag.   
</video>

XML /HTML コード コンテンツをクリップボードにコピーします。 ボード

<audio controls="controls">  
  <source src="/i/song.ogg" type="audio/ogg">  
  <source src="/i/song.mp3" type="audio/mpeg">  
Your browser does not support the audio element.   
</audio>

は次のとおりです。ビデオとオーディオのレンダリングです。メソッド、プロパティ、イベント。 js を使用して、ビデオとオーディオの再生や一時停止などのアクションを動的に制御できます。
2. ビデオおよびオーディオ要素では複数のソース要素が許可されます。ソース要素は異なるファイルをリンクできます。ブラウザは最初に認識された形式を使用します


PS: YouTube はデフォルトで HTML5 プレーヤーを使用します。次のように、公式 Web サイト www.youtube.com にログインしてソース コードを表示できます。 Canvas & SVG

Canvas


HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に画像を描画し、パス、長方形、円、文字を描画し、画像を追加する複数のメソッドを備えています。

xml/htmlコードは、コンテンツをクリップボードにコピーします

rreee
以下はレンダリングです。

Canvas と SVG の一般的なアプリケーション
Canvas と SVG を使用すると、以下の例に示すように、多くの小さなアプリケーション、特に Canvas を実現できます:




HTML5 編集可能なコンテンツとドラッグ アンド ドロップ

Contenteditable global属性

Contenteditable を使用して Web ページ エディタを実装できます。現在、以下に示すように、多くの Web ページ エディタがこの属性で実装されています。



ドラッグ アンド ドロップ

主なイベント関数: Ondragstart()、Ondragover()、Ondrop();

以下は、p を別の p にドラッグ アンド ドロップするコード例です: JavaScript コードはコンテンツをクリップボードにコピーします

   <canvas id="myCanvas" width="200" height="100" style="border:1px sopd #c3c3c3;">  
    Your browser does not support the canvas element.   
    </canvas>  
    <script type="text/javascript">  
    var c=document.getElementById("myCanvas");   
    var ccxt=c.getContext("2d");   
    cxt.moveTo(10,10);   
    cxt.pneTo(150,50);   
    cxt.pneTo(10,50);   
    cxt.stroke();   
    </script>

JavaScript コードはコンテンツをクリップボードにコピーします

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  
       <polygon points="100,10 40,180 190,60 10,60 160,180"  
       style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />  
    </svg>

<script type="text/javascript">   
    sessionStorage.lastname="Smith";   
    document.write(sessionStorage.lastname);   
    </script>

Tips:
Cookie是不可或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能（JS多线程工作解决方案）。

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

优势：异步执行复杂计算，不影响页面的展示

如下为一个求和的代码示例：

JavaScript Code复制内容到剪贴板

  <script>   
    var w;   
    function startWorker() {   
        if (typeof (Worker) !== "undefined") {   
            if (typeof (w) == "undefined") {   
               w = new Worker("rs/demo_workers.js");   
            }   
            w.onmessage = function(event) {   
               document.getElementById("result").innerHTML = event.data;   
            };   
        } else {   
            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";   
        }   
    }   
    function stopWorker() {   
        w.terminate();   
    }   
    </script>

demo_workers.js文件，其中的postMessage() 方法 ，用于向 HTML 页面传回一段消息。

JavaScript Code复制内容到剪贴板

   var i=0;   
    function timedCount()   
    {   
        i=i+1;   
        postMessage(i);   
        setTimeout("timedCount()",500);   
    }   
    timedCount();

Tips:

1.不能跨域加载JS

2.worker内代码不能访问DOM

HTML 5 服务器发送事件

传统的网页都是浏览器向服务器“查询”数据，但是很多场合，最有效的方式是服务器向浏览器“发送”数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个“通知”，这要比浏览器按时向服务器查询（polpng）更有效率。

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新；

举个例子，如下，其中服务器端使用Java的Struts 2框架，会向浏览器发送服务器最新的时间数据：

服务端代码：

JavaScript Code复制内容到剪贴板

pubpc class SSE extends ActionSupport {   
        private InputStream sseStream;   
        pubpc InputStream getSseStream() {   
            return sseStream;   
        }   
        pubpc String handleSSE() {   
            System.out.println("Inside handleSSE() ");   
            String result = "data: "+new Date().toString() + "\n\n";   
            sseStream = new ByteArrayInputStream(result.getBytes() );   
            System.out.println("Exiting handleSSE() ");   
            return SUCCESS;   
        }   
    }

JavaScript Code复制内容到剪贴板

  <action name="handleSSE" class="pichen.java.html5.test.SSE" method="handleSSE">   
                <result name="success" type="stream">   
                    <param name="contentType">text/event-stream</param>   
                    <param name="inputName">sseStream</param>   
                </result>   
    </action>

客户端代码：

JavaScript Code复制内容到剪贴板

 <p><output id="result">OUTPUT VALUE</output></p>   
    <script>   
    (function(global, window, document) {   
      &#39;use strict&#39;;   
      function main() {   
        window.addEventpstener(&#39;DOMContentLoaded&#39;, contentLoaded);   
      }   
      function contentLoaded() {   
        var result = document.getElementById(&#39;result&#39;);   
        var stream = new EventSource(&#39;handleSSE.action&#39;);   
        stream.onmessage=function(event){   
            var data = event.data+" by onmessage";   
            result.value = data;   
        }   
      }   
      main();   
    })(this, window, window.document);   
    </script>

HTML 5 表单增强功能

新的 Input 类型

•–email
•–url
•–number
•–range
•–Date pickers (date, month, week, time, datetime, datetime-local)
•–search
•–color

下图为各个input元素的效果图：

下图为各个input元素的效果图：



HTML5 的新的表单元素

–datapst

–keygen

–output

下图为datapst的示例：



HTML5 的新的表单属性

–新的 form 属性：

•autocomplete

•Novapdate

–新的 input 属性：

•autocomplete

•autofocus

•form

•height 和 width

•pst

•min, max 和 step

•multiple

•pattern (regexp)

•placeholder

•Required

•form overrides (formaction, formenctype, formmethod, formnovapdate, formtarget)

下表为各个浏览器对表单属性的支持情况：

HTML5 セマンティック タグ

HTML5 では、セマンティック タグを使用して、多数の意味のない p タグを置き換えることができます。このセマンティクス機能は、Web ページの品質とセマンティクスを向上させるだけでなく、以前に CSS または JS 呼び出しに使用されていた class 属性と id 属性を削減します。



その他の HTML 5 標準

HTML5 推奨標準 (W3C 公式 Web サイト推奨標準)

–//m.sbmmt.com/

、または w3school を参照してください

HTML5 完全な新しいタグ

–//m.sbmmt.com/

HTMLグローバルプロパティ

–//m.sbmmt.com/

グローバルイベントプロパティ

–http://www.php .cn/

HTML5 サンプル分析 Flying Bird

Phaser (オープンソースの HTML5 2D ゲーム開発フレームワーク) に基づいて、主に次の 3 つの関数を記述する必要があります:

プリロード関数 (1 回実行):

Loadリソース (背景、写真、その他のリソース)

関数の作成 (1 回実行):

鳥に下向きの重力を与えると、制御不能になったときに自動的に落下します

キーボードスペースイベントを追加し、変更しますスペースが押されたときの鳥の座標

壁イベントを作成します。1.5秒ごとに、壁の列が表示され、左に移動します(ランダムに3ブロックずつ区切られます)

更新関数(フレームごとに実行):

境界から飛び出すかどうかを判断する

壁に当たるかどうかを判断する

レンダリングは次のとおりです:



棒グラフ

主な手順:

キャンバスを使用してグラフィックを描画する

マウスクリックイベントを定義する(クリック対象を識別するためのマウス座標を取得します), $(canvas).on(" cpck",mouseCpck);

マウスホバーイベントを定義します (ホバー対象を識別するためにマウス座標を取得します), $(canvas)。 on("mousemove",mouseMove);

レンダリング:



HTML5 開発の見通し

主要ブラウザによる HTML5 の現在のサポート (フルスコアは 555 ポイント)、//m.sbmmt.com/

一言で言えば、デスクトップブラウザでもモバイルブラウザでも、Google は HTML5 を最も包括的にサポートしています。


主要な企業の行動

– Google、Flash 広告を HTML5 バージョンに自動的に変換すると発表、

– HTML 5 を使用するプレーヤー

– Amazon がすべての Flash 広告を無効化すると発表。 –Tencent、WeChat Moments ゲーム、グリーティング カードまたは招待状、QQ Zone H5 ゲーム&helpp;

–Baidu、ダイレクト アカウント

–Alibaba、UC Browser、モバイル Taobao H5 ゲーム&helpp;




上記は概要です最新の HTML 標準 HTML5 の詳細については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。

-->