ロシア語の html5 の仕様。 HTML5 仕様の概要。 HTML5にはどのような新しいテクノロジーが登場しましたか

HTML5 で Web サイトを作成するときに廃止されたタグを使用することは推奨されませんが、これはブラウザーがそれらのタグをサポートしなくなったことを意味するものではありません。たとえば、非推奨のタグの機能 アンダースコア

グローバル属性は、任意の HTML ドキュメント タグに埋め込むことができる属性です。 新しいグローバル属性が HTML5 に登場しました。以下の説明では、「新規」という単語で強調表示されています。

グローバル HTML5 属性の名前と説明を見てみましょう。

accesskey=" " - 事前にプログラムされたボタンを押すことで、ページの任意の要素 (タグ) を使用できるようになります。 キーの組み合わせ,
class=" " - クラス名を設定できます。
contenteditable=" " - 新しい要素の内容を編集できます。
contextmenu=" " - を作成できます コンテキストメニュー要素 New の場合、
dir=" " - テキストの方向を制御できます。
raggable=" " - ユーザーが要素をドラッグできるようにします New、
dropzone=" " - 新規をドラッグするときに要素をどう処理するかを指定できます。
hidden=" " - 新しい要素を非表示にできます。
id=" " - 要素に一意の識別子を設定できます。
lang=" " - 要素コンテンツで言語コードを指定できます。
Spellcheck=" " - New 要素のコンテンツでスペルチェックを行うかどうかを指定できます。
style=" " - 要素のスタイルを作成できます。
tabindex=" " - Tab キーを押したときに要素がフォーカスを受け取る順序を指定するルールを作成できます。
title=" " - 要素の上にマウスを置くと表示されるツールチップを作成できます。

HTML5 仕様では、タグが本格的なオブジェクトになったため、仕様にまだ記述されていないタグであっても、グローバル属性の概念がすでにこれらのオブジェクトに組み込まれています。

HTML5 のコード構造にはいくつかの変更が加えられており、その一部を次に示します。

1. 以前のバージョンの言語とは異なり、HTML5 には doctype が 1 つだけあります。
たとえば、このサイトのページのソース コードでそれを確認できます (Doctype の前には何も入れない、スペースや改行などを入れないでください)。

2. ドキュメントの言語を示すために、メタ タグの代わりに次のようにします。
タグ内で lang="ru" 属性を使用する必要があります。

3. ドキュメントのエンコーディングを示すために、メタ タグの代わりに次のようにします。

http-equiv 属性と content 属性を使用せずに、meta タグを使用する必要があります。

4. JavaScript スクリプトを作成する場合、タグ内に type="text/javascript" 属性と language="JavaScript" 属性を実装する必要はありません。

5. 導入にあたって CSS スタイル、今後は、 および タグに type="text/css" 属性を実装する必要はありません。

6. リンクはインライン タグであるため、初期の HTML および XHTML 仕様では、ブロック タグをフレーム化することは推奨されていませんでしたが、HTML5 仕様では、このリンクの推奨事項は削除され、1 つ以上のリンクをフレーム化することが許可されています。ブロック要素。

段落

HTML5 を使用すると、次のことが可能になります。

サイト http://html-5.ru/、http://html-5.ru/uchebnik-html5 の資料に基づく

• 2015 年から 2017 年までの HTML W3C への追加

• W3C 勧告 1999 年 12 月 24 日

このサイトは最新のマークアップ言語である HTML5 に特化しています。
サイトの目的: HTML5 についてできる限り多くのことを伝えること。

このリソース サイトは、HTML の初心者向けの教科書ではなく、HTML5 言語に関する百科事典、教科書、参考書でもあります。 このサイトの目的は、以下を明確にすることです。

• 最新の Web 開発における HTML5 とは何ですか?
• この言語はどのようなテクノロジーのサポートを開始しますか?
• HTML5 ではどのような新しいタグが導入されていますか?
• HTML4 や XHTML とはどう違うのですか?
• 今でもHTML5は使えるのでしょうか？
• 等

HTML5は 新しい技術 Web 業界の発展に貢献し、モバイル サイトとアプリケーションを効果的に作成できるように設計されています。 まず、HTML5 の言語仕様を作成する際に注意する主なポイントを考えてみましょう。

