コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 簡単な HTML5 の予備的な入門チュートリアル_html5 チュートリアルのスキル

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

WBOY
リリース： 2016-05-16 15:46:29
オリジナル
1266 人が閲覧しました

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>
関連ラベル：
html5
ソース：php.cn
前の記事：HTML5_html5 チュートリアル スキルにおける Blob オブジェクトの使用の詳細な分析 次の記事：HTML5_html5 チュートリアルのスキルの発展はどうなるでしょうか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート