HTML5は、ネットワーク上の劇的な変化とクラウド導入サービスで道を反映しています。この記事では、HTML5の変化を見つけ、ハイライトを目的とした連載の4つの部分からなるシリーズの最初の部分です。これは、新しい組織のタブやページを導入し始め、その後、ウェブデザイン上のいくつかの高レベルの情報を提供し、そのようなフォームが作成され、APIが使用され、その値があり、そしていくつかのかなり革新的なアプローチがようにキャンバスを提供してもされています。
HTML5は、Webコンテンツを整理するためのデザイン言語であり、その目的は、Webデザインのための標準的で直感的なUIのマークアップ言語を作成することで、開発が容易になります。HTML5は、さまざまなツールを提供し、アセンブリは、論理的にサイトを整理するために使用することができ、切断だけでなく作成することができます、だけでなく、ウェブサイト集約することができますページの分裂を切断します。HTML5は、マッピング情報、パーティション情報の本質を体現しているため、「ウェブデザインに情報をマッピングする方法」である、との情報には使いやすい、理解しやすくするために、タグ付けされています。これは、基礎表現力HTML5セマンティックと実用的な美学で、HTML5は、インタラクティブな、単純なテキストから豊富に、デザイナーや開発者がコンテンツうちの多種多様の様々なレベルを公開することができますマルチメディアがすべて含まれています。
HTML5は、Webアプリケーションのクロスブラウザや携帯機器の開発を容易に効率的なデータ管理、マッピング、ビデオとオーディオのツールを提供しています。HTML5は、それがより大きな柔軟性を可能にするので、非常にエキサイティングなインタラクティブなウェブサイトの開発をサポートし、駆動モバイルクラウドコンピューティング技術の開発サービスの1つです。またエレガントな構造、制御フォーム、API、マルチメディア、データベースのサポートを含む、新しいラベル（タグ）と強化された機能を紹介し、大幅に処理速度を向上させます。
HTML5の新しいラベルは、相関の高いパッケージのラベルおよび利用における役割を呼び起こすことができます。過去のその他のHTML版の非説明ラベルを使用することです、しかし、HTML5は、人々はすぐにラベルの内容を認識させるために、コンテンツの富を提供し、高度に記述的、直感的なラベルを持っています。たとえば、<div>タグが2つの追加の<section>と<記事>になってきたタグが頻繁に使用されます。<ビデオ>、<オーディオ>、<キャンバス>と<フィギュア>を追加するタグは、特定の種類のコンテンツのより正確な説明を提供します。
HTML5は以下を提供します。
1.その内容の正確な説明は、ラベルに含まれることが意図されている2拡張ネットワーク通信
大幅共有メモリ改善3.
背景を実行する4.ウェブワーカーを処理し
、ローカルアプリケーションとサーバー間の永続的な接続を確立5. WebSocketインターフェース
ストアデータ検索方法6.良好
7スピードアップページの読み込み速度と保存
HTML5がコンテンツ指向することができることを意味するGUIをサポートし、管理するために8利用CSS3を
9改良されたブラウザのフォーム処理を
クライアントローカルストレージ可能API 10 SQLベースのデータベース、
11キャンバスとビデオは、グラフィックスおよびビデオは、サードパーティのプラグインをインストールする必要なしに添加することができる
スマートフォンを使用して位置決め機能に移動するれる12ジオロケーションAPI仕様をクラウドサービスとアプリケーション
13モバイルデバイスとクラウドサービス間のより効率的な通信を可能に、ダウンロードされたこの必要性のJavaScriptコードを削減強化フォーム、。
より魅力的なユーザーエクスペリエンスを作成するHTML5：HTML5を使用して、ページのデザインは、デスクトップアプリケーションの似たような経験を提供することができます。HTML5はまた、API機能と組み合わせたユビキタスブラウザを介して強化されたマルチプラットフォームの開発を提供します。HTML5を使用することにより、開発者は、さまざまなプラットフォーム間での円滑な近代的なアプリケーション体験を提供することができます。
あなたは言葉を言うときHTML5は、あなたが継続的な技術革新を表現するために、短い単語を使用します。新しいマーク、メソッドの新しいセット、および補完的でHTML5とその2人の同僚に基づいて：一般的な開発フレームワークCSS3とJavaScriptの間の相互作用、顧客中心のプロセスの現象であり、コアアプリケーション。HTML5の技術の多くのデスクトップ展開技術および方法に加えて、HTML5はまた、豊富な機能を備えた携帯電話のWebブラウザに実装することができます - 携帯電話のブラウザは成長市場で、AppleのiPhone、GoogleのAndroidとPalmのwebOSを実行しています携帯電話の人気はどこでもあなたがそれを証明できること。
非常に重要な側面でのHTML5の強力な機能は、情報をマッピングしている - あるいは我々はコンテンツブロック（コンテンツのブロックを）言う必要があります。あなたが好きなら - このアプローチは、プロセスを理解することがはるかに容易に生成されます。あなたは、設計・開発におけるこのツールはどれだけ効率的になってきた、この分野でのプロセス制御を増やすことで、ウェブ上で見ることができます。
HTML5ヘラルドがあり、それはテキストレベルでのより効率的な意味処理があることを、いくつかの状況であり、形式、構造及び使用方法に大きなコントロールを持っています。これらの機能やパラダイムの成長支配の基礎を構成する他の多くの革新的なHTML5の機微のすべて。商業用および他の多くの機関のエンティティは、 - でも、組織の彼らの主要代理店活動などの情報の処理や通信を入れていない多くの - 様々な程度の現象の開発は侵略によって成長しています。
HTML5には、ウィザードが表示されないがあるでしょう、魔法のランプではありません。しかし、その技術とそれ財産次善の策の一部の製造方法は、この問題のランプを研磨する第二のみ。
プランページ
あなたは、単純なWebページを作成することになるでしょう。このプロセスでは、私が導入されたいくつかの新しいHTML5タグについて説明します。効率的かつ効果的なWebページを作成するためには、あなたは、計画を策定作成したいすべてのコンポーネントを考慮する必要があります。あなたはハイレベル設計は、図1に示されている必要があります作成するWebページでは、ページのデザインは、ヘッダーエリア、ナビゲーション領域、記事の断面積と3つの以外にも地域、および最終フッター領域を含む領域が含まれています。このページは、視覚的な混乱の一部を排除し、GoogleのChromeブラウザで動作するように設計され、混乱は、これらの調整のブラウザの互換性の問題によって引き起こされる、だけでなく、インフラストラクチャの理解を妨げています。私たちの目標は、十分に形成されたコードとエレガントなページデザインを作成するためにそれらを使用する方法を表示するページの新しいHTML5タグの使用の明確な記述を作成することです。
1.アクメユナイテッド計画のページ図
このページの作成時に、私はCSS3に関与することになり、私はそれが正しくHTML5のページをレンダリングする必要があります。HTML5 CSS3ページのスタイル、ナビゲーションと一般的な認識のために不可欠であり、そのプロパティグループのいくつかは、あなたには、いくつかを含む参照サイト上でこれらの属性を見つけるCSS3のWsSchoolに（参考文献のセクションを参照）することができますように有用なこのような背景、フォント、マーキーやアニメーションなどの要素、および。
しかし、建設ページを開始する前に、あなたはいくつかの新しいHTML5タグを習得する必要があります。
ヘッダエリア
例ヘッダ領域がページのタイトルおよびサブタイトルが含まれ、<ヘッダ>タグは、ページのコンテンツヘッダ領域を作成するために使用されます。ページ自体に加えて、<ヘッダ>タグはまた、開示された<部>と<記事>に関する情報を含んでいてもよいです。ページはここでハイレベルなデザインを与え、かつ条及び第エリアヘッダエリアの内部に1ページのヘッダー領域を作成しました。リスト1は、<ヘッダ>タグタグの例を提供します。
リスト1. <ヘッダ>タグの例
<ヘッダ>
タイトルテキスト<の/ H1> <のH1>
<P>ここで、テキストまたは画像内に配置することができる</ P>
<P>ロゴは、通常、この場所に配置された</ P>
</ヘッダ>
リスト2に示すように、<ヘッダ>タグは、<のhgroup>タグを含んでいてもよいです。<のhgroup> <H1>から<H6>ここで、メインタイトルや字幕を表示するために、これらのタイトルを分類使用して、一緒にパケットヘッダをタグ付けします。
リスト2. <のhgroup>タグの例
<ヘッダ>
<のhgroup>
メインタイトル</ H1の> <のH1>
<H2>副題</ H2>
</のhgroup>
<P> テキストや画像をここに配置することができる</ P>
</ヘッダ>
ナビゲーション領域
あなたはページのナビゲーション領域を作成するには、<NAV>タグを使用することができます。<ナビゲーション>要素は、ナビゲーションのための特別な領域を定義し、<ナビゲーション>タグは、ショットのナビゲーションサイトを呼び出す必要はなく、リンクがページの他の領域に含まれる配置します。ナビゲーション領域は、リスト3に示すようなコードを含んでいてもよいです。
リスト3. <ナビゲーション>タグの例
<ナビゲーション>
<UL>
<LI> <HREF = "＃" kesrcは= "＃">ホーム</ A> </ LI>
<LI> <HREF = "＃" kesrc = "＃">お問い合わせ< > </ LI>
<LI> <HREF = "＃" kesrc = "＃">製品</ A> </ LI>
<LI> <HREF = "＃" kesrc = "＃">お問い合わせ</ A> </ LI>
</ UL>
</ NAV>
条及び第エリア
あなたのページは、設計条エリア、ページの実際のコンテンツのための記憶領域を含んでいます。あなたは、この領域を作成するには、<記事>タグを使用し、タグの内容は、独立して、使用中の他のコンテンツページの定義することができます。あなたはRSSフィード（RSSフィード）を作成したい場合たとえば、あなたはコンテンツを一意に識別するために、<記事>を使用することができます。<論文>削除されてもよいタグ識別は、別のコンテキストに入れ、完全には理解されるべきであることができます。
アクメユナイテッド企画記事の面積は、3節エリアが含まれている、あなたは、これらのゾーンを作成するには、<setction>タグを使用することができます。<セクション>領域がコンポーネントの関連するウェブコンテンツを含む、<セクション>タグ - と<記事>タグ - ヘッダ、フッタ、またはコンテンツの部分を完了するために必要な他の成分を含んでいてもよいです。<セクション>パケットのタグのコンテンツは、<セクション>タグと<記事>タグは、典型的には<ヘッダ>と<フッタ>端で始まるように、タグの内容が2つの間に配置されるのです。
<節>タグも含めることができます。<記事>タグは、<記事>のようなタグを含めることができます<節>は同じにタグを付けます。これは、削除されるか、同様の情報をグループ化する場合の<section>タグを使用する必要があり、そして<記事>タグは、物品を置くか、そのようなクラスなどの情報をブログに使用しなければならない、これらの要素は、コンテンツの意味に影響を与えることができませんそれは、新しい文脈の中に置かれています。<論説>タグは、その名前が示すと同じように、完全な情報パケットを提供します。<セクション>タグに関連した情報が含ま彼らはその場合の意味が失われる表すので対照的に、情報自体は、異なるコンテキストに配置することができません。
使用例<記事>と<section>のタグには、リスト4を参照します。
<セクション>タグの4. <記事>タグとリストの例
<記事>
<セクション>
コンテンツ
</ section>の
<セクション>
コンテンツ
</ section>の
</記事>
<セクション>
<記事>
コンテンツ
</記事>
<記事>
コンテンツ
</記事>
</ section>の
絵素
<節>と<記事>タグの両方のほか、<ヘッダ>と<フッタ>タグは、<フィギュア>タグを含めることができ、あなたは、画像、図表や写真を追加するためにタグを使用します。
<図>タグは<figcaption>含めることができ、ラベルは、したがって<図>タグに含まれるヘッダグラフィックを含み、それはあなたが一緒に説明、より密接に関連したグラフィックとコンテンツを入力することを可能にします。リスト5は、<図>と<figcaption>タグ構造の例を提供します。
5. <フィギュア>と<figcaption>タグリストの例
<図>
<IMG SRC = "/ figure.jpg" kesrc = "/ figure.jpg"幅= "304"高さ= "228" ALT = "画像">
<figcaption>キャプション図形の</ figcaption>
</フィギュア>
メディア要素
<節>と<記事>タグは、メディアのさまざまな要素を含むことができ、HTML5ラベルは、直ちにその内容の意味を伝える提供。音楽やビデオなどのメディア要素は、以前にのみ埋め込むことが、今より正確に識別することができます。
<オーディオ>タグは、音楽または他のオーディオストリームとして、音声コンテンツを識別する。<オーディオ>タグは、オーディオコンテンツのいくつかの特性を制御するために使用され、いつ、どの領域を再生するためのケースのように、これらのプロパティは次のとおりです。SRC、プリロード、制御、ループおよび自動再生。リスト6に示した例では、限りプレーしていきます会議のオーディオプレーヤーを、ロードするページとして、提供される制御は、ユーザーがオーディオの再生を停止または再開することができます。
6. <オーディオ>タグリストの例
<オーディオSRC =「MyFirstMusic.ogg」kesrc =「MyFirstMusic.oggは、」自動再生ループを制御>
お使いのブラウザは、オーディオタグをサポートしていません。
</オーディオ>
<ビデオ>タグを使用すると、ビデオクリップや、視覚メディア流動化を再生することができます。これは持っている<オーディオ>タグすべての属性を、プラス他3：ポスター、幅と高さ。ビデオがロードされているか、最悪の場合にロードされて何のビデオが存在しない場合には、ポスターのプロパティを使用すると、最初に対処するための画像を見つけることができます。
図7は、<ビデオ>タグ構造のリストの例を提供します
7.ラベルリストの例
<ビデオSRC = "MyFirstMovie.ogg" kesrc = "MyFirstMovie.ogg"コントロール= "コントロール">
videoタグをサポートしていませんお使いのブラウザは
</ビデオ>
<ビデオ>と<オーディオ>タグは、マルチメディアリソースの<video>と<オーディオ>タグを定義する<光源>タグを含んでいてもよいです。この要素を使用して、あなたは、ブラウザの中から選択し、そのメディアの種類やサポートされるコーデックに基づいて行われます、代わりのビデオまたはオーディオファイルを指定することができます。リスト8は、ファイルのWMAバージョンがケースに使用しているブラウザで再生することができないならば、もはやMP3バージョンを試していないだろう、2つのオプションがあります。オーディオが使用できない理由をユーザーが知っているように、それ以外の場合は、情報が表示されます。
8. <ソース>タグリストの例
<オーディオ>
<ソースSRC = "/音楽/ good_enough.wma" kesrc = "/音楽/ good_enough.wma" TYPE = "オーディオ/ X-MS-WMA">
<ソースSRC = "/音楽/ good_enough.mp3" kesrc = "/音楽/ good_enough.mp3"タイプ= "オーディオ/ MPEG">
<P> HTML 'オーディオ'の要素をサポートしていませんお使いのブラウザます。</ p>
</オーディオ>
例えば、プラグインのAdobe Flash SWFファイルを - <embed>タグが埋め込まれたコンテンツがページにすることができる定義されています。リスト9は、リソースはFlashファイルを埋め込まれ示す、type属性が含まれています。
9. <embed>タグリストの例
<EMBED SRC = "MyFirstVideo.swf" kesrc = "MyFirstVideo.swf" タイプ= "アプリケーション/ X-衝撃波フラッシュ" />
srcとtype属性に加えて、<embed>タグはまた、高さと幅の属性を持っています。
ます。https：//www.cnblogs.com/Leeyong/archive/2011/09/03/2165538.htmlで再現