第一に、現在 Web サイトの作成に関連するほぼすべてのものは、モビリティ (適応性) を追求しています。 そのため、開いたサイトは、コンピューター、ラップトップ、タブレット、スマートフォンなど、あらゆるデバイスで読むことができます。 HTML5、CSS3、最新の JavaScript (およびそのライブラリ) などの新しいテクノロジー、さらには 新しいトレンドフラットスタイルと呼ばれるWebデザイン。

次に、HTML5 の重要なコンポーネントの 1 つはセマンティクスです。各タグには、単に特定のコンテンツをフォーマットするだけでなく、独自のセマンティクス負荷がかかります。 プログラム (例: 検索エンジン) HTML5 で構築されたサイトを分析する人は、タグの間にどのようなデータが含まれているのか、その本質は何なのか、その重要性は何なのかを理解する必要があります。

第三に、HTML 言語がプラグインから独立していることに多くの注意が払われています。 音楽、ビデオ、アニメーション、ゲーム、これらすべては、サードパーティのプログラムをコンピュータやブラウザにダウンロードしなくても間もなく利用できるようになります。

4 番目に、マイクロ マークアップと、以前は XML の一部であった仕様をコード内で直接使用できるようになりました。たとえば、SVG 仕様 (さまざまなベクトル形状を作成する) を HTML ドキュメントのコード内で直接使用できます。

HTML5 は、ウェブマスターに興味深い機会をもたらす多くのテクノロジーを導入しました。その一部を以下に示します。

HTML5 では、HTML ドキュメント コードの構造が若干変更されています。たとえば、doctype が 1 つだけ残り、サイト ページを意味的に上部、下部、サイド、メイン コンテンツに分割する新しいタグと属性が登場しました。

HTML4 の多くのタグと属性は現在廃止されていると考えられています。 しかし同時に、HTML5 は以前のマークアップ言語 HTML3、HTML4、および XHTML との完全な互換性を維持しています。

HTML5 仕様では、最終的に、DOM テクノロジーを使用してページ要素が JavaScript プログラミング言語とどのように対話する必要があるかについて言及しました。 なぜなら、HTML5 のタグは本格的なオブジェクトとみなされているからです。

HTML5 仕様には、HTML コードで発生したエラーをブラウザがどのように処理するかについての説明が追加されました (これはブラウザ開発者にとって重要です)。 これまで、ブラウザ開発者は、ブラウザがエラーのない正しいコードを処理する方法についてのみ説明していました。

はい、できます！ HTML5 は完全に私たちの現在と未来であるため、Web 業界のほとんどすべての主要企業が HTML5 に切り替えました。 全て最新のブラウザ

結論は

HTML5 を開発している W3C および WHATWG 組織は、今後、この言語の新しいバージョンに番号を付けないことを決定しました。今後は、デジタル識別を行わずに単に HTML と呼ぶことができます。 言語内に出現する新しい要素 (タグ) とテクノロジー (API) は、既存の仕様に追加されるだけです。 新しい要素を使用すると、いくつかの利点が得られます。 これらを見出し要素と組み合わせて使用​​すると、... に存在する 6 レベル以上の見出しを使用できるようになります。以前のバージョン

HTML。ドキュメントのネストされたセクション (セクション) をマークします。 新しい仕様は、新しいセクション要素によって形成される構造によって表されるドキュメント アーキテクチャの形成に関する詳細なガイダンスを提供し、同時に以前のバージョンとの下位互換性を維持します。

このガイドは、開発者が作業するときに使用し、ブラウザーが Web ページのナビゲーションに役立つドキュメント コンテンツを生成するときに使用します。

たとえば、以下のマークアップでは、ネストされたセクションと第 1 レベルの見出しが使用されています。

レベル1

レベル2

レベル3 との互換性を確保するには現在のバージョン

特別なセクション要素を使用して目的に応じて Web ページのセクションを定義することで、ユーザーがページ内を移動しやすくするアクセシビリティ テクノロジの正しい動作が容易になります。 場合によっては、開発者が特別なジャンプ リンクを作成しなくても、特殊なプログラムを使用して、他の機能 (ナビゲーション、サイドバーなど) を実行するドキュメントのセクションをバイパスしながら、ある記事から別の記事に簡単にジャンプできます。

