HTML5 は、Web コンテンツを整理するために設計された言語であり、その目的は、標準的で直感的な UI マークアップ言語を作成することにより、Web デザインと開発を容易にすることです。 HTML5 には、ページを切り取ったり分割したりするためのさまざまな手段が用意されており、これにより、サイトを論理的に編成するために使用できるだけでなく、サイトを集約する機能も提供できる切り取りコンポーネントを作成できます。 HTML5 は、情報マッピングの本質を体現し、情報を分割し、情報をタグ付けして使いやすく理解しやすくするため、「情報から Web サイトのデザインへのマッピング手法」と言えます。これは、HTML5 の表現力豊かなセマンティクスと実用的な美しさの基礎であり、デザイナーや開発者は、単純なテキスト コンテンツからリッチでインタラクティブなコンテンツまで、あらゆるレベルでさまざまなコンテンツを公開できるようになります。すべてのマルチメディアが含まれています。 HTML5 は、効率的なデータ管理、描画、ビデオおよびオーディオ ツールを提供し、Web およびポータブル デバイス上でのクロスブラウザー アプリケーションの開発を容易にします。 HTML5 は、柔軟性が向上し、非常に魅力的なインタラクティブな Web サイトの開発をサポートするため、モバイル クラウド コンピューティング サービスの開発を推進するテクノロジーの 1 つです。また、新しいタグと、エレガントな構造、フォーム コントロール、API、マルチメディア、データベース サポート、大幅に向上した処理速度などの強化された機能も導入されています。 HTML5 の新しいタグは非常に刺激的であり、タグにはその機能と使用法がカプセル化されています。以前のバージョンの HTML では、より非説明的なタグが使用されていましたが、HTML5 には非常に説明的で直感的なタグがあり、コンテンツをすぐに識別できる豊富なコンテンツ タグのセットが提供されています。たとえば、頻繁に使用される タグは、 と という 2 つの追加タグによって補完されています。 、、、 タグを追加すると、特定の種類のコンテンツをより正確に説明できます。 HTML5 は以下を提供します: 1. 内容を正確に説明するタグ 2. 強化されたネットワーク通信 4. バックグラウンド プロセスを実行する Web ワーカー 5.ローカル アプリケーションとサーバー間の接続 6. 保存されたデータを取得するためのより良い方法 7. ページの高速な保存と読み込み 8. CSS3 を使用した GUI の管理のサポート。これは、HTML5 がコンテンツ指向になることを意味します 9. ブラウザーのフォーム処理の改善 10. クライアント側でのローカル ストレージを可能にする SQL ベースのデータベース API 11. サードパーティのプラグインやビデオをインストールせずにグラフィックを追加するための Canvas および Video 12. スマートフォンの位置情報機能を使用してモバイル クラウド サービスとアプリケーション 13. JavaScript コードをダウンロードする必要性を減らし、モバイル デバイスとクラウド サービスのより効率的な通信を可能にする拡張フォーム。 HTML5 はユーザーにとってより魅力的なエクスペリエンスを作成します: HTML5 を使用してデザインされたページは、デスクトップ アプリケーションと同様のエクスペリエンスを提供できます。 HTML5 は、API 機能をユビキタス ブラウザと統合することにより、強化されたマルチプラットフォーム開発も提供します。 HTML5 を使用することで、開発者はプラットフォーム間でスムーズに流れる最新のアプリケーション エクスペリエンスを提供できます。 HTML5 という言葉を言うときは、継続的な革新を表す短い言葉を使います。新しいマークアップ、新しい一連の方法論、および HTML5 とその 2 つの補完的な同僚である CSS3 と Javascript の間の相互作用に基づく共通の開発フレームワーク、現象に対するクライアント中心のアプローチがアプリケーションの中核です。 HTML5 テクノロジ技術および手法の多くのデスクトップ展開に加えて、HTML5 は、Apple iPhone、Google Android、および Palm webOS を実行する Android デバイスの成長市場である機能豊富な Web 携帯電話ブラウザにも実装できます。これの証拠。 HTML5 の強力な機能の非常に重要な側面は、情報マッピング、つまりコンテンツのブロックです。そうすれば、このアプローチにより、プロセスがはるかに理解しやすくなります。 Web 処理のこの領域の制御が強化されたことで、このツールが設計と開発の面でいかに効率的になったかがわかります。 HTML5 は、テキスト レベルでのより効率的なセマンティック処理と、フォームの構築と使用に対するより強力な制御の出現を予告します。これらすべての機能と HTML5 イノベーションのその他の多くの微妙な点が、このますます支配的なパラダイムの基礎となっています。営利その他の多くの組織体、さらには情報の処理と伝達を主要な組織活動としてまったく考慮していない多くの組織も、この増大する現象の進展によってさまざまな程度の影響を受けています。 HTML5 は魔法のランプではないので、魔神は現れません。しかし、その技術的および方法論的な資産により、魔法のランプを磨くのに次善の策となります。 企画ページ 簡単な Web ページを作成します。その過程で、HTML5 で導入されたいくつかの新しいタグについて説明します。効率的かつ効果的な Web ページを作成するには、計画を立て、構築するすべてのコンポーネントを考慮する必要があります。作成する Web ページは、図 1 に示すような高レベルのデザインになります。ページのデザインには、ヘッダー領域、ナビゲーション領域、3 つのセクション領域とサイド領域を含む記事領域、そして最後にフッター領域が含まれます。このページは Google の Chrome ブラウザで動作するように設計されており、ブラウザの互換性の問題を引き起こす一方で、基礎となる構造の理解を妨げる視覚的な煩雑さを一部排除しています。私たちの目標は、新しい HTML5 タグの使用法を明確に説明し、それらを使用して整形式のコードとエレガントなページ デザインを作成する方法を示すページを作成することでした。 図 1. Acme United の Web ページ計画 このページの作成プロセスでは、HTML5 Web ページを正しくレンダリングするために使用する必要がある CSS3 を使用します。 CSS3 は、HTML5 ページのスタイル、ナビゲーション、および一般的なルック アンド フィールに不可欠であり、WsSchool の CSS3 リファレンス サイト (「リソース」セクションを参照) で見つけることができるプロパティのセットには、背景、フォントなどの非常に便利な要素が含まれています。 、マーキー、アニメーションなど。 ただし、ページの構築を始める前に、いくつかの新しい HTML5 タグを学ぶ必要があります。 ヘッダー領域 ヘッダー領域の例には、ページのタイトルとサブタイトルが含まれています。 タグは、ページのヘッダー領域のコンテンツを作成するために使用されます。ページ自体に加えて、 タグには に関する公開情報を含めることができます。ここで作成された Web ページには、上位レベルのデザインで指定されたページのヘッダー領域と、記事領域とセクション領域の内側に配置されたヘッダー領域があります。リスト 1 は、 タグの例を示しています。 タグの例 テキストまたは画像をここに配置できます > タグは、見出し階層 を使用してグループ化されます。 タグの例 ここにテキストまたは画像を配置できます ナビゲーションエリアページのナビゲーションエリアを作成できます。 要素は、ナビゲーション専用の領域を定義します。 タグは、ページの他の領域に含まれるリンクを配置するために使用する必要があります。ナビゲーション領域には、リスト 3 に示すようなコードを含めることができます。 リスト 3. 当社の製品お問い合わせ記事とセクション領域 デザインしたページには、ページの実際のコンテンツを保存する記事領域が含まれています。この領域は、ページ上の他のコンテンツとは独立して使用できるコンテンツを定義する タグを使用して作成します。たとえば、RSS フィードを作成する場合は、 を使用してコンテンツを一意に識別できます。 タグは、削除して別のコンテキストに配置して完全に理解できるコンテンツを識別します。 Acme United の計画の記事エリアには 3 つのセクション エリアが含まれており、 タグを使用してこれらのエリアを作成できます。 には、Web コンテンツの関連コンポーネント領域が含まれます。 タグは、 で終わります。 2つの間。 タグには タグを含めることもできます。 タグは類似の情報をグループ化するために使用する必要があり、 コンテンツの意味に影響を与えずに使用できる情報を配置するために使用する必要があります。新しい文脈。 タグは、その名前が示すように、情報の完全なパッケージを提供します。対照的に、 タグには関連情報が含まれますが、その情報自体は意味が失われるため、別のコンテキストに配置できません。 タグと の使用例については、リスト 4 を参照してください。 &&lt;&lt; gt;&gt; < ; セクション> タグと タグには、画像、グラフ、写真を含めることができます。 タグには を含めることができ、それに応じて、図をコンテンツとより密接に関連付ける説明を入力できます。リスト 5 は、タグ構造の例を示しています。 リスト 5. タグと タグの例図のキャプションメディア要素要素に加えて、HTML5 ではコンテンツの意味を即座に伝えるタグが提供されます。以前は埋め込むことしかできなかった音楽やビデオなどのメディア要素をより正確に識別できるようになりました。 タグは、音楽やその他のオーディオ ストリームなどのサウンド コンテンツを識別します。 タグには、コンテンツ、オーディオを再生するタイミングと方法を制御するために使用される属性がいくつかあります。これらの属性は、src、preload、control、loop、autoplay です。リスト 6 の例では、ページが読み込まれるとすぐにオーディオが再生され、ユーザーがオーディオを停止または再開できるコントロールが提供されて再生が継続されます。 リスト 6. タグの例 ; タグを使用すると、ビデオ クリップを再生したり、ビジュアル メディアをストリーミングしたりできます。これには、 タグのすべての属性に加えて、poster、width、height の 3 つの属性が含まれます。ポスター属性を使用すると、ビデオの読み込み中、またはビデオがまったく読み込まれない最悪の場合に対処する画像を見つけることができます。 リスト 7 は、 タグ構造の例を示しています。 タグの例 ブラウザはビデオタグをサポートしていません タグには、 タグを含めることができます。この要素を使用すると、代替のビデオ ファイルまたはオーディオ ファイルを指定でき、ブラウザはメディア タイプまたはサポートされているコーデックに基づいてその中から選択できます。リスト 8 には 2 つのオプションがあります。使用しているブラウザーでファイルの WMA バージョンが再生できない場合は、MP3 バージョンを試してください。それ以外の場合は、音声が利用できない理由をユーザーに知らせるメッセージを表示します。 リスト 8. タグの例 お使いのブラウザは HTML をサポートしていません「audio」要素。リスト 9. タグの例 src および type 属性に加えて、 タグには height 属性と width 属性もあります。 サイドエリア Acme United 計画のサイドエリアは タグに含まれるコンテンツは、そのコンテンツを含む記事、セクション、またはページのメッセージに影響を与えることなく削除できます。 リスト 10 は、 タグの使用例を示しています。 タグの例 カリフォルニアにはディズニーランドがあります。 フッターエリアには、ページ、記事、またはcontent 記事の著者や日付などの情報。ページのフッターとして、リスト 11 に示すように、著作権またはその他の重要な法的情報が含まれる場合があります。 リスト 11. タグの例 p>Copyright 2011 Acme United の作成を開始しましょう。あなたのページ。 Acme United の Web ページを作成します。完成したページを図 2 に示します。このページはダウンロードして使用できます (「ダウンロード」セクションを参照)。 図 2. Acme United の Web ページ それでは、ページを組み立ててみましょう。最初に扱うのは、 です。HTML5 では、 を覚えておく必要があります。これにより、このタグのエントリが簡素化されるだけでなく、将来性も高まります。これは html5 とは呼ばれず、単なる html であることに注意することが重要です。 HTML バージョンがいくつあっても、 は常に html になります。 タグには、 タグの間にネストする必要があります。 リスト 12. タグの例 を使用できます。スクリプト、ブラウザのサポート情報、スタイル シート リンク、メタ情報、その他の初期化関数。ヘッド領域では次のタグを使用できます: 4. ; title> は、ドキュメントの実際のタイトルを格納します。その内容は、ページを閲覧するときに表示されるタイトルです。リスト 13 の タグは、HTML5 ページのレンダリングに使用される CSS3 スタイル シートを識別します。スタイル シートのファイル名は main-stylesheet.css です。 リスト 13. タグの例 リンク rel="stylesheet" href="main-stylesheet.css" main-stylesheet.css" /> 次に、 タグを使用し、その後に前に紹介した タグと タグを使用します。この例の セクションには、Acme United という架空の会社の名前が含まれており、 セクションには、サブタイトルが「A Simple HTML5 Example」であることを示す情報が含まれています。 タグの例 2> ;簡単な HTML5 の例 これまで、ページの設定に使用された CSS3 をリスト 15 に示しました。まず、ページのフォントを設定し、次にページの本文を調整し、本文のサイズを明確にして、ヘッダー セクション構造の第 1 レベルと第 2 レベルのタイトル タグを設計します。これがヘッダーです。ページに使用したいもの。 リスト 15. CSS3 の例 1* {font-family: Lucida Sans、Arial、Helvetica、sans-serif;} body {width: 800px;margin: 0em auto;}header h1 {font-size: 50px;margin: 0px;color: #006;}ヘッダー h2 {font-size: 15px;margin: 0px;color: #99f;font-style: italic;}リスト 16 は、メイン サイトのナビゲーションを処理することを目的とした タグを示しています。 リスト 16. 私たちについてお問い合わせ HTML5 には、一部のデザイナーや開発者にとって混乱を引き起こすタグもあります。この混乱は、ナビゲーション バーが「ナビゲーション メニュー」と呼ばれることが多いという事実から生じています。 タグは HTML バージョン 4.01 で非推奨になりましたが、対話性を強化するために HTML5 で復活しました。主要なナビゲーションには使用しないでください。プライマリ ナビゲーションに使用する必要がある唯一のタグは、この例で後ほど使用する タグです。 ナビゲーションの書式設定の問題は CSS3 によって処理されます。リスト 17 にある各 タグの定義は、 内の 要素の特定の状態を表します。 リスト 17. CSS3 の例 2nav ul {list-style: none;padding: 0px;display: block;clear: right;background-color: #99f;padding-left: 4px; height: 24px;}nav ul li {display: inline;padding: 0px 20px 5px 10px;height: 24px;border-right: 1px Solid #ccc;}nav ul li a { color:#006;text-decoration:none;font-size:13px;font-weight:bold;}nav ul li a:hover {color: #fff;}次は記事ですこの領域は、独自の 情報を含む タグによって定義されます。 内に含まれる も参照してください。 リスト 18. 記事見出し Primum non nocere ad vitam Paramus . . . ヘッダ>Scientia est qua nocent docentp . ; /section> リスト 19 は、この形式をレンダリングする CSS3 マークアップを示しています。段落、ヘッダー、およびセクション領域の定義が、それらを含む item タグで定義されていることがわかります。ここで定義される タグは、ページ レベルで定義される タグとは異なります。 リスト 19. CSS3 の例 3 記事 > ヘッダー h1 {フォントサイズ: 40px;浮動小数点: 左;マージン左: 14px;}記事 > ヘッダー h1 {色: #000090;テキスト装飾: なし; }article > セクションヘッダー h1 {font-size: 20px;margin-left: 25px;}article p {clear: Both;margin-top: 0px;margin-left: 50px ;} に含まれる 2 番目の タグには、最初の タグが含まれています。 および タグについては、リスト 20 を参照してください。 ここでは、 タグは、周囲の連続コンテンツの一部ではない情報を表すために使用されます。 タグにはストーンヘンジの写真が含まれています。 タグには、4 人のミューズにちなんで名付けられたボタンを作成するために使用されます。ボタンをクリックすると、対応するミューズに関する情報が表示されます。 タグは、veni、vidi、vici などの単語を強調表示するために リスト 20. の例header>ClioThalia('Urania . . .')">Urania('Calliope . . .')">Calliope 図 1. Stonehenge CSS3 のこの部分には、ページの幅を小さめに設定します。この変更により、サイドがテキストを覆うことなく右にフローティングできるようになります。リスト 21 はこのマークアップを示しています。 リスト 21. CSS3 の例 4article p.next-to-aside {width: 500px;}article > セクション図 {margin-left: 180px;margin-bottom: 30px;} 記事 > セクション > メニュー {margin-left: 120px;}aside p {position:relative;left:0px;top: -100px;z-index: 1;width: 200px;float: right;font-style: italic;color: #99f;}ビデオ セクションの要素これは、 の最後のコンポーネントであるビデオ セクションです。サンプルビデオは ogg 形式であり、ページが読み込まれた後に自動的に再生され、継続的にループし、一時停止と再生のコントロールが提供されます。現在の実際の多くの状況では、リスト 22 に示すように、ogg ビデオは ogv (v はビデオを意味します) 拡張子を使用します。 タグも同様に機能します。 リスト 22. の例p>自動再生ループを制御します> リスト 23 は、ビデオ セクションの CSS3 定義を示しています。 リスト 23. CSS3 の例 5article > セクションビデオ {height: 200px;margin-left: 180px;}article > セクション div.no-html5-video{height: 20px; text-align: center;color: #000090;font-size: 13px;font-style: italic;font-weight:太字;background-color: #99f;}ページのフッター最後の部分をリスト 24 に示します。 リスト 24. 著作権: 2011 Acme United 。 フッターの CSS3 をリスト 25 に示します。 リスト 25. CSS3 の例 5footer p {text-align: center;font-size: 12px;color: #888;margin-top: 24px;}結論Web ページの構築完了により、この複数部構成のシリーズの最初の部分が終了します。この記事の目的は、新しい HTML5 メカニズムを紹介することです。 HTML5 は HTML4 からの単なるアップグレードではなく、デジタル コミュニケーションの新しい方法です。 CSS3 と JavaScript の機能により、HTML5 は開発者に疑似パッケージですべてを提供するところまで来ています。世の中にある豊富な HTML5 情報から必要なものを取り出し、それを私たちの一般的な慣行に適用する意欲があるなら、あなたはこの有能な HTML5 マルチメディア Web デザイナーのグループと成長する開発者の軍隊に加わることになります。このシリーズの次の記事では、HTML5 フォームの作成方法と書式設定方法について説明します。 上記は HTML5 の基礎、パート 1: 初期テストの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。