HTML5

HTML5 とは何ですか?

HTML5 は次世代の HTML 標準です。

HTML5 は、World Wide Web Consortium (W3C) によって 2014 年 10 月に完成された HTML の最新改訂版です。

HTML5はどのようにして始まったのですか?

HTML5 は、W3C と Web Hypertext Application Technology Working Group を指す WHATWG との協力の成果です。 。

WHATWG は Web フォームとアプリケーションに取り組んでいますが、W3C は XHTML 2.0 に重点を置いています。 2006 年に、両者は協力して新しいバージョンの HTML を作成することにしました。

HTML5 のいくつかの興味深い新機能:

描画用のキャンバス要素

メディア再生用のビデオおよびオーディオ要素

ローカルオフラインストレージのサポートの強化

記事、フッター、ヘッダー、ナビゲーション、セクションなどの新しい特別なコンテンツ要素

カレンダー、日付、時刻、メール、URL、検索などの新しいフォーム コントロール


HTML5 機能

セマンティック機能 (クラス: セマンティック)
HTML5 は、Web ページにより良い意味と構造を与えます。より豊富なタグには RDFa、microdata、microformats のサポートが含まれ、プログラムとユーザーの両方にとってより価値のあるデータ駆動型 Web を構築します。
ローカル ストレージ機能 (クラス: オフライン & ストレージ)
HTML5 に基づいて開発された Web アプリは、HTML5 APP キャッシュとローカル ストレージ機能のおかげで、起動時間の短縮とネットワーク速度の高速化を実現します。インデックス付き DB (html5 ローカル ストレージの最も重要なテクノロジの 1 つ) と API ドキュメント。
デバイス互換性機能 (クラス: DEVICE ACCESS)
地理位置情報機能の API ドキュメントが公開されて以来、HTML5 は Web アプリケーション開発者により多くの機能最適化オプションを提供し、エクスペリエンス機能においてより多くの利点をもたらしました。 HTML5 は、データとアプリケーションにアクセスするための前例のないオープン インターフェイスを提供します。外部アプリケーションをブラウザ内のデータに直接接続できるようにします。たとえば、ビデオやオーディオをマイクやカメラに直接接続できます。
接続機能 (クラス: CONNECTIVITY)
より効果的な接続効率により、ページベースのリアルタイム チャット、より高速な Web ゲーム エクスペリエンス、およびより最適化されたオンライン コミュニケーションが可能になります。 HTML5 には、より効果的なサーバー プッシュ テクノロジがあり、サーバー送信イベントと WebSocket の 2 つの機能は、サーバーがクライアントにデータを「プッシュ」する機能を実現します。
Web マルチメディア機能 (クラス: マルチメディア)
Web ページ上のオーディオ、ビデオ、その他のマルチメディア機能をサポートし、Web サイト独自の APPS、カメラ、オーディオおよびビデオ機能を補完します。
クラス: 3D、グラフィックス、エフェクト
SVG、Canvas、WebGL、CSS3 の 3D 機能に基づいて、ユーザーはブラウザーに表示される素晴らしい視覚効果に驚かれるでしょう。
パフォーマンスと統合機能 (クラス: パフォーマンスと統合)
読み込みを永遠に待つユーザーはいません - HTML5 は、XMLHttpRequest2 などのテクノロジーを通じて、Web アプリケーションや Web サイトが多様な環境でより高速に動作するのに役立ちます。
CSS3 の機能 (クラス: CSS3)
CSS3 は、パフォーマンスとセマンティック構造を犠牲にすることなく、より多くのスタイルと強力な効果を提供します。さらに、Web の Open Font Format (WOFF) も、以前の Web タイポグラフィよりも高い柔軟性と制御を提供します。
この段落を編集 現在、モバイル デバイス上で HTML5 アプリケーションを開発するには 2 つの方法しかありません。すべて HTML5 構文を使用するか、JavaScript エンジンのみを使用するかのいずれかです。
JavaScriptエンジンの構築方法により、モバイルWebゲームの作成が可能になります。インターフェイス層は非常に複雑であるため、UI ツールキットが使用のために予約されています。
純粋な HTML5 モバイル アプリケーションは動作が遅く、エラーが多くなりますが、最適化すると結果は改善されます。このような最適化を積極的に行う人は多くありませんが、試してみることはできます。
HTML5 モバイル アプリケーションの最大の利点は、Web ページ上で直接デバッグおよび変更できることです。ネイティブ アプリケーションの開発者は、HTML5 の効果を実現するために多大な労力を費やす必要があり、コーディング、デバッグ、実行を常に繰り返す必要があります。これは最初に解決しなければならない問題です。
HTML5 移植は非常に簡単ですが、誰もがこれを自動操作にすることを想定しています。


HTML5 <!DOCTYPE>

<!doctype> 宣言は HTML5 ドキュメントの最初の行に配置する必要があります。使用方法は非常に簡単です:

HTML5 の改善点

新しい要素

新しい属性

完全にサポートされている CSS3

ビデオとオーディオ

2D/3D グラフィックス

ローカル ストレージ

ローカル SQL データ

Web アプリケーション

HTML5 マルチメディア

HTML5 を使用すると、Web ページでビデオとオーディオを簡単に再生できます。

HTML5 <video>

HTML5 <audio>

HTML5 アプリケーション

HTML5 を使用して簡単にアプリケーションを開発できます

ローカル データ ストレージ

ローカル ファイルにアクセス

ローカル SQL データ

キャッシュ参照

JavaScript Worker

XHTMLHttpRequest 2

HTML5 グラフィック

HTML5 を使用すると、単純にグラフィックを描画できます。

<canvas> 要素を使用します。

インラインSVGを使用します。

CSS3 2D 変換と CSS3 3D 変換を使用します。

HTML5はCSS3を使用します

新しいセレクター

新しいプロパティ

アニメーション

2D/3D変換

角丸

影効果

ダウンロード可能なフォント

CSS3の詳細については、このサイトを参照してくださいCSS3のチュートリアルです。

HTML5 ブラウザのサポート

Safari、Chrome、Firefox、Opera の最新バージョンは、一部の HTML5 機能をサポートしています。 Internet Explorer 9 は、特定の HTML5 機能をサポートします。

HTML5の利点と欠点

HTML5の利点

1. 使いやすさを向上させ、ユーザーフレンドリーなエクスペリエンスを向上させる

2. 開発者が重要なコンテンツを定義するのに役立つ新しいタグ

3.より多くのマルチメディア要素 (ビデオとオーディオ) をサイトに導入できます

4. FLASH や Silverlight の代替として使用できます

5. ウェブサイトのクローリングとインデックス作成に関しては、非常にフレンドリーです

6モバイルアプリケーションやゲームで広く使用されています。

HTML5の欠点

1. HTML5自体はまだ開発中であるが、それはユーザーアプリケーションにとって最も緊急なニーズではなく、ソフトウェアエコロジーパターンを変えようとするメーカーにとっての戦略的なニーズである。

2. HTML5 の互換性は、主要なブラウザのパフォーマンスによって制限されます。たとえば、Microsoft の IE と Fireforx の間には多くの違いがあります。

3. HTML5 には成熟した完全な開発環境が必要ですが、現在はそれが不足しています。

4. HTML5の機能が急速に増加しているため、ブラウザには効率的なグラフィックエンジンとスクリプトエンジンが必要です。

5. HTML5 には、ユーザーを惹きつけてブラウザをアップグレードし、最終的には HTML5 端末の導入を完了するキラー アプリケーションが必要です。


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5圆角例子</title> <style type="text/css"> body{ background-color: #000000; } div{ width: 100px; height: 100px; margin: 5px; border: 5px solid white; background-color: #efefef; } #dv-all{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; } #dv-top-left{ border-top-left-radius:15px; -webkit-border-top-radius:15px; -moz-border-top-radius:15px; } #dv-top-right{ border-top-right-radius:15px; -webkit-border-top-right-radius:15px; -moz-border-top-right-radius:15px; } #dv-bottom-left{ border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; } #dv-bottom-right{ border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; } </style> </head> <body> <div id="dv-all">全圆角例子</div> <div id="dv-top-left">左上圆角例子 </div> <div id="dv-top-right">右上圆角例子</div> <div id="dv-bottom-left">左下圆角例子</div> <div id="dv-bottom-right">右下圆角例子</div> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