開発者にとって新しい要素を使用するもう 1 つの利点は、多くの div を、対応する目的を持つ新しい要素の 1 つで置き換えることができることです。これにより、コードがよりクリーンで読みやすくなります。

この要素は、ドキュメントの特定のセクションのタイトルを表すことを目的としています。 実際には、タイトルに加えて、他の種類の情報が含まれる場合があります。 たとえば、小見出し、作成者に関する情報、文書のバージョンや変更などに関する情報をタグの間に配置するのは非常に合理的です。

HTML 5 のプレビュー

ラクラン・ハント著

この要素は、それが属するドキュメント セクションのフッターを表します。 原則として、セクションの内容に関する著者の情報、テーマ別投稿へのリンクなどが含まれます。

2007年 株式会社イ例

この要素はナビゲーション リンクを含むことを目的としています。 これは、サイトのナビゲーションやドキュメントのコンテンツの投稿にも同様に適しています。

• 家


• 製品


• サービス


• について

この要素は、周囲のコンテンツのトピックにある程度対応する情報を提示する役割を果たします。 この要素はサイドバー (サイドカラム) を実装するのに非常に便利です。

アーカイブ

• 2007 年 9 月


• 2007 年 8 月


• 2007 年 7 月

要素は、章などのドキュメントまたはアプリケーションの一般的なセクションを表します。次に例を示します。

第 1 章: 時代

最高の時も、最悪の時も、
それは知恵の時代であり、愚かさの時代でした。
それは信仰の時代であり、不信の時代でもありました。
それは光の季節でした、それは闇の季節でした、
…

（『二都物語』より抜粋）

要素は、ドキュメント、ページ、またはサイト全体の独立したセクションです。 ニュース、ブログ投稿、フォーラム投稿、または個別のコメントなどのコンテンツを投稿する場合に使用すると便利です。

コメント #2
ジャック・オニール著

2007 年 8 月 29 日 13:58

これまた素晴らしい記事ですね！

