検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >簡単な HTML5 の予備的な入門チュートリアル_html5 チュートリアルのスキル

簡単な HTML5 の予備的な入門チュートリアル_html5 チュートリアルのスキル

WBOY
WBOYオリジナル
2016-05-16 15:46:291265ブラウズ

HTML5 は未来を表します。W3C (World Wide Web Consortium、World Wide Web Consortium) は XHTML を放棄し、HTML5 を公式の標準として認めました。

HTML5 は次世代の HTML です。
HTML5 は、既存の HTML4.01 および XHTML1.0 標準を置き換えることを目的として、HTML、XHTML、および HTML DOM の新しい標準になります。リッチ インターネット アプリケーション (RIA) の Flash、Silverlight、JavaFX などへの依存を減らし、ネットワーク アプリケーションを効果的に強化できる API をさらに提供したいと考えています。
HTML の最後のバージョンは 1999 年に作成されました。それ以来、Web の世界は劇的に変化しました。
HTML5 はまだ開発中です。ただし、最新のブラウザのほとんどはすでに HTML5 をある程度サポートしています。
HTML5 は、W3C と WHATWG のコラボレーションの成果です。
WHATWG は Web フォームとアプリケーションに取り組んでいますが、W3C は XHTML 2.0 に重点を置いています。 2006 年に、両者は協力して新しいバージョンの HTML を作成することにしました。
HTML5 用に確立されたいくつかのルール:
新機能は HTML、CSS、DOM、および JavaScript に基づく必要があります。
外部プラグイン (Flash など) の必要性を減らす
エラー処理を改善する
スクリプトを置き換えるマークアップを増やす
HTML5 はデバイスに依存しない必要がある
開発プロセスは公開されるべきである

最も単純な HTML5 ドキュメント

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <タイトル>小さな HTML ドキュメントタイトル>
  3. <p>HTML5 スタイルでブラウザを動かしましょう。< ;/p>

テキストが 1 行だけ含まれる非常に単純な HTML5 ドキュメント。ブラウザでは次のように表示されます。


より一般的な構造では、 と を使用してページの実際のコンテンツを分離し、 をカプセル化します。ドキュメント全体、現在のドキュメントは次のようになります:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <title>小さな HTML ドキュメントタイトル>
  5. 頭>
  6. <ボディ>
  7. <p>HTML5 スタイルでブラウザを動かしましょう。< ;/p>
  8. ボディ>
  9. html>

、、 HTML5 ではこれらの要素は必要ありませんが、この書き方の方が優れています。

HTML5 ドキュメントタイプ

XML/HTML コードコンテンツをクリップボードにコピー
  1. >


最初の行は特定のドキュメント タイプ宣言である必要があります。これは、後続のドキュメント マークアップがどの標準に従うかを示すために使用されます。 HTML5 の文書型宣言は非常に単純です。

文字エンコーディング

現在、ほとんどの Web サイトは UTF-8 エンコーディングを使用しています。これは簡潔で変換が速く、必要な英語以外の文字もサポートしています。

HTML5 で文字エンコーディング情報を追加するのは非常に簡単です。次のように 要素を追加します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <頭>
  2. <メタ charset="utf- 8">
  3. <title>小さな HTML ドキュメントタイトル>
  4. 頭>

Dreamweaver デザイン ツールは、新しい Web ページを作成するときにこのメタ情報を自動的に追加し、ファイルを UTF エンコードで保存します。最も単純なテキスト エディタを使用している場合は、保存時に正しいエンコード (UTF-8) を選択することを忘れないでください。

ページの言語

Web ページで使用される自然言語を示すことは良い習慣です。コンテンツの言語を指定するには、任意の要素で lang 属性を使用します。

ページ全体に言語の説明を追加するには、次のコードに示すように、 要素に lang 属性を指定する必要があります。

XML/HTML コード
コンテンツをクリップボードにコピー
  1. <html lang="zh-CN">
この情報の詳細は、ページに複数の言語のテキストが含まれている場合、スクリーン リーダーにも役立ちます。


スタイルシートを追加

プロがデザインしたウェブサイトである限り、スタイルシートは必ず使用されます。使用する CSS スタイル シートを指定する場合は、次のように に 要素を追加する必要があります。

XML/HTML コード
コンテンツをクリップボードにコピー
  1. <頭>
  2. <メタ charset="utf- 8">
  3. <title>小さな HTML ドキュメントタイトル>
  4. <リンク rel="スタイルシート" href="TinyHTML5.css">
  5. 頭>


JavaScript を追加

HTML5 に JavaScript を追加することは、従来のページに JavaScript を追加することと似ています。たとえば、

XML/HTML コードコンテンツをクリップボードにコピー
  1. <頭>
  2. <メタ charset="utf- 8">
  3. <title>小さな HTML ドキュメントタイトル>
  4. <リンク rel="スタイルシート" href="TinyHTML5.css">
  5. <script src="TinyHTML5. js">スクリプト>
  6. 頭>


language="JavaScript" 属性を追加する必要はありません。ブラウザは JavaScript の使用を前提としています。

特記事項:

IE で JavaScript を含むページのテストに多くの時間を費やしたい場合は、Web マークと呼ばれる特別なコメント (url= から保存) も追加する必要があります。このコメント行は、指定された文字エンコーディング要素の後に配置する必要があります。以下のように:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <頭>
  2. <メタ charset="utf- 8">
  4. <title>小さな HTML ドキュメントタイトル>


このコメントは、IE にページをリモート Web サイトからダウンロードされたものとして扱うよう指示します。そうしないと、IE は特別なロック モードに切り替わり、[ブロックされたコンテンツを許可する] をクリックした後にセキュリティ警告をポップアップ表示します。ボタンが押されるまで実行されます。

(0014) は、about:internet 文字列の長さを指します。

最終結果

完全で美しい HTML5 コードは最終的に次のようになります:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html lang="zh- CN「>
    3. 」
  3. <頭>
  4. <メタ charset="utf- 8">
  6. <title>小さな HTML ドキュメントタイトル>
  7. <リンク rel="スタイルシート" href="TinyHTML5.css">
  8. <script src="TinyHTML5. js">スクリプト>
  9. 頭>
  11. <ボディ>
  12. <p>HTML5 スタイルでブラウザを動かしましょう。< ;/p>
  13. ボディ>
  14. html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5_html5 チュートリアル スキルにおける Blob オブジェクトの使用の詳細な分析次の記事：HTML5_html5 チュートリアル スキルにおける Blob オブジェクトの使用の詳細な分析

関連記事

続きを見る