Web環境では 最近ビデオやオーディオなどのデータ タイプの関連性はますます高まっています。 また、YouTube、Viddler、Revver、MySpace などの多くのサイトにより、インターネット ユーザーであれば誰でも簡単にビデオやオーディオ情報をオンラインに投稿できるようになります。 現在、HTML 標準にはメディア コンテンツを含めて管理するために必要な手段がないため、現在のサイトのほとんどは Flash テクノロジを使用して必要な機能を提供しています。 さらに、プラグイン (QuickTime、 ウィンドウズメディアなど）。 しかし、それでも、最も広く使用されているのは Flash テクノロジーであり、開発者に必要な API を提供するクロスブラウザー ソリューションです。

さまざまな Flash ベースのメディア プレーヤーの表示方法から判断すると、開発者は、メディア ファイルの再生を完全に制御 (ボリューム コントロール、停止、再生など) できる独自のタイプのユーザー インターフェイスを作成できることに興味を持っていると言っても過言ではありません。一時停止、検索、再生。 しかし、現時点での主な目標は、プラグインを使用せずにブラウザーでそのような機能をネイティブにサポートすることです。これにより、スクリプトからの再生を制御するために必要な API を備えたビデオおよびオーディオ コンポーネントを組み込むことができるようになります。

そして、新しく表示された要素により、このタスクがはるかに簡単になります。 利用可能な API 機能のほとんどは両方の要素に共通ですが、視覚情報と非視覚情報に特有の小さな違いはあります。

Opera エンジンと WebKit エンジンは両方とも、この要素の部分的なサポートをすでに実装しています。 自分の目で確かめるために、Opera の実験用ビルドと WebKit の自動テスト ビルドをダウンロードして試すことができます。 Opera では Ogg Theora コーデックのサポートが導入され、WebKit では、多数のサードパーティ コーデックを含む、QuickTime でサポートされるすべての形式のサポートが提供されます。

ドキュメントにビデオを含める最も簡単な方法は、何も指定せずに要素を使用することです。 追加設定。 この場合、ブラウザはデフォルトのユーザー インターフェイス要素を提供します。 メディア コンテンツ コントロールをデフォルトで有効または無効にするには、次の値を指定してブール コントロール属性を使用します。

ムービーをダウンロードする

オプションのポスター属性は、再生を開始する前に video 要素の代わりに表示される画像を定義するために使用されます。 また、一部のビデオ形式では、MPEG-4 のように、その形式に固有の独自のスプラッシュ スクリーンが提供されますが、ポスター属性は 別の方法使用するビデオ形式に関係なく表示されるスプラッシュ画面を定義します。

要素を使用してページに音声コンテンツを含めると、状況も簡単になります。 要素に固有の属性のほとんどは要素にも適用されますが、後者では width 、 height 、またはPoster を設定できません。

曲をダウンロードする

HTML5 標準では、ビデオおよびオーディオ データの代替ソースを示す要素も導入されており、これによりブラウザはデバイスやコーデックでサポートされている形式を選択できるようになります。 media 属性は、使用されているデバイスの制限に従って必要なデータ ソースを選択するためにデバイス タイプを示すために使用でき、type 属性はデータ タイプとコーデックを指定するために使用できます。 要素を使用するときは、その親または要素に src 属性があってはいけないことに注意してください。そうでないと、代替データ ソースがブラウザによって無視されます。

Web リソースに焦点を当てるために開発者が作成する必要がある場合 フルコントロール以上 ユーザーインターフェース、これらの目的のために、メディア ファイルの再生プロセスをスクリプトから制御できる多数のメソッドとイベントを提供する高度な API 機能を使用できます。 このような機能の最も単純な代表例は、play() メソッドとポーズ() メソッド、およびメディア ファイルの現在の再生位置を先頭またはその他の目的の場所に設定するように設計された currentTime プロパティです。 以下にその使用例を示します。

var video = document.getElementById("video");

遊ぶ
一時停止

小文字などの他のラベルを使用したい場合は、次のコードを使用できます。

DOCTYPE HTML>

HTML5 要素名は大文字でも小文字でも使用できます。

• 混合スタイルの場合は非常に悪いです。
• 小文字は書きやすいです。

これは段落です。

これは段落です。

これは段落です。

HTML5 では、すべての要素 ( 要素など) を閉じる必要はありませんが、すべての要素に終了タグを追加することをお勧めします。

これは段落です。

これは段落です。

これは段落です。

これは段落です。

HTML5 では、空の HTML 要素をオフにする必要はありません。

次のように書くことができます:

次のように書くこともできます。

XML、XHTML、およびスラッシュ (/) が必要です。

XML ソフトウェア ページを使用する予定がある場合は、このスタイルが非常に適しています。

HTML5 では、大文字と小文字の両方でプロパティ名を使用できます。

• ユースケースは非常に悪い習慣です。
• 開発者は通常、小文字を使用します (XHTML と同様)。
• 小文字のスタイルがよりすっきりと見えます。
• 小文字は書きやすいです。

HTML5の属性値を引用符で囲むことはできません。

• プロパティ値にスペースが含まれる場合は、引用符を使用する必要があります。
• 混合スタイルは推奨されません。単一スタイルが推奨されます。
• 引用符を使用したプロパティ値は読みやすくなります。

次の属性値の例にはスペースが含まれており、引用符を使用しないでください。機能しない可能性があります。

以下が使用されています 二重引用符、これは正しいです:

画像の Alt 属性はよく使用されます。 画像が表示できない場合は、画像表示を代替することができます。

= "HTML5" スタイル = "幅: 128px; 高さ: 128px">

画像サイズを決定し、指定値をロード時に予約し、ちらつきを軽減します。

= スタイル "HTML5" = "幅: 128px; 高さ: 128px">

等号の前後にスペースを使用できます。

使用する HTMLエディタ、左右スクロールのコードがぎこちない。

コードの各行はできる限り 80 文字未満にします。

理由もなく空行を追加しないでください。

ロジックの各機能ブロックに空白行を追加すると、読みやすくなります。

ショートコード間に不必要な空白のインデント行を使用しないでください。

このチュートリアル

HTML

このチュートリアルではテクノロジーだけでなく、睡眠についても学びます。
この教科書は、技術だけでなく夢の中で教える、
このチュートリアルではテクノロジーだけでなく、睡眠についても学びます。

このチュートリアル

このチュートリアルでは、技術だけでなく睡眠についても教えます。
このチュートリアルではテクノロジーだけでなく、睡眠についても学びます。
このチュートリアルではテクノロジーだけでなく、睡眠についても学びます。
このチュートリアルではテクノロジーだけでなく、睡眠についても学びます。

名前
説明


あ
説明A


B
説